ajax与后端互相传值与处理(各种类型)

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：
ajax 全名为 async javascript and XML
是前后台交互数据的重要工具
它可以局部刷新页面而不需要刷新整个页面
那么怎么实现ajax与后台之间的数据传输以及得到数据后怎样处理尤为重要
提示：以下是本篇文章正文内容，下面案例可供参考

一、ajax的基本操作(入门)

前端

点击 按钮执行loadDoc()函数

 <button type="button" onclick="loadDoc()">更改文本</button>

这是 loadDoc()函数

function loadDoc() {var xhttp = new XMLHttpRequest();//创建XMLHttpRequest对象,即创建一个异步调用对象.xhttp.send("GET", "url", true);//创建一个新的HTTP请求.//参数含义依次为 请求方式,请求地址, true/false(同步异步),用户名称(可写),密码(可写) xhttp.open();//将请求发送到服务器用于GET请求xhttp.onreadystatechange = function() {//当readyState属性发生变化时被调用的函数if (this.readyState == 4 && this.status == 200) {//status:返回请求的状态号 200为"ok"//readyState:保存XMLHttpRequest的状态。 4为请求已完成且响应已就绪var s= xhttp.responseText()//得到后端返回的字符串alert(s);}};
} 

后端(java)

 @RequestMapping("/url")//这里的url 要与上面的保持一致@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {resp.setContentType("text/json;charset=UTF-8);//中文resp.getWriter().write("请求成功");//发送 字符串给前端}

结果

这是ajax入门基本操作,即ajax用来进行前后端交互

二、jquery版的ajax(用jquery来写ajax,在以后传递跟复杂的参数时,更方便),这里展示最常用的写法

$.ajax({//与js类似,type: "POST",//请求类型dataType: "text",//可写为json 之后会写到url: "url",//请求地址data: ""//需发送到服务器的数据success: function(data){alert(date);//成功相应执行的函数},error: function(msg){alert(msg);//失败}});

json

JSON，全称是 JavaScript Object Notation,译为JavaScript对象标记法。
通俗的来讲json可以在字符串与对象之间相互转换,方便了前后端数据交互转化与使用.

---

传入参数(一个)

传入一个参数相对简单
这是js的ajax

  xhttp.open("GET","http://localhost:8080/s1?id=1",true);//只是//在后面加了  ?id=1

jq的ajax

   data: {id: 1},//在data后面加,其余不变(也可以像js一样直接在url上加)

传入一个对象

这个时候再使用原生js就很难实现了
我们使用jq
比如我们要把user的四个属性传入后端

 var s=  {"name":"张三","sex":"男","id":1,"money":1};//这是我们要传的值这是ajax的几个参数type: "POST",url: "url",data: JSON.stringify(s),//将s转为json格式dateType: "json",表示从后端接收的时json格式async: false,contentType: "application/json;charset=utf-8",//表示传到后端的时json格式,并且支持中文

后端接收

@RequestMapping(method = {RequestMethod.POST}, value = "/s3", produces = "application/json;charset=UTF-8")@ResponseBody//可以用RequestBody 将user封装public String toPay1(@RequestBody User users) {System.out.println(users);return "okk";}

结果

传入一个对象集合

与上边同理,只不过要先把每一个json放入一个数组中,再将数组json化即可
前端

 var s=  {"name":"张三","sex":"男","id":1,"money":1};var s1=  {"name":"李四","sex":"女","id":2,"money":3};var a=new Array();a.push(s);a.push(s1);var json=JSON.stringify(a);$.ajax({type: "POST",url: "http://localhost:8080/s3",data: json,dateType: "json",async: false,contentType: "application/json;charset=utf-8",

后端只需要把接收的类型改为对象集合即可

@RequestBody List<User> users

结果

一个数组或集合再加一个参数

我是这样做的
前端
同时传入json,并在url加参数

   url: "http://localhost:8080/s3?id=1",data: json,

后端接受

@RequestBody List<User> users,String id

结果

提示：这里对文章进行总结：