首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ajax传参形式

ajax传参形式

作者头像
suveng
发布2019-09-18 14:40:52
4.2K0
发布2019-09-18 14:40:52
举报

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://blog.csdn.net/qq_37933685/article/details/85628335

title: ajax传参形式 date: 2018-12-31 12:00:00 +0800 update: 2018-12-31 23:00:00 +0800 author: me cover: http://ww1.sinaimg.cn/large/006jIRTegy1fyqcsjhs54j31p40ye7hh.jpg preview: $.ajax()是jQuery发送异步请求的方式,简化了原生js的操作过程。介绍几种参数形式 tags:

  • 前端

文章目录

  • ajax传参形式
    • 介绍
    • 选项详解
    • 传参几种形式
      • URL拼接传参
      • JSON传参
      • 表单序列化传参
      • 拼接data
      • 表单序列化为JSON数据传参
      • 表单序列化为JSON数据+额外参数
    • 参考文章

ajax传参形式

介绍

$.ajax()是jQuery发送异步请求的方式,简化了原生js的操作过程。

选项详解

jQuery ( jQuery v1.11.2)

$.ajax({    
    url: "http://www.hzhuti.com",    //请求的url地址   
    dataType: "json",   //返回格式为json    
    async: true, //请求是否异步,默认为异步,这也是ajax重要特性    
    data: { "id": "value" },    //参数值    
    type: "GET",   //请求方式    
    beforeSend: function(request) {        
      //请求前的处理
      request.setRequestHeader("Content-type","application/json");
      request.setRequestHeader("Source","101");
      request.setRequestHeader("Token","aaw--wssw-ss...");
    },   
    success: function(data) {        
    //请求成功时处理    
    },   
    complete: function() {        
      //请求完成的处理    
    },    
    error: function() {        
      //请求出错处理    
    }
});
格式说明:
  1.参数名;
  2.参数类型;
  3.参数说明,默认值,可选值;

url
String
(默认: 当前页地址) 发送请求的地址。

type
String
(默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET"。
注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。

timeout
Number
设置请求超时时间(毫秒)。此设置将覆盖全局设置。

async
Boolean
(默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。

beforeSend
Function
发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。
function (XMLHttpRequest) { 
  this; 
}

cache
Boolean
(默认: true) jQuery 1.2 新功能,设置为 false 将不会从浏览器缓存中加载请求信息。

complete
Function
请求完成后回调函数 (请求成功或失败时均调用)。参数: XMLHttpRequest 对象,成功信息字符串。
function (XMLHttpRequest, textStatus) { 
}

contentType
String
(默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。

data
Object,String
发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。
查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。
如果为数组,jQuery 将自动为不同值对应同一个名称。
如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。

dataType
String
预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText,并作为回调函数参数传递,可用值:
"xml": 返回 XML 文档,可用 jQuery 处理。
"html": 返回纯文本 HTML 信息;包含 script 元素。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。
"json": 返回 JSON 数据 。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时,
如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
 
error
Function
(默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。
这个方法有三个参数:XMLHttpRequest 对象,错误信息,(可能)捕获的错误对象。
function (XMLHttpRequest, textStatus, errorThrown) {
   // 通常情况下textStatus和errorThown只有其中一个有值  this; 
}

global
Boolean
(默认: true) 是否触发全局 AJAX 事件。
设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 。
可用于控制不同的Ajax事件

ifModified
Boolean
(默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。

processData
Boolean
(默认: true) 默认情况下,发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。
如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。

success
Function
请求成功后回调函数。这个方法有两个参数:服务器返回数据,返回状态function (data, textStatus) { 
  // data could be xmlDoc, jsonObj, html, text, etc... 
}

传参几种形式

URL拼接传参

let name ="suveng";
let user="ss"
$.ajax({    
    url: "/login/authenticate?name="+name+"&user="+user,    //请求的url地址   
    dataType: "json",   //返回格式为json    
    async: true, //请求是否异步,默认为异步,这也是ajax重要特性    
    data: {},    //参数值    
    type: "GET",   //请求方式    
    beforeSend: function(request) {        
      //请求前的处理...
    },   
    success: function(data) {        
    //请求成功时处理...
    },   
    complete: function() {        
      //请求完成的处理...   
    },    
    error: function() {        
      //请求出错处理...
    }
});

JSON传参

let name ="suveng";
let user="ss";
var data = {"name":name,"user":user}

$.ajax({    
    url: "/login/authenticate",   //请求的url地址   
    dataType: "json",   //返回格式为json    
    async: true, //请求是否异步,默认为异步,这也是ajax重要特性    
    data: data,    //参数值    
    type: "GET",   //请求方式    
    beforeSend: function(request) {        
      //请求前的处理...
    },   
    success: function(data) {        
    //请求成功时处理...
    },   
    complete: function() {        
      //请求完成的处理...   
    },    
    error: function() {        
      //请求出错处理...
    }
});

表单序列化传参

var params=$('#login').serialize(); //把id为login的form表单里的参数自动封装为参数传递

$.ajax({    
    url: "/login/authenticate",    //请求的url地址   
    dataType: "json",   //返回格式为json    
    async: true, //请求是否异步,默认为异步,这也是ajax重要特性    
    data: params,   //参数值    
    type: "GET",   //请求方式    
    beforeSend: function(request) {        
      //请求前的处理...
    },   
    success: function(data) {        
    //请求成功时处理...
    },   
    complete: function() {        
      //请求完成的处理...   
    },    
    error: function() {        
      //请求出错处理...
    }
});

拼接data

let name ="suveng";
let user="ss"

$.ajax({    
    url: "/login/authenticate",    //请求的url地址   
    dataType: "json",   //返回格式为json    
    async: true, //请求是否异步,默认为异步,这也是ajax重要特性    
    data: 'name='+name+'&user='+user,    //参数值    
    type: "GET",   //请求方式    
    beforeSend: function(request) {        
      //请求前的处理...
    },   
    success: function(data) {        
    //请求成功时处理...
    },   
    complete: function() {        
      //请求完成的处理...   
    },    
    error: function() {        
      //请求出错处理...
    }
});

以下传参 需要引入:<script type="text/javascript" src="serializeJSON.js"></script>

表单序列化为JSON数据传参

var params=$('#login').serializeJSON();

$.ajax({    
    url: "/login/authenticate",    //请求的url地址   
    dataType: "json",   //返回格式为json    
    async: true, //请求是否异步,默认为异步,这也是ajax重要特性    
    data: params,    //参数值    
    type: "GET",   //请求方式    
    beforeSend: function(request) {        
      //请求前的处理...
    },   
    success: function(data) {        
    //请求成功时处理...
    },   
    complete: function() {        
      //请求完成的处理...   
    },    
    error: function() {        
      //请求出错处理...
    }
});

表单序列化为JSON数据+额外参数

var params=$('#login').serializeJSON();

params.zidingyi="自定义属性"

$.ajax({    
    url: "/login/authenticate",    //请求的url地址   
    dataType: "json",   //返回格式为json    
    async: true, //请求是否异步,默认为异步,这也是ajax重要特性    
    data: params,    //参数值    
    type: "GET",   //请求方式    
    beforeSend: function(request) {        
      //请求前的处理...
    },   
    success: function(data) {        
    //请求成功时处理...
    },   
    complete: function() {        
      //请求完成的处理...   
    },    
    error: function() {        
      //请求出错处理...
    }
});

参考文章

Ajax请求($.ajax()为例)中data属性传参数的形式

jQuery ajax——参数详解

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019年01月02日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 文章目录
  • ajax传参形式
    • 介绍
      • 选项详解
        • 传参几种形式
          • URL拼接传参
          • JSON传参
          • 表单序列化传参
          • 拼接data
          • 表单序列化为JSON数据传参
          • 表单序列化为JSON数据+额外参数
        • 参考文章
        相关产品与服务
        文件存储
        文件存储(Cloud File Storage,CFS)为您提供安全可靠、可扩展的共享文件存储服务。文件存储可与腾讯云服务器、容器服务、批量计算等服务搭配使用,为多个计算节点提供容量和性能可弹性扩展的高性能共享存储。腾讯云文件存储的管理界面简单、易使用,可实现对现有应用的无缝集成;按实际用量付费,为您节约成本,简化 IT 运维工作。
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档