Day06 Ajax

最新推荐文章于 2024-06-13 11:04:47 发布

何以所谓

最新推荐文章于 2024-06-13 11:04:47 发布

阅读量88

点赞数

分类专栏： JAVAEE笔记文章标签： ajax ajax和jquery 表单查询

本文链接：https://blog.csdn.net/weixin_44695396/article/details/90741463

版权

JAVAEE笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一 Ajax

1.ajax同步(GET)

异步无刷新技术。能够请求后台发送和获取数据，而无需卸载页面（刷新页面）。

// 1、得到XMLHttpRequest对象
       var xhr = new XMLHttpRequest();
       console.log(xhr);

       // 2、准备请求   open(请求类型GET/POST,请求的URL,是否异步)
       xhr.open("GET","js/data.json?uname=zs",false); // 同步请求
       console.log("open...");

       // 3、发送请求   send(参数)
       //xhr.send("uname=zhangsan&upwd=123456"); // Post请求有参数，则设置
       xhr.send(null);
       console.log("send...");


       // 4、判断响应状态，得到后台响应得到后台响应 xhr.responseText;
       if (xhr.status == 200) {
           var responseTxt = xhr.responseText;
           console.log(responseTxt);
       } else {
           alert("状态码：" + xhr.status + "，错误信息：" + xhr.responseText);
       }

       console.log("测试...");

2.ajax异步(GET)

核心对象：
                   XMLHttpRequest对象
                   var xhr = new XMLHttpRequest()
               在使用 XHR 对象时，先必须调用 open()方法，它接受三个参数：要发送的请求类型(get、post)、请求的 URL 和表示是否异步。open()方法并不会真正发送请求，而只是启动一个请求以备发送。
               通过 send()方法进行发送请求，send()方法接受一个参数，作为请求主体发送的数据。如果不需要则，必须填 null。执行 send()方法之后，请求就会发送到服务器上。


发送的请求的步骤：
(1)、得到XMLHttpRequest对象
                       new XMLHttpRequest()
(2)、准备请求   open(请求类型GET/POST,请求的URL,是否异步)
                       xhr.open(请求类型GET/POST,请求的URL,是否异步);
(3)、发送请求   send([参数])
                       xhr.send([参数])
                       注：如果是GET请求，请求的参数设置在url的后面，所以send(null)
                           如果是POST请求，无参数设置为null，有参数则设置参数即可
(4)、判断响应状态，得到后台响应
                       xhr.responseText;


               同步调用固然简单，但使用异步调用才是我们真正常用的手段。
               使用异步调的时候，检测 readyState 属性,每当 readyState 属性改变时，触发readystatechange 事件。
               这个属性有五个值：
               值            状态        说明
               0            未初始化    尚未调用 open()方法
               1            启动        已经调用 open()方法，但尚未调用 send()方法
               2            发送        已经调用 send()方法，但尚未接受响应
               3            接受        已经接受到部分响应数据
               4            完成        已经接受到全部响应数据，而且可以使用

        // 1、得到XMLHttpRequest对象
       var xhr = new XMLHttpRequest();
       console.log(xhr);

       // 2、准备请求   open(请求类型GET/POST,请求的URL,是否异步)
       xhr.open("GET","js/data.json",true); // 异步请求
       console.log("open...");

       // 3、发送请求   send(参数)
       //xhr.send("uname=zhangsan&upwd=123456"); // Post请求有参数，则设置
       xhr.send(null);
       console.log("send...");


       // 4、判断响应状态，得到后台响应得到后台响应 xhr.responseText;
       // 如果是异步请求，需要先知道数据是否完全响应
       // 监听readyState的值的变化
       xhr.onreadystatechange = function() {
           console.log(xhr.readyState);
           // 判断是否完全响应，即readyState的值等于4
           if (xhr.readyState == 4) {
               if (xhr.status == 200) {
                   var responseTxt = xhr.responseText;
                   console.log(responseTxt);
               } else {
                   alert("状态码：" + xhr.status + "，错误信息：" + xhr.responseText);
               }
           }
       }

       console.log("测试...");

