ajax传参实现获取不同的json数据、JQ版ajax

发表于 2020-10-14 本文字数 8.3k 字阅读时长 8 分钟

# ajax 传参实现获取不同的 json 数据

get，比较常用。✨


//1个参数的写法
xhr.open("get","http://localhost/web19/day05/getStudent.php?name=张三")
xhr.send();
//以上前端只要这么写了，后端在getStudent.php中就可以通过该地址直接拿到name的值张三

//多个参数的写法：
xhr.open("get","http://localhost/web19/day05/getStudent.php?name=张三&age=18")
xhr.send();

post，敏感数据需要使用 post 提交给后端。


// 跟get方式的区别有2个：
// 1. 要拼接的数据放到了send后面
// 2. 添加了一个方法设置请求头
xhr.open("post","http://localhost/web19/day05/getStudent.php");

//设置请求头信息，将send中的url地址编码，转成标准的键值对，以便拼接（默认的标准的方式）
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("name=张三")

# JQ 版的 ajax

JQ 版的 ajax 的亮点：

兼容各大浏览器（包括 IE）。
高度封装，用起来很方便，仅需要配置即可，类似于插件的使用方式。

语法：
    $.ajax({name:value, name:value, ... })
    type      规定请求的类型，（GET 或 POST）,默认值为get。
    url       规定发送请求的 URL。默认是当前页面。
    async     布尔值，表示请求是否异步处理。默认是 true。
    data      规定要发送到服务器的数据。
    dataType  预期的服务器响应的数据类型，一般不需要设置。
    timeout   规定请求的期限时间，默认没有期限   
    cache     是否缓存请求过来的数据
    success(result,status,xhr)  当请求成功时运行的函数。
    error(xhr,status,error)     如果请求失败要运行的函数。
    complete(xhr)               无论数据请求成功与否，都会执行该函数
//ajax是JQ的一个全局方法，类似于之前学习过的全局方法
//$.each,$.trim,$.type,。。。
//标准的模板
$.ajax({
    //默认是get，所以可以省略，等价于open()
   type:"get|post",
   //等价于open()
   url:"数据地址",
    //该方法只会在数据获取成功后才会执行，
    //等价于onreadystatechange,if(xhr.readyState==4&&xhr.status==200)
   success:function(res){
    	//写如何解析json的代码
		console.log(res);//res就是真对象，甚至可以不需要使用JSON.parse()
	},
    //原来的JS是没有的，除非写else语句，可选
    error:function(err){
        
    }
    
});  

//进阶版的模板：
$.ajax({
    //默认是get，可以省略，等价于open()
   type:"get|post",
   //等价于open()
   url:"数据地址",
   timeout:5000,
    //该方法只会在数据获取成功后才会执行，
    //等价于if(xhr.readyState==4&&)
   success:function(res){
    	//写如何解析json的代码
		console.log(res);//res就是真对象，甚至可以不需要使用JSON.parse()
	},
        //原来的JS是没有的，除非写else语句，可选
    error:function(){
        
    },
    complete:function(){
        //不管数据是否获取成功，都会执行该方法
    }
    
});

# ajax 实例

# 实例 1


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <select id="sel">
        <option>---请选择学生---</option>
        <option value="0">---张三---</option>
        <option value="1">---李四---</option>
        <option value="2">---王五---</option>
    </select>
    <div id="box">
        <!-- 显示选中了的学生数据，来自于ajax，ajax请求的是后端数据 -->
    </div>
    <script>
    var sel=document.getElementById("sel");
    var box=document.getElementById("box");
    // var box=doc.
    sel.onchange=function(){
        // console.log(sel.value)
      //xhr即ajax对象
      var xhr=new XMLHttpRequest();
      //再调用该对象下的方法和属性
      //后端提供给我们的地址
      //后端其实会写一个接口文档，里面有文档说明
      // 数据地址其就是接口地址
      // .json
      // txt
      // html
      // xml
      // php
      // jsp
      // php
      // py
      // 后缀名不代表数据，里面的内容才代表数据
      // 文件后缀名仅仅只是用来关联要打开的软件，里面的内容才是关键
      // 
          // xhr.open('get','web19.jpg');
          // 传参到后台,通过url的search部分像后端传递数据（发生数据，通信）
          // getStudent.php?name=1
          xhr.open('get','getStudent.php?uname='+sel.value);
          xhr.send();
          xhr.onreadystatechange=function(){
              if(xhr.readyState==4&&xhr.status==200){
                // 后端返回过来的数据
                 var json=JSON.parse(xhr.response);
                 console.log(xhr.response);//1
                  //注意：json要写对，否则可能会报错
                  box.innerText=`姓名:${json.name},年龄:${json.age}`;
                 }
          }  
    }
    </script>
</body>
</html>

# 实例 2


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        用户名：
        <input type="text" value="" id="ipt" name="uname">
        <br>
        密码：
        <input type="text" value="" id="pwd" name="pwd">
        <button id="btn">d恩如</button>
    </div>
    <div id="box">
        <!-- 显示选中了的学生数据，来自于ajax，ajax请求的是后端数据 -->
    </div>
    <script>
    var ipt=document.getElementById("ipt");
    var pwd=document.getElementById("pwd");
    var btn=document.getElementById("btn");
    var box=document.getElementById("box");
    btn.onclick=function(){
        // console.log(1)
    // var box=doc.
    // sel.onchange=function(){
        // console.log(sel.value)
      //xhr即ajax对象
      var xhr=new XMLHttpRequest();
          // xhr.open('get','web19.jpg');
          // 传参到后台,通过url的search部分像后端传递数据（发生数据，通信）
          // getUser.php?name=admin&pwd=12345
          // xhr.open('get','getUser.php?name='+ipt.value+'&pwd='+pwd.value);
          xhr.open("post",'getUser.php');
          //     含义：规定请求头信息。将send中的数据编码为名称/值对，这是标准的编码格式。
          xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
          // send表示发送的意思，要把发送的数据写在该参数中
          xhr.send('name='+ipt.value+'&pwd='+pwd.value);
          xhr.onreadystatechange=function(){
              if(xhr.readyState==4&&xhr.status==200){
                // 后端返回过来的数据
                // 后端返回的是1，表示成功，否则表示失败
                console.log(xhr.response);
                    if(xhr.response==1){
                        alert("恭喜你登录成功")
                    }  else{
                        alert("请检查您的账号密码再试");
                    }
                }
        }
    }
    </script>
</body>
</html>

# 实例 3


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 假设需要加载json到当前页面，是 不可以使用link标签、script标签或其他标签-->
    <!-- <link rel="stylesheet" href="">
    <script></script> -->
    <!-- 唯一可以的方式就是用ajax来加载json -->
    <script src="jquery-3.5.1.min.js"></script>
</head>
<body>

    <table border="1" width="80%" align="center">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>爱好</th>
        </tr>
        <tbody id="tbd">
            <tr>
               <!-- 此地方最终会被ajax过来的数据替换 -->
            </tr>
        </tbody>
        

        <!-- <tr>
            <td>李四</td>
            <td>19</td>
            <td>男</td>
            <td>唱歌</td>
        </tr> -->
    </table>

    <script type="text/javascript">
        //标准的模板
        $.ajax({
            //默认是get，所以可以省略，等价于open()
           type:"get",
           //等价于open()
           url:"web19.json",
            //该方法只会在数据获取成功后才会执行，
            //等价于if(xhr.readyState==4&&)
           success:function(res){
                //写如何解析json的代码
                console.log(res);//res就是真对象，甚至可以不需要使用JSON.parse()转换
                $.each(res.web19,function(index,item){
                    tbd.innerHTML+="<tr><td>"+item.name+"</td><td>"+item.age+"</td><td>"+item.sex+"</td><td>"+item.hobby.join(",")+"</td></tr>";
                });
            
            },
            //原来的JS是没有的，除非写else语句，可选
            error:function(err){
                alert("数据获取失败，请稍后再试！")
            }
            
        });  
    </script>
</body>
</html>

ajax