Ajax - get / post / ajax / serialize方法

最新推荐文章于 2024-09-21 22:20:54 发布

Henry_ww

最新推荐文章于 2024-09-21 22:20:54 发布

阅读量155

点赞数

分类专栏：前端文章标签： ajax jquery javascript

本文链接：https://blog.csdn.net/Henry_ID/article/details/120067794

版权

前端专栏收录该内容

19 篇文章 4 订阅

订阅专栏

什么是Ajax

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML）的缩写，意思就是用JavaScript执行异步网络请求。

通俗解释：在网页上利用JavaScript操作浏览器的XMLHttpRequest对象来与服务器进行数据交互的方式就是Ajax

浏览器调试工具查看Ajax的请求和响应

在浏览器中按F12调出调试面板后，按照如下图片中的三个步骤就可以查看到ajax请求成功的数据

在这里插入图片描述

URL及其组成

统一资源定位系统（uniform resource locator;URL）是用来标记网络上一个资源唯一存放位置，浏览器通过URL就可以成功访问到该资源

URL组成
- 客户端与服务器的通讯协议
- 存放资源的服务器名称，可以是域名:端口，也可以是IP地址:端口的形式存在
- 资源在服务器的存放路径
- 查询服务器资源的参数

jQuery中的Ajax方法汇总

$.get()方法

作用：该方法是利用Ajax发送Get请求获取服务器上的数据
语法和参数

语法格式
$.get(url, [data], [callback], [type])

参数名称	参数类型	是否必选	参数说明
url	string 字符串	必填	要请求的资源地址，我们通常叫做Api接口例如：http://127.0.0.1:3001/getHeroSkin 此地址通常是由Java，PHP，Python，.Net等后端工程师提供也可以由前端工程师编写NodeJS代码来实现
data	object 对象	选填	请求资源时，根据接口文档来决定是否需要携带参数 1、如果需要携带参数，格式举例:{id:100},{page:1,size:10} 2、如果不需要携带参数，可以不填写，或者填写null
callback	function 函数	选填	请求成功回调函数，我们可以通过此函数参数获得服务器响应数据例如：function(resdata){ resdata即为服务器响应的数据 } 虽然是选填，但真正开发过程中99%都需要填写此函数
type	string 字符串	选填	服务器返回数据格式，我们用得最多的是json格式，少量使用xml 真正开发过程中此参数99%都省略

使用示例

发送不带参数的Get请求，典型特征：$.get() 第二个参数填写null，或者不填写

// 第二个参数填写null更好理解，初学者建议使用这种方式
$.get('http://127.0.0.1:3001/getHeroSkin',null,function(resData){
     console.log(resData);
  });


/*
第二个参数不填写写法，这里注意，function类型的参数会被jQuery当做是第三个参数使用
所以以下代码表示不带参数
*/
$.get('http://127.0.0.1:3001/getHeroSkin',function(resData){
   console.log(resData);
  })

发送带参数的Get请求，典型特征：第二个参数传入了{属性名:属性值} 这样格式的一个对象

 $.get('http://127.0.0.1:3001/getHeroSkin',{heroName:'白起'},function(resData){
     console.log(resData);
    });

$.post()方法

作用：该方法是利用Ajax发送Post请求将数据提交给服务器
语法和参数

语法格式
$.post(url, [data], [callback], [type])

参数名称	参数类型	是否必填	参数说明
url	string 字符串	必填	要请求的资源地址，我们通常叫做Api接口例如：http://127.0.0.1:3001/addHeroSkin 此地址通常是由Java，PHP，Python，.Net等后端工程师提供也可以由前端工程师编写NodeJS代码来实现
data	object 对象	选填	待发送给服务器的数据，格式{key:value,key1,value1} 或者 key=value&key1=value1 都可以如果没有数据提交可以填写null，或者不填写
callback	function 函数	选填	请求成功回调函数我们可以通过此函数参数获得服务器响应数据例如：function(resdata){ resdata即为服务器响应的数据 } 虽然是选填，但真正开发过程中99%都需要填写此函数
type	string 字符串	选填	服务器返回数据格式，我们用得最多的是json格式，少量使用xml 真正开发过程中此参数99%都省略

使用示例

发送Post请求，将程咬金的英雄数据提交给http://127.0.0.1:3001/addHeroSkin