3.ajax同步(POST)

        // 1、得到XMLHttpRequest对象
       var xhr = new XMLHttpRequest();
       console.log(xhr);

       // 2、准备请求   open(请求类型GET/POST,请求的URL,是否异步)
       xhr.open("POST","js/data.json",false); // 同步请求
       console.log("open...");

       // 模拟表单提交
       xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

       // 3、发送请求   send(参数)
       //xhr.send("uname=zhangsan&upwd=123456"); // Post请求有参数，则设置
       xhr.send("uname=zs&upwd=123");
       console.log("send...");


       // 4、判断响应状态，得到后台响应得到后台响应 xhr.responseText;
       if (xhr.status == 200) {
           var responseTxt = xhr.responseText;
           console.log(responseTxt);
       } else {
           alert("状态码：" + xhr.status + "，错误信息：" + xhr.responseText);
       }

       console.log("测试...");

4.ajax异步(POST)

        // 1、得到XMLHttpRequest对象
       var xhr = new XMLHttpRequest();
       console.log(xhr);

       // 2、准备请求   open(请求类型GET/POST,请求的URL,是否异步)
       xhr.open("POST","js/data.json",true); // 异步请求
       console.log("open...");

       // 模拟表单提交
       xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

       // 3、发送请求   send(参数)
       //xhr.send("uname=zhangsan&upwd=123456"); // Post请求有参数，则设置
       xhr.send(null);
       console.log("send...");


       // 4、判断响应状态，得到后台响应得到后台响应 xhr.responseText;
       // 如果是异步请求，需要先知道数据是否完全响应
       // 监听readyState的值的变化
       xhr.onreadystatechange = function() {
           console.log(xhr.readyState);
           // 判断是否完全响应，即readyState的值等于4
           if (xhr.readyState == 4) {
               if (xhr.status == 200) {
                   var responseTxt = xhr.responseText;
                   console.log(responseTxt);
               } else {
                   alert("状态码：" + xhr.status + "，错误信息：" + xhr.responseText);
               }
           }
       }

       console.log("测试...");

5.封装ajax

调用者：
           请求类型   GET/POST
           请求路径
           请求参数
           是否异步

封装Ajax
(1)、得到XMLHttpRequest对象
               new XMLHttpRequest()
(2)、打开请求   open(请求类型GET/POST,请求的URL,是否异步) 注：三个参数都是由调用者传递
               注：判断如果是POST请求，请求路径直接设置即可；如果是GET请求，需要拼接请求参数；
(3)、发送请求   send([参数])
               xhr.send([参数])
               注：如果是GET请求，请求的参数设置在url的后面，所以send(null)
                      如果是POST请求，无参数设置为null，有参数则设置参数即可
(4)、判断响应状态，得到后台响应
               xhr.responseText;
               注：判断是否是异步请求，如果是同步则直接获取响应数据；如果是异步，则需要先判断数据是否完全响应（readyState==4），再获取响应数据

