ajax请求

V5521

于 2021-08-07 14:46:58 发布

阅读量76

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/m0_57076093/article/details/119451874

版权

笔记专栏收录该内容

38 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何使用原生JavaScript的XMLHttpRequest对象进行GET和POST请求，以及如何通过jQuery的$.ajax方法实现相同的功能。文中详细展示了请求的步骤，包括创建对象、设置请求方式、发送数据以及处理响应。这些示例对于理解和实践前端与服务器的交互非常有帮助。

摘要由CSDN通过智能技术生成

get
    function sendMsg(){
      // 1.创建一个XMLhttprequest对象。
      let xhr = new XMLHttpRequest();
      // 2.调用对象的open方法：请求发送的地址和方式。
      xhr.open("get","http://localhost:3000/book/select?id="+bookId.value);
      //3.发送请求
      xhr.send();
      //4.监听状态的改变
      xhr.onreadystatechange = function(){
        //4.1 判断状态值 0-4 五种状态 4就是 请求完成状态
        if(xhr.readyState === 4){
          // 判断响应回来的状态码
          if (xhr.status === 200) {
            //获取响应的结果
            let result = JSON.parse(xhr.responseText)[0];
            bookName.innerHTML = result.bookName;
            author.innerHTML = result.author;
            imgSrc.src = result.imgSrc;
          }
        }
      }
 
    }

...



post

 function sendMsg(){
      // 1.创建一个XMLhttprequest对象。
      let xhr = new XMLHttpRequest();
      // 2.调用对象的open方法：请求发送的地址和方式。
      xhr.open("post","http://localhost:3000/book/select");
      //设置请求头中的content-type
      xhr.setRequestHeader("content-Type","application/x-www-form-urlencoded");
      //3.发送请求
      xhr.send('id='+bookId.value);
      //4.监听状态的改变
      xhr.onreadystatechange = function(){
        //4.1 判断状态值 0-4 五种状态 4就是 请求完成状态
        if(xhr.readyState === 4){
          // 判断响应回来的状态码
          if (xhr.status === 200) {
            //获取响应的结果
            let result = JSON.parse(xhr.responseText)[0];
            bookName.innerHTML = result.bookName;
            author.innerHTML = result.author;
            imgSrc.src = result.imgSrc;
          }
        }
      }
 
    }





jq



 
      $.ajax({
        //请求方法：post，get等等
        type: "post",
        //请求路径
        url: "http://localhost:3000/book/select",
        //请求的参数：如果是get请求，会自动拼接。如果是post请求，会自动设置到body中。
        data:{
          id:$("#bookId").val()
        },
        //期望服务器放回的数据类型,会自动按照这个类型解析返回结果。
        dataType: "json",
        //请求成功后执行的回调函数  data是请求成功后返回的结果
        success: function (data) {
          $("#bookname").html(data[0].bookName);
          $("#author").html(data[0].author);
          $("#imgSrc").attr("src",data[0].imgSrc);
        },
        //请求失败后执行的回调函数
        error: function (err) {
          console.log(err);
        }
      });
    })