// 将{cname:'程咬金',skin_name:'爱与正义、华尔街大亨'} 数据发送给http://127.0.0.1:3001/addHeroSkin 地址实现添加一个皮肤
$.post('http://127.0.0.1:3001/addHeroSkin',{cname:'程咬金',skin_name:'爱与正义、华尔街大亨'},function(resdata){
      console.log(resdata);
 })

### $.ajax()方法

作用：该方法既能发送Get请求，也能发送Post请求，比$.get()和$.post()更加灵活，功能更加丰富
语法和参数

// 基本语法格式 
$.ajax({
  url:'  ',     //请求URL地址                             
  type:'  ',   //请求方式 Get 或 Post
  data:{  } ,  // 本次请求要携带的参数
  success:function(resData){ }     //请求成功后的回调函数
})

使用示例

发送带参数的Get请求，典型特征：第二个参数传入了{属性名:属性值} 这样格式的一个对象

$.ajax({
    url:'http://127.0.0.1:3001/getHeroSkin', // 请求api接口地址
    type:'GET',  // 表示发送get请求
    data:{heroName:'白起'}, // 表示查询英雄名称为“白起”的数据
    success:function(resData){ // 请求成功的数据存放在resData中
        console.log(resData);
    }
})

发送Post请求，将李白的英雄数据提交给http://127.0.0.1:3001/addHeroSkin

$.ajax({
    url:'http://127.0.0.1:3001/addHeroSkin', // 请求api接口地址
    type:'POST',  // 表示发送post请求
    data:{cname:'李白',skin_name:'青莲剑仙'}, // 表示将此数据提交给url对应的接口地址
    success:function(resData){ // 请求成功的数据存放在resData中
        console.log(resData);
    }
})

代码效果:

01 - 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>为什么要学习ajax</title>
    <script src="./js/jquery-1.12.4.js"></script>
  </head>

  <body>
    用户名： <input type="text" class="username" /> <span class="msg"></span
    ><br />
    密码： <input type="text" /> <br />
    <button>注册</button>

    <script>
      // 验证当前用户名是否已存在，如果存在，则给出提示
      // 接口：Register - 验证用户名是否可用:http://127.0.0.1:3001/validate?userName=tom

      $(function() {
        $('.username').on('blur', function() {
          // 1.获取用户所输入的用户名
          let name = $(this).val()
          console.log(name)
          // location.href = 'http://127.0.0.1:3001/validate?userName='+name
          // 使用ajax发起用户名是否存在的验证请求
          $.get('http://127.0.0.1:3001/validate?username='+name,function(res){
            console.log(res);
            $('.msg').text(res.msg)
          })
        })
      })
    </script>
  </body>
</html>

02 - get方法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>get请求示例</title>
    <script src="./js/jquery-1.12.4.js"></script>
    <style>
      img {
        width: 100px;
      }
    </style>
  </head>

  <body>
    <button>get无参请求</button>
    <input type="text" class="username" />
    <button>get带参请求</button>
    <table border="1" width="500">
      <caption>
        英雄列表
      </caption>
      <thead>
        <td>编号</td>
        <td>姓名</td>
        <td>性别</td>
        <td>头像</td>
      </thead>
      <tbody></tbody>
    </table>
    <br />
    <div class="userInfo"></div>
    <script>
      $(function() {
        // 一：发起get方式的无参请求
        // 02-英雄信息管理 - 1获取所有英雄-Ajax课程 ：http://127.0.0.1:3001/getHeroList
        // 完整地址：http://ip:端口/资源url？参数=值&参数=值
        // 数据：对象，key=value&key=value
        // 回调函数：请求成功的回调，通过回调参数可以获取服务器返回的内容
        // 数据类型：一般是json,因为我们要面向对象编程
        // $.get(完整地址，数据，回调函数，数据类型)

        let html = ''
        $('button:eq(0)').on('click', function() {
          $.get(
            'http://127.0.0.1:3001/getHeroList',
            function(res) {
              console.log(res)
              if (res.msg === '请求成功') {
                // 对返回数据进行处理，我们可以对数据进行动态渲染，生成 表格
                for (let i = 0; i < res.data.length; i++) {
                  html += `<tr>
                            <td>${i + 1}</td>
                            <td>${res.data[i].name}</td>
                            <td>${res.data[i].gender}</td>
                            <td>
                              <img src="${res.data[i].img}" alt="">
                            </td>
                          </tr>`
                }
                // 填充到指定的位置
                $('tbody').html(html)
              }
            },
            'json'
          )
          // 异步非阻塞：异步操作不会阻塞后面代码的执行
          console.log('html---', html)
        })
      
      
      // 2：发起get带参数的请求
      $('button').eq(1).on('click',function(){
        let name = $('.username').val()
        // 02-英雄信息管理 - 1获取所有英雄-Ajax课程 ：http://127.0.0.1:3001/getHeroList
        // get参数的传递有两种形式
        // 1.在url拼接
        // $.get(`http://127.0.0.1:3001/getHeroList?heroName=${name}`,function(res){
        $.get(`http://127.0.0.1:3001/getHeroList?heroName=`+name,function(res){
          // 2.单独进行参数的传递，第二个参数就代表当前请求所传递的数据
        // $.get('http://127.0.0.1:3001/getHeroList',{heroName:name},function(res){
        // $.get('http://127.0.0.1:3001/getHeroList',`heroName=${name}`,function(res){
          console.log(res);
          if (res.msg === '请求成功') {
                let html = ''
                // 对返回数据进行处理，我们可以对数据进行动态渲染，生成 表格
                for (let i = 0; i < res.data.length; i++) {
                  html += `<tr>
                            <td>${i + 1}</td>
                            <td>${res.data[i].name}</td>
                            <td>${res.data[i].gender}</td>
                            <td>
                              <img src="${res.data[i].img}" alt="">
                            </td>
                          </tr>`
                }
                // 填充到指定的位置
                $('tbody').html(html)
              }
        })
      })
      })
    </script>
  </body>
