jQuery發送Ajax請求以及出現的問題

普通jQuery的Ajax請求代碼如下：

$.ajax({
  type: 'POST',
  url: "http://xxx/yyy/zzz/sendVerifyCode",
  data:{
    phoneNo:$(".tel").val()
  },
  success: function(data){
    $.toast("發送成功", "text")
  },
  error: function(){
    $.toast("發送失敗", "text")
  }
})

 

一、如果POST接口返回500,請求的參數如下圖，圖中的傳參方式為Form data：

 

 

1.需要加上contentType:'application/json'，傳參方式會變為Request Payload（裝載量）。

2.需要加上JSON.stringify封裝對象，這個問題在傳遞一個多鍵值對的對象會出現，如果是只有一個key-value的鍵值對則可加可不加。

代碼示例如下：

$.ajax({
  type: 'POST',
  url: "http://xxx/yyy/zzz/register",
  data: JSON.stringify({
    username:$(".tel").val(),
    smsVerifyCode:$('.captchaVal').val(),
    realName:$('.username').val(),
    email:$('.email').val(),
    password:$(".pwd").val(),
  }),
  contentType:'application/json',
  success: function(data){
      if(data.code===200){
        $.toast("注冊成功", "text")
        setTimeout(function () {
            location.href = "login.html"
        }, 500);
      }else {
          $.toast(data.message, "text")
      }
  },
  error: function(){
    $.toast("注冊失敗", "text")
  },
  dataType: "json",
})

然后請求變為了對象格式。

 

HTTP兩種傳參方式的區別：

Form Data：當POST請求的請求頭里設置Content-Type: application/x-www-form-urlencoded(默認)，參數在請求體以標准的Form Data的形式提交，以&符號拼接，參數格式為key=value&key=value&key=value。

Request Payload：當使用AJAX原生POST請求,請求頭里設置Content-Type:application/json，請求的參數會顯示在Request Payload中，參數格式為JSON格式：{“key”:”value”,”key”:”value”…}，這種方式可讀性會更好。

 

二、使用Ajax發送請求時返回Canceled，未請求到接口，則需加上async:false即可解決。