如何书写原生ajax完成数据交互

电脑

intellij IDEA或者myeclipse

第一种：创建一个springboot的项目。1、 打开创建页面 选择File-new-project..2、选择创建的项目为spring initializr 进入springboot项目创建步骤（也可以选择类型java，创建一个普通java项目）3、输入项目名字，选择依赖web（根据项目需求选择，此次需要），选择存放目录-完成（Finish）4、pom.xml中添加html视图依赖：    org.springframework.boot    spring-boot-starter-thymeleaf

第一步：编写一个controller。主要是两个方法跳转页面ajax_js.html和返回ajax请求数据import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.ResponseBody;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.util.Map;@Controllerpublic class TestController { @RequestMapping('/toAjax') String test(HttpServletRequest request) { return 'ajax_js'; } @ResponseBody @RequestMapping('/bean') public String testJson(HttpServletRequest request, HttpServletResponse response, Map paramMap) { String callback = request.getParameter('callback'); String id = request.getParameter('id'); String name = request.getParameter('name'); String sex = request.getParameter('sex'); String json = '{'id':' + id + ','name':'' + name + '','sex':'' + sex + ''}'; if (callback != null) { json = callback + '(' + json + ')'; } return json; }}

第二步：前端页面js原生调用get方式的实现。1、具体前端页面代码如下所示：        2、测试输入浏览器页面地址http://localhost:8080/toAjax

第三步：前端页面js原生调用post方式的实现。1、前端页面如下所示：        2、测试2.1 在浏览器中输入地址 http://localhost:8080/toAjax跳转到ajax请求页面

开发环境jdk1.8 IDEA2018.2.2 maven apache-maven-3.5.4

创建springboot项目需要连接互联网