</html>

03 - post方法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>post请求示例</title>
    <script src="./js/jquery-1.12.4.js"></script>
  </head>

  <body>
    英雄名: <input type="text" class="cname" /> <br />
    英雄皮肤名称: <input type="text" class="skin_name" /> <br />
    <button>添加英雄及皮肤</button>
    <script>
      //  01-Ajax初体验 - 2添加英雄皮肤(Ajax课程)  -http://127.0.0.1:3001/addHeroSkin
      $('button').on('click', function() {
        // $.post(完整地址，参数，回调函数，返回数据类型)
        // 获取-收集用户数据
        let cname = $('.cname').val()
        let skin_name = $('.skin_name').val()

        // 发起ajax请求
        // $.post('http://127.0.0.1:3001/addHeroSkin',{cname,skin_name},function(res){
        $.post(
          'http://127.0.0.1:3001/addHeroSkin',
          `cname=${cname}&skin_name=${skin_name}`,
          function(res) {
            console.log(res)
            alert(res.msg)
          }
        )
      })
    </script>
  </body>
</html>

🎈 04 - ajax方法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="./js/jquery-1.12.4.js"></script>
  </head>

  <body>
    <button>get无参请求</button>
    <br />
    英雄名: <input type="text" class="cname" /> <br />
    英雄皮肤名称: <input type="text" class="skin_name" /> <br />
    <button>添加英雄及皮肤</button>
    <script>
      $(function() {
        // 1.发起get方式的请求
        $('button')
          .eq(0)
          .on('click', function() {
            // url:请求地址，必需传入
            // type:请求方式，如get/post,如果不指定则默认为get
            // data:请求所传递的参数，可以是{key:value,key:value},key=value&key=value
            // success:请求成功的回调函数，回调有一个参数就是返回所返回的内容
            // dataType：预期的返回数据的格式，如json

            // 1-Ajax初体验 - 1获取英雄皮肤(Ajax课程)--http://127.0.0.1:3001/getHeroSkin

            $.ajax({
              // url: 'http://127.0.0.1:3001/getHeroSkin',
              url: 'http://127.0.0.1:3001/getHeroSkin?heroName=芈月',
              // type: 'get',
              // data: { heroName: '芈月' },
              success: function(res) {
                console.log(res)
              },
              dataType: 'json'
            })
          })

        // 2.发起post方式的请求
        // 01-Ajax初体验 - 2添加英雄皮肤(Ajax课程) -- http://127.0.0.1:3001/addHeroSkin
        $('button')
          .eq(1)
          .on('click', function() {
            let cname = $('.cname').val()
            let skin_name = $('.skin_name').val()

            $.ajax({
              url: 'http://127.0.0.1:3001/addHeroSkin',
              type: 'post',
              // data: {cname,skin_name},
              data: `cname=${cname}&skin_name=${skin_name}`,
              success: function(res) {
                console.log(res)
              },
              dataType: 'json'
            })
          })
      })
    </script>
  </body>
