jQuery基础学习之ajax

ajax是jQuery实现后台与前台数据交互,与局部页面无刷新的技术
咱们照样来说下json不过是后台用的三种较为流行的json
第一种为:FastJson 由阿里巴巴提供
第二种为:Jackson 是一种开源的
第三种为 :Gson 是有Google提供
由于gson大多用于手机端所以就不介绍了详情可以去
https://blog.csdn.net/cgh_baby/article/details/54906402?utm_source=copy
查看详细的
jackson
Jackson是一个简单基于Java应用库，Jackson可以轻松的将Java对象转换成json对象
和xml文档，同样也可以将json、xml转换成Java对象

核心代码：
ObjectMapper om= new ObjectMapper();
om.writeValueAsString(参数);

Fastjson
关键代码
JSON.toJSONString(对象名)

jackson将java–>json
JavaBean/Map
{}

数组/List/Set
[]
类里嵌类
混合模式

$(function() {

	$.ajax({  //调用jQuery的ajax方法
		type : "post/get",  //设置提交方式
		url : "",//提交打字
		dataType : "json",返回的数据类型
		data : {//需要上传的参数
		},
		success : function(msg) {//返回的数据 
		}
	});

下面是使用ajax来做一个加法运算

//FastJson返回数据
//ajax代码
$(function() {
	var addend=$("#addend").val();//获得页面上的参数
	var augend=$("#augend").val(); 
	$.ajax({
		type : "post",//选择post提交方式
		url : "../RegionServlet?reply=FastJson",//路径
		dataType : "json",//返回数据类型为json
		data : {
			addend:addend,//上传参数
			augend:augend
		},
		success : function(msg) {
        alert(msg);//弹出返回数据
		}
	});
});

//后台代码
protected void doPost(HttpServletRequest request, HttpServletResponse response)
		throws ServletException, IOException {

	String reqly = request.getParameter("reply");// 根据上传上来的参数来判断是使用FastJson还是Jackson
	switch (reqly) {
	case "FastJson":
		FastJson(request, response);
		break;
	default:
		Jackson(request, response);
		break;
	}

}

/**
 * 
 * @Title: FastJson
 * @Description: 使用FastJson交互数据
 * @param request
 * @param response
 * @throws ServletException
 * @throws IOException
 * @return void
 */
protected void FastJson(HttpServletRequest request, HttpServletResponse response)
		throws ServletException, IOException {
	int addend = Integer.valueOf(request.getParameter("addend"));// 获得从页面上上传的参数并转为整数类型
	int augend = Integer.valueOf(request.getParameter("augend"));
	int sum = addend + augend;// 相加
	String tojson = JSON.toJSONString(sum);//使用FastJson存储数据
	this.out(tojson, response);
}
/**
 * 
 * @Title: FastJson
 * @Description: 使用Jackson交互数据
 * @param request
 * @param response
 * @throws ServletException
 * @throws IOException
 * @return void
 */
protected void Jackson(HttpServletRequest request, HttpServletResponse response)
		throws ServletException, IOException {
	int addend = Integer.valueOf(request.getParameter("addend"));// 获得从页面上上传的参数并转为整数类型
	int augend = Integer.valueOf(request.getParameter("augend"));
	int sum = addend + augend;// 相加
	ObjectMapper om = new ObjectMapper();//new 一个Jackson
	String tojson = om.writeValueAsString(sum);//使用Jackson存储数据
	this.out(tojson, response);
}

/**
 * 
 * @Title: out
 * @Description: 将json数据回调到页面上去
 * 
 */
protected void out(String tojson, HttpServletResponse response) throws ServletException, IOException {
	PrintWriter writer = response.getWriter();
	writer.println(tojson);
	writer.flush();
	writer.close();
}

前台代码

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<input type="text" id="addend" value="2">
	<input type="text" id="augend" value="3">
</body>

在这里插入图片描述

使用ajax
在这里插入图片描述

返回的结果为5
ajax虽好但是会拖累项目的启动速度…

jQuery基础学习之ajax

猜你喜欢