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

桃扇骨 2023-09-23 17:58 138阅读 0赞

## 1、jQuery异步请求简述 ##

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

## 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包

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

如果使用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);
    	   } 
       });

【后端用法】