</html>

🎈 05 - ajax方法 - 其他选项配置

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="./js/jquery-1.12.4.js"></script>
  </head>

  <body>
    <button>get无参请求</button>
    <br />
    英雄名: <input type="text" class="cname" /> <br />
    英雄皮肤名称: <input type="text" class="skin_name" /> <br />
    <button>添加英雄及皮肤</button>
    <button>获取学生列表数据-延迟</button>
    <script>
      // 01-Ajax初体验 - 2添加英雄皮肤(Ajax课程) -- http://127.0.0.1:3001/addHeroSkin
      $('button')
        .eq(1)
        .on('click', function() {
          let cname = $('.cname').val()
          let skin_name = $('.skin_name').val()

          $.ajax({
            // 请求地址
            url: 'http://127.0.0.1:3001/addHeroSkin',
            // 请求方式
            type: 'post',
            // 请求参数
            // data: {cname,skin_name},
            data: `cname=${cname}&skin_name=${skin_name}`,
            // 请求发送之前的回调
            beforeSend: function() {
              // 如果返回false,则会中止本次请求,如果仅仅是return,请求照常发出
              if (cname.trim().length === 0) {
                alert('请输入英雄名称')
                return false
              }
              if (skin_name.trim().length === 0) {
                alert('请输入英雄皮肤')
                return false
              }
            },
            // 请求成功之后的回调
            success: function(res) {
              console.log(res)
              alert(res.msg)
            },
            // 请求失败的回调
            error: function(err) {
              console.log(err)
              if (err.statusText === 'Not Found') {
                alert('服务器异常，请重试')
              } else {
                alert('请重试')
              }
            },
            // 预期的数据格式
            dataType: 'json'
          })
        })

      $('button:eq(2)').on('click', function() {
        $.ajax({
          url: 'http://127.0.0.1:3001/getStudentsJSONDelay',
          // timeout:设置超时时间，如果响应超出了这个时间，就认为请求失败
          timeout: 1000, 
          // 失败的回调
          error: function(err) {
            console.log(err)
            if (err.statusText === 'timeout') {
              alert('响应超时，请重试')
            }
          },
          // 成功的回调
          success: function(res) {
            console.log(res)
          },
          // 请求完成时的回调：不管是成功还是失败都会触发
          complete: function() {
            console.log('不管是成功还是失败都会触发')
          }
        })
      })
    </script>
  </body>
</html>

🎈 06 - ajax- serialize方法

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>serialize方法</title>
    </head>

    <body>
        <!-- 
  1.参数一定是键值对的组合
  2.name属性值会作为参数的键
  3.所以一定要设置name属性 -->
        <form id="myform">
            <h1>添加英雄皮肤数据 - post请求带参数</h1>
            <ul>
                <li>
                    <p>
                        <span>名称：</span>
                        <!-- 重点说明：name属性值就是将来参数的键,如果没有name属性，那么无法获取到参数，它的值必须与接口文档的说明完全一致 -->
                        <input class="name" name="cname" type="text" placeholder="请输入英雄名称" />
                    </p>
                </li>
                <li>
                    <p>
                        <span>皮肤：</span>
                        <input class="skin" name="skin_name" type="text" placeholder="请输入皮肤名称" />
                    </p>
                </li>
            </ul>
            <input type="button" class="submit" value="提交" />
        </form>
        <script src="./js/jquery-1.12.4.js"></script>
        <script>
            // 01-Ajax初体验 - 2添加英雄皮肤(Ajax课程) -- http://127.0.0.1:3001/addHeroSkin
            $(".submit").on("click", function () {
                // let cname = $('.cname').val()
                // let skin_name = $('.skin_name').val()

                // serialize方法：可以获取指定表单中，拥有name属性的表单元素的value值,格式为 key=value&key=value
                // 它是jq的方法，语法 $(form).serialize()
                console.log($("#myform").serialize());

                $.ajax({
                    url: "http://127.0.0.1:3001/addHeroSkin",
                    type: "post",
                    // data: {cname,skin_name},
                    // data: `cname=${cname}&skin_name=${skin_name}`,
                    data: $("#myform").serialize(),
                    success: function (res) {
                        console.log(res);
                    },
                    dataType: "json",
                });
            });
        </script>
    </body>
</html>