jQuery异步请求使用详解($.get/$.post/$.getJSON/$.ajax)

1、jQuery异步请求简述

jQuery的异步请求也称之为快速通信机制，主要包括$.get,$.post,$.getJSON,$.ajax等，底层封装了javaScript的XMLHttpRequest对象，且解决了浏览器之间的差异性，兼容性较好，使用更加的方便。

使用jQuery的时候，需要引入jQuery的包信息。

<script type="text/javascript" src="js/jquery-2.1.1.js"></script>或使用在线包

2、$.get使用方式

2.1、基本用法

【完整写法】

//test.do请求地址  {}：请求参数，使用json字符串  function：回调函数
$.get("test.do",{"username":"晓春","userid":"1001"},function(data){
     //回调函数
 }); 

【其他写法】

如果只需要请求不会需要回调函数，或者只需要回调不需要请求参数也可以写成如下写法

//1、直接发送get请求到test.do
$.get("test.do"); 

//2、直接发送请求并携带json参数
$.get("test.do",{"username":"晓春","userid":"1001"}); 

//3、直接请求，并获取回调函数
$.get("test.do",function(data){
     //回调函数
 }); 

2.2 项目案例-使用servlet进行测试

【前端jQuery请求】

jQuery的使用需要导入jquery包

<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript">
   $.get("test.do",{"username":"晓春","userid":"1001"},function(data){
        //data的数据为： {"userid":"1001","username":"晓春"}
        //parseJSON()函数用于将格式完好的JSON字符串转为与之对应的JavaScript对象
	    var obj = $.parseJSON(data);
        //转化之后通过obj直接获取json中的属性名称即可,如obj.id输出为1001
	    alert("===1==="+ obj.userid);
   }); 
</script>

【后端获取结果并返回值】

如果使用springmvc用法相同，可以通过springmvc提供的@ResponseBody返回json数据

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("================test.do====================");
		response.setContentType("text/html;charset=utf-8");
		String userid=request.getParameter("userid");
		String username=request.getParameter("username");
		//获取用户名和密码并返回json字符串  其他说明：\"：使用转义字符返回双引号
		response.getWriter().print("{\"username\":\",\"userid\":\""+userid+"\"\",\"userid\":\""+userid+"\",}");
	}

3、$.post使用方法

$.post使用与$.get使用基本相似，可以将上面案例直接复制修改成$.post即可。

4、$.getJSON使用方法

需要注意的是$.getJSON接口的返回值比较特殊，返回值需要是jsonObject

JSONObject对象的使用需要用到指定包信息，如下是包下载地址

链接：https://pan.baidu.com/s/1DTBOEQFO1Ty2soLgSNThgw 
提取码：uk0c

【前端用法】

/* 需要返回指定类型的数据  ---  JSON对象  */
   $.getJSON("test.do",{"username":"晓春","userid":"1001"},function(data){
       //data返回值类型为[object object],结果可以通过data.属性直接获取到
	   alert(data.stu.stu_id);
   }); 

【后端用法】

JSONObject 对象的使用需要下载对应的包

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  Map<String, Object> map=new HashMap<>();
  map.put("stu_id", "1001");
  map.put("code", "200");
		
  //JSONObject可以将Map类型的参数解析成json对象，并通过response返回
  JSONObject obj1=new JSONObject(map);
  response.getWriter().print(obj1.toString());
}

5、$.ajax的使用

【ajax基本参数配置和使用】

 $.ajax({
	   type:"get",//请求类型get或post
	   url:"test.do",//请求地址
	   cache:false,//去除请求缓存
	   dataType:"text",//与后端数据交互类型
	   data:{"userid":"1002","username":"十一郎"},
	   success:function(data){//请求成功之后的回调函数
		  alert("====1===="+data); 
		  var obj = $.parseJSON(data);
		  alert("===2==="+obj.userid);
	   } 
   });

【后端用法】

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("================test.do====================");
		response.setContentType("text/html;charset=utf-8");
		String userid=request.getParameter("userid");
		String username=request.getParameter("username");
		//获取用户名和密码并返回json字符串  其他说明：\"：使用转义字符返回双引号
		response.getWriter().print("{\"username\":\",\"userid\":\""+userid+"\"\",\"userid\":\""+userid+"\",}");
	}