jQuery中常用的Ajax方法（$.get(),$.post(),$.ajax()的使用方式）--2019年5月22日

1.  $.get()的小案例

本例使用$.get()方式向服务器请求数据，并将返回数据添加到<select>标签中，完成<option>的填充。

代码如下：

<script src="../static/js/jquery-3.4.1.js"></script>
<script>
    $.get('inc/school.php', 
    function(returnData,returnStatus){
        if (returnStatus === 'success') {
            $(returnData).appendTo('#organization'); // 将返回数据添加到<select>标签内。也可以使用$('#school').html(data);    
        }
    });
    $('#organization').on('change', getData);
    function getData() {   
        $.get(
            'inc/detail.php',
            // 请求参数,以对象字面量形式
            {key: $(this).val()},   // $(this): 触发事件的对象，此处为<select>。也可以写成$("#organization")。或者$(event.target),event是jQuery的对象，代表触发的事件。
            // 请求成功的回调方法
            function (returnData,returnStatus){          
                if (returnStatus === 'success') {
                    $('#detail').html(returnData);   // 更新页面中的DOM元素的内容,显示请求的数据
                    $('[value=""]').remove();  // 删除提示信息: "请选择"
                } else {    
                    $('#detail').html('<span style="color:red">请求错误</span>');  //出错,未拿到响应数据
                }
            },    
            'html'  // 响应数据的格式,html/json/xml，可省略，会自动判断
        );
    }
</script>

 2.  $.post()  小案例

本例使用$.post()方法向服务器提交表单数据进行验证，并接收服务器返回的验证结果数据。

<script src="../static/js/jquery-3.4.1.js"></script>
  <script>
   var logName = $("#logName");
   var logPwd = $("#logPwd");
   var btnSubmit = $("#btnSubmit");
   btnSubmit.on("click", isEmpty);
   function isEmpty() {
    if (logName.val().trim().length === 0) {
     logName.after('<span style="color:red">邮箱不能为空</span>').next().fadeOut(2000);
     logName.focus();
     return false;
    } else if (logPwd.val().trim().length === 0) {
     logPwd.after('<span style="color:red">密码不能为空</span>').next().fadeOut(2000);
     logPwd.focus();
     return false;
    } else if (logPwd.val().length < 6) {
     logPwd.after('<span style="color:red">密码不能少于6位</span>').next().fadeOut(2000);
     logPwd.focus();
     return false;
    } else {
     checkUser()
    }
   }

   function checkUser() {
    $.post(
     'inc/check.php', // 处理post请求的php脚本
     
     // 要发送到服务器上的数据，可写成查询字符串形式的数据'email='+$('#email').val()+'&password='+$('#password').val(),
     // 此处写成对象字面量形式,最终也会转为查询字符串形式
     {
      email: logName.val(),  
      password: logPwd.val()
     },
     // 请求成功后的回调
     function(returnData) {
     
      // 实际开发过程中,大多只用到returnData,status和xhr极少使用,另外,data和status也可用xhr对象获取      
      if (returnData.status === 1) {      
       btnSubmit     // 选择当前按钮
       .after('<span style="color: green"></span>')    // 在按钮后添加一个<span>用来显示提示信息
       .next()     // 切换到button的下一个兄弟元素,这时就是刚刚添加的<span>
       .html(returnData.message) // 设置<span>中的文本内容
       .fadeOut(2000);     // 将<span>的内容2秒后淡出
      } else {
       btnSubmit
       .after('<span style="color: red"></span>')
       .next()
       .html(returnData.message)
       .fadeOut(2000);
      }
     },
     'json'  // 返回的数据类型
    );
   }
  </script>

3. $.ajax() 小案例

本例使用$.ajax()方法向服务器提交表单数据进行验证，并接收服务器返回的验证结果数据。

<script src="../static/js/jquery-3.4.1.js"></script>
  <script>
   var logName = $('#logName');
   var logPwd = $('#logPwd');
   var btnSubmit = $('#btnSubmit');
   btnSubmit.on('click', isEmpty);
   function isEmpty() {
    if (logName.val().trim().length === 0) {
     logName.after('<span style="color:red">邮箱不能为空</span>').next().fadeOut(2000);
     logName.focus();
     return false;
    } else if (logPwd.val().length === 0) {
     logPwd.after('<span style="color:red">密码不能为空</span>').next().fadeOut(2000);
     logPwd.focus();
     return false;
    } else if (logPwd.val().length < 6) {
     logPwd.after('<span style="color:red">密码不能少于6位</span>').next().fadeOut(2000);
     logPwd.focus();
     return false;
    } else {
     checkUser()
    }
   }
   function checkUser() {
    // $.ajax 参数的属性大约有20多个, 常用的是以下5个, 必须掌握
    $.ajax({
     // 1. 请求类型
     type: 'POST',
     // 2. 请求的URL地址
     url: 'inc/check.php',
     // 3. 需要发送到服务器上的数据,以对象方式
     data: {
      email: logName.val(),
      password: logPwd.val()
     },
     // 4. 请求成功后的回调处理
     success: function(returnData) {        
        if (returnData.status === 1) {
         btnSubmit     // 选择当前按钮
         .after('<span style="color: green"></span>')    // 在按钮后添加一个<span>用来显示提示信息
         .next()     // 切换到button的下一个兄弟元素,这时就是刚刚添加的<span>
         .html(returnData.message) // 设置<span>中的文本内容
         .fadeOut(2000);     // 将<span>的内容2秒后淡出
        } else {
         btnSubmit
         .after('<span style="color: red"></span>')
         .next()
         .html(returnData.message)
         .fadeOut(2000);
        }
       },     
     dataType: 'json'  // 5. 期望服务器返回的数据类型, 可选
    })
   }
</script>

Get方式:

用get方式可传送简单数据，在某些情况下，get方法存在安全性问题。

Post方式:

当使用POST方式时，传递的数据量要比使用GET方式传送的数据量大的多。

何时使用Get请求,何时使用Post请求：

Get请求的目的是给予服务器一些参数，以便从服务器获取数据

Post请求的目的是向服务器发送一些参数，例如form中的内容，配合服务器完成工作

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

$.ajax()方法

$.get, $,post都是基于$.ajax，只是简化了ajax的调用

$.ajax({type: "GET"}) == $.get()

$.ajax({type: "POST"}) == $.post()

二者只能传入4个基本的参数，如果需要在出错时执行函数，或者设置同步，或者其它的复杂业务就只能调用$.ajax。