Jquery通过ajax发送json类型参数
概述
- ajax请求通常使用jquery的方法
$.ajax
实现,需要导入jquery依赖的包,jquery包可访问jquery官网下载,也可以通过引用网络上的资源 - ajax请求通常使用json作为数据传输类型,通过javascript内置函数解析json字符串,也可以将对象直接量格式化为json对象
- json数据类型后端处理,可以使用gson包支持,例如现在用的gson-2.8.5.jar,根据github上谷歌的介绍,可通过Maven存储库下载
内容摘要
-
创建json对象的形式
-
json对象与json字符串转化
-
Jquery发送JSON类型参数
-
案例源码
具体内容
1. 创建json对象的形式
形式1
obj = {};
obj.name = "测试用户";
var msg = "ajax发送的参数";
obj.msg = msg;
形式2
var info = "其他形式";
obj = {name:"测试用户",msg:"ajax发送的消息",info:info};
形式3
obj = {}
obj["name"] = "测试用户";
obj["msg"] = "ajax发送的参数";
2. json对象与json字符串转化
//json对象格式化为json字符串
var ss = JSON.stringify(obj);
//json字符串解析为json对象
var p = JSON.parse(ss);
-
Jquery发送JSON类型参数
-
发送的数据类型:
dataType:"json"
, 则传入参数data:obj
中的obj是json对象,而不是json字符串 -
返回结果处理:
success: function(data)
得到的data是json对象,而不是json字符串 -
后端如果没有正确返回json格式的字符串,则会报如下错误,说明返回类型错误
{"readyState":4,"responseText":"success","status":200,"statusText":"parsererror"}
-
json字符串的表示与解析
单个字符串的json表示
var ss = "\"一条消息\"";
alert(JSON.parse(ss));
多个字符串表示
var ss = "{\"result\":\"处理成功\",\"tip\":\"返回的消息\"}";
alert(JSON.parse(ss).result);
简单数组与json转换
var arr = [1,2,3,5];
// 格式化为json字符串类型
var obj = JSON.stringify(arr);
var astr = "[1,2,3,4,5]";
// 解析为数组类型
alert(JSON.parse(astr)[0]);
复杂数组与json转换
var ss = "[{\"result\":\"结果1\",\"tip\":\"消息1\"},{\"result\":\"结果2\",\"tip\":\"消息2\"}]";
var arr = JSON.parse(ss);
var res = "";
for(var k=0;k<arr.length;k++){
res +=arr[k].result+"\t"+arr[k].tip;
}
document.write(res);
4.案例源码
4.1 前端源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery/jquery-3.5.0.min.js"></script>
<script>
//js代码ajax请求
function test(){
// obj = {};
// obj.name = "测试用户";
// obj.msg = "ajax发送的参数";
var msg = "ajax发送的消息";
obj = {name:"测试用户",msg:msg};
// obj = {}
// obj["name"] = "测试用户";
// obj["msg"] = "ajax发送的参数";
$.ajax({
url: "http://127.0.0.1:8080/JqueryTest/helloservlet",
data:obj,
type: "GET",
dataType: "json",
// false为同步,true为异步,默认为false
// 对于success返回,设置为false或true,似乎看不出影响
async: false,
// xhrFields不设置将则后端服务器不会保存session会话
xhrFields: {
withCredentials: true
},
// 跨域请求访问,不设置则在浏览器中无法访问服务器
crossDomain: true,
// 错误处理函数最好加上,否则将很难排错
error:function(msg){
/*
msg为json对象,返回以下字符串:
{"readyState":4,"responseText":"success","status":200,"statusText":"parsererror"}
说明后端服务器没有正确返回json数据类型
*/
document.write(JSON.stringify(msg));
},
success: function(data) {
// data为json对象
document.getElementById("content").innerText=JSON.stringify(data);
}
});
}
window.onload = function(){
test();
}
</script>
</head>
<body>
显示结果:
<div id="content"></div>
</body>
</html>
4.2 后端源码
package servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;
import com.google.gson.JsonObject;
@WebServlet("/helloservlet")
public class HelloServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public HelloServlet() {
super();
// TODO Auto-generated constructor stub
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
//response.setHeader函数:
// 1.用于设置请求头,控制访问
// 2.不设置将会出现跨域请求访问不到的问题
// 3.最简便的办法是是直接在过滤其中设置
// response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
response.setHeader("Access-Control-Allow-Headers","*");
response.setHeader("Access-Control-Allow-Method","*");
// 允许所有的域名跨域访问
// response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
response.setHeader("Access-Control-Allow-Credentials", "true");
// request获取采参数如出现乱码,则需要设置
// request.setCharacterEncoding("utf-8");
// response需要设置编码,否则会返回乱码
// response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=UTF-8");
String name = request.getParameter("name");
String msg = request.getParameter("msg");
System.out.println("传递参数:"+name+"\t"+msg);
PrintWriter out = response.getWriter();
// 这里需要jar包支持:gson-2.8.5.jar
// 用该函数可转换将其他数据类型为json字符串类型,这样可以
JsonObject json = new JsonObject();
json.addProperty("result","处理成功");
json.addProperty("tip", "返回的消息");
out.print(json.toString());
// json字符串类型,如果只是一个元素:
// out.print("\"success\"");
out.flush();
out.close();
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
更多推荐
Jquery通过ajax发送json类型参数
发布评论