// 用户A
   var userA = {
       type:"GET",
       url:"js/data.json?a=1",
       data:{
           uname:"zhangsan",
           upwd:"123456"
       },
       async:true,
       success:function(result){
           console.log(result);
       },
       error:function(result) {
           console.log(result);
       }
   };
   ajax(userA);


   // 用户B
   var userB = {
       type:"POST",
       url:"js/data.json",
       data:{
           uname:"zhangsan",
           upwd:"123456"
       },
       async:false,
       success:function(result){
           alert(result);
       },
       error:function(result) {
           console.log(result);
       }
   };
   ajax(userB);




   ajax({
       type:"POST",
       url:"js/data.json",
       data:{
           uname:"zhangsan",
           upwd:"123456"
       },
       async:false,
       success:function(result){
           alert(result);
       },
       error:function(result) {
           console.log(result);
       }
   });

    function ajax(obj) {
       // 1、得到XMLHttpRequest对象
       var xhr = new XMLHttpRequest();

       // 2、打开请求   open(请求类型GET/POST,请求的URL,是否异步) 注：三个参数都是由调用者传递
       // 注：判断如果是POST请求，请求路径直接设置即可；如果是GET请求，需要拼接请求参数；
       /*
           格式化参数
           data:{
               uname:"zhangsan",
               upwd:"123456"
           }
           ----> uname=zhangsan&upwd=123456
       */
       // 格式化参数
       obj.data = formatParam(obj.data);
       // 判断是否是GET请求
       if (obj.type.toUpperCase() == "GET") { // GET请求
           // 拼接参数
           obj.url += (obj.url).indexOf("?") > -1 ? "&" +obj.data : "?" +obj.data;
       }
       xhr.open(obj.type,obj.url,obj.async);


       // 3、发送请求   send([参数])
       if (obj.type.toUpperCase() == "POST") { // POSTt请求
           // 模拟表单提交
           xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
           // 发送请求
           xhr.send(obj.data);

       } else { // GET请求
           xhr.send(null);
       }



       // 4、判断响应状态，得到后台响应
       // 判断是否是异步请求
       if (obj.async) { // 异步请求
           // 如果是异步请求，需要先知道数据是否完全响应
           // 监听readyState的值的变化
           xhr.onreadystatechange = function() {
               // console.log(xhr.readyState);
               // 判断是否完全响应，即readyState的值等于4
               if (xhr.readyState == 4) {
                   callback();
               }
           }

       } else { // 同步请求
           callback();
       }

       /*
           获取响应结果
       */
       function callback() {
           if (xhr.status == 200) {
               var responseTxt = xhr.responseText;
               // console.log(responseTxt);

               // 调用成功的回调函数
               obj.success(responseTxt);

           } else {
               // alert("状态码：" + xhr.status + "，错误信息：" + xhr.responseText);
               // 调用失败的回调函数
               obj.error("状态码：" + xhr.status + "，错误信息：" + xhr.responseText);
           }
       }

   }


   /**
   * 将对象形式的参数转换成字符串
            格式化参数
           data:{
               uname:"zhangsan",
               upwd:"123456"
           }
           ----> uname=zhangsan&upwd=123456
   */
   function formatParam(data) {
       var arr = [];
       for(var key in data) {
           //console.log(key,data[key]);
           var str = key+"="+data[key]; // uname=zhangsan
           // 将数组追加到数组中
           arr.push(str);
       }
       // console.log(arr);
       // 将数组转换成字符串
       var params = arr.join("&");
       return params;
   }

二 Jquery和Ajax

1.ajax

$.ajax()
       jquery 调用 ajax 方法：
       格式：$.ajax({});
       参数：
               type：请求方式 GET/POST
               url：请求地址 url
               async：是否异步，默认是 true 表示异步
               data：发送到服务器的数据
               dataType：预期服务器返回的数据类型
               contentType：设置请求头
               success：请求成功时调用此函数
               error：请求失败时调用此函数

$.ajax({
       type:"post",
       url:"js/data.json",
       data:{

       },
       dataType:"json", // 预期返回的数据的类型
       success:function(data){
           console.log(data);
       }
   });

2.get

(1).请求 json 文件，忽略返回值
           $.get('../js/cuisine_area.json');
(2).请求 json 文件，传递参数，忽略返回值
           $.get('../js/cuisine_area.json',{name:"tom",age:100});
(3).请求 json 文件,拿到返回值,请求成功后可拿到返回值
           $.get('../js/cuisine_area.json',function(data){
               console.log(data)
           });
(4).请求 json 文件,传递参数,拿到返回值
           $.get('../js/cuisine_area.json',{name:"tom",age:100},function(data){
               console.log(data)
           });

3.post

(1).请求 json 文件，忽略返回值
           $.post('../js/cuisine_area.json');
(2).请求 json 文件，传递参数，忽略返回值
           $.post('../js/cuisine_area.json',{name:"tom",age:100});
(3).请求 json 文件,拿到返回值,请求成功后可拿到返回值
           $.post('../js/cuisine_area.json',function(data){
               console.log(data)
           });
(4).请求 json 文件,传递参数,拿到返回值
           $.post('../js/cuisine_area.json',{name:"tom",age:100},function(data){
               console.log(data)
           });

4.getJSON

得到的是对象

$.getJSON("js/data.json",{},function(data){
       console.log(data);
       console.log(data.uname);
   })

5.jsonp

远程跨域时，如果有两个域名，从其中一个域名去访问另一个域名时，使用
       普通的 ajax 方法是获取不到数据的，那么就可以使用 jsonp 方式发送请求。
       添加属性：
       // jsonp:’callback’
       dataType:’jsonp’

       注：访问的远程路径支持跨域

$.ajax({
       type:"get",
       url:"http://iservice.itshsxt.com/restaurant/find",
       data:{
           cuisine:"Bar"
       },
       dataType:"jsonp", // 跨域处理
       success:function(data){
           console.log(data);
       }
   });

三表单查询

// 进入页面显示用户信息
loadData();

/**
* 查询用户列表
*/
function loadData() {
   // 发送ajax请求
   $.ajax({
       type:"get",
       url:"js/data.json",
       data:{

       },
       dataType:"json", // 预期服务器返回的数据库
       success:function(result){ // 回调函数
           console.log(result);
           // 判断数据是否查询成功 resultCode 1=成功，0=失败
           if (result.resultCode == 1) { // 成功，显示数据列表

               // 创建表格的dom
               crateTable(result.result);

           } else { // 失败，显示提示信息
               // 设置提示信息
               var msg = "<h2>暂未查询到用户数据！</h2>";
               // 将提示信息设置到div中
               $("#userInfo").html(msg);
           }

       }
   });
}

/**
* 创建表格，并设置到div中
* @param {Object} userList
*/
function crateTable(userList) {
   // 创建表格对象
   var table = $("<table class='table table-bordered table-hover table-striped'></table>");
   // 创建表头
   var thaed = $("<thead><tr> <th>用户编号</th><th>用户姓名</th><th>用户密码</th><th>用户年龄</th><th>用户性别</th><th>用户头像</th><th>用户操作</th></tr></thead>");
   // 将表头追加到表格中
   table.append(thaed);

   // 创建表体对象
   var tbody = $("<tbody></tbody>");

   // 循环用户列表，创建对应的tr对象，并设置到table的表体中
   for (var i = 0; i < userList.length; i++) {
       // 得到每个用户对象
       var user = userList[i];
       // 性别
       var sex = "女";
       if (user.userSex) {
           sex = "男";
       }
       // 头像
       var head = "<img src='"+user.userHead+"' width='60px' height='60px' />";

       // 创建tr对象
       var tr = "<tr id='tr_"+user.userId+"'><td>"+user.userId+"</td><td>"+user.userName+"</td>";
       tr += "<td>"+user.userPwd+"</td><td>"+user.userAge+"</td>";
       tr += "<td>"+sex+"</td><td>"+head+"</td>";
       tr += "<td><button class='btn btn-warning btn-xs' οnclick='openUpdateDialog("+user.userId+")' ><span class='glyphicon glyphicon-pencil'></sapn> 修改</button>  ";
       tr += "<button class='btn btn-danger btn-xs'><span class='glyphicon glyphicon-trash'></sapn> 删除</button></td></tr>";
       // 将tr对象追加到tbody中
       tbody.append(tr);
   }

   // 将tbody对象追加到table对象中
   table.append(tbody);

   // 将表格追加到div中
   $("#userInfo").append(table);

}

何以所谓

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Day06 Ajax

一 Ajax1.ajax同步(GET)异步无刷新技术。能够请求后台发送和获取数据，而无需卸载页面（刷新页面）。核心对象： XMLHttpRequest对象 var xhr = new XMLHttpRequest()在使用 XHR 对象时，先必须调用 open()方法，它接受三个参数：要发送的请求...
复制链接

扫一扫