ajax的使用方法

最新推荐文章于 2024-07-08 09:14:54 发布

科技达人ლ(′◉❥◉｀ლ)

最新推荐文章于 2024-07-08 09:14:54 发布

阅读量142

点赞数

分类专栏： js 文章标签： ajax post web js

本文链接：https://blog.csdn.net/m0_56175362/article/details/117819799

版权

js 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

文章目录

步骤

ajax：Web数据交互方式

用于：局部刷新页面。
使用场景：
1.搜索框实时显示结果
2.动态加载页面
3.列表页面的分页
4.表单的服务器端校验

ajax优点：

不需要任何插件的支持，利用js就可以使用。
提高用户的体验。
提高web程序的性能。
减轻服务器端的宽带压力。

使用步骤：

1.常见xmlhttprequest对象
2.调用对象的open方法
3.调用对象的send方法
4.监听状态改变 onreadystatechange
4.1判断对象的readStatus是否等于4
4.2 判断响应的状态码是否等于200
4.3 对响应的结果进行处理

get请求和post请求的区别：

1.get请求的参数是拼接在地址栏中。 post请求的参数是拼接在send函数中。、
2.post请求需要设置请求头。
xhr.setRequestHeader(“content-Type”,“application/x-www-form-urlencoded”);

get的方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="text" id="bookId">
  <button>查询</button>
  <div id="result">
    <ul>
      <li>书名：<span id="bookname"></span></li>
      <li>作者：<span id="author"></span></li>
      <li>封面：<img src="" alt="" id="imgSrc"></li>
      
    </ul>
  </div>
  <script>
    let btn = document.querySelector("button");
    let rst = document.querySelector("#result");
    let bookId = document.querySelector("#bookId")

    let bookName = document.querySelector("#bookname");
    let author = document.querySelector("#author");
    let imgSrc = document.querySelector("#imgSrc");
    btn.onclick = sendMsg;
    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;
          }
        }
      }

    }
  </script>
</body>
</html>

post方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="text" id="bookId">
  <button>查询</button>
  <div id="result">
    <ul>
      <li>书名：<span id="bookname"></span></li>
      <li>作者：<span id="author"></span></li>
      <li>封面：<img src="" alt="" id="imgSrc"></li>
      
    </ul>
  </div>
  <script>
    let btn = document.querySelector("button");
    let rst = document.querySelector("#result");
    let bookId = document.querySelector("#bookId")

    let bookName = document.querySelector("#bookname");
    let author = document.querySelector("#author");
    let imgSrc = document.querySelector("#imgSrc");
    btn.onclick = sendMsg;
    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;
          }
        }
      }

    }
  </script>
</body>
</html>

jQuery是写的Ajax方法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="text" id="bookId">
  <button id="btn">查询</button>
  <div id="result">
    <ul>
      <li>书名：<span id="bookname"></span></li>
      <li>作者：<span id="author"></span></li>
      <li>封面：<img src="" alt="" id="imgSrc"></li>

    </ul>
  </div>
  <script src="js/jquery-3.6.0.js"></script>
  <script>
    $("#btn").on("click", function () {
      $.ajax({
        //请求方法：post，get等等
        type: "post",
        //请求路径
        url: "http://localhost:3000/book/select",
        //请求的参数：如果是get请求，会自动拼接。如果是post请求，会自动设置到body中。
        data:{
          id:$("#bookId").val()
        },
        //期望服务器放回的数据类型,会自动按照这个类型解析返回结果。
        dataType: "json",
        //请求成功后执行的回调函数
        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);
        }
      });
    })

  </script>
</body>

</html>

科技达人ლ(′◉❥◉｀ლ)

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
ajax的使用方法

文章目录步骤ajax：Web数据交互方式ajax优点：使用步骤：get请求和post请求的区别：get的方法post方法步骤ajax：Web数据交互方式用于：局部刷新页面。使用场景：1.搜索框实时显示结果2.动态加载页面3.列表页面的分页4.表单的服务器端校验ajax优点：不需要任何插件的支持，利用js就可以使用。提高用户的体验。提高web程序的性能。减轻服务器端的宽带压力。使用步骤：1.常见xmlhttprequest对象2.调用对象的open方法3.
复制链接

扫一扫