ajax 数据请求(一)同域
参考:http://www.css88.com/jqapi-1.9/jQuery.ajax/
http://www.cnblogs.com/haitao-fan/p/3908973.html
1、常用格式化
$.ajax({
url:url,
type:'POST',
method :'POST',//jq 1.9 添加属性 ,type 的别名,1.9之前用 type
async:true,//是否异步处理,同步会锁定浏览器
crossDomain:false,//是否跨域
dataType:"json",//数据类型
data:data,//发送的请求数据
beforeSend:function(){
//发送前执行的操作,一般用于验证,返回false 时终止请求
},
success:function(data,status,xhr){
//请求成功的事件
},
error:function(xhr){
//请求失败的事件
alert("错误提示: " + xhr.status + " " + xhr.statusText);
},
complete:function(jqXHR,textStatus){
//不论成功与否都执行的回调方法
}
});
2、参数
dataType 数据类型
default: Intelligent Guess (xml, json, script, or html)
data 的参数类型以下几种
- 文本类型
- JSON字符串
- JSON对象
- JSON数组
- FormData对象
- 其他类型,比如html, 比如XML,只要设置要contentType即可,类似JSON类型
文本类型:
如:data = "uname=myname&mobileIpt=110" ;
JSON 字符串:(注意与json 对象区分)
如:data = "{uname:'myname',mobileIpt:'110','}";
JSON 对象:
如:data = {"uname":"myname","mobilelpt":"110"};
JSON 数组:
如:data = [
{"name":"uname","value":"myname"},
{"name":"mobileIpt","value":"110"},
];
var arr = $('#form').serializeArray() 序列化数组返回的是JSON 数组,可利用$.param(arr) 来解析json 数组,解析后为文本格式 "uname=myname&mobileIpt=110".
附:可通过 $('#form').serialize() 序列化方法 直接提取表单数据,生成文本格式 "uname=myname&mobileIpt=110"
在通过反序列化方法unserialize(文本格式) 的到一个json对象,这样就可以取出表单中的某些数据
FormatData对象:
FormatData对象可以更灵活方便的发送表单数据,因为可以独立于表单使用。
可通过Ajax上传文件。通过这种方式,可以非常方便的进行表单提交,直接表单转换成FormData对象即可。
//通过document.querySelector(".form")获取匹配的第一个表单
//想要获取所有匹配的元素用document.querySelectorAll(".form")
var fd = new FormData($("#form"));
//额外添加参数
fd.append("CustomField", "This is some extra data");
$.ajax({
url: url,
type: "POST",
data: fd,
processData: false, // 不处理数据
contentType: false // 不设置内容类型
});
提示:若重服务器中获取到的是json 数组的话,需要用$.parseJSON()转为json对象来处理
ajax 数据请求(一)同域的更多相关文章
- 微信小程序的ajax数据请求wx.request
微信小程序的ajax数据请求,很多同学找不到api在哪个位置,这里单独把小程序的ajax请求给列出来,微信小程序的请求就是wx.request这个api,wx.request(一些对象参数),微信小程 ...
- Ajax --- 数据请求
下面主要介绍(JS原生)数据请求的主要步骤: Ajax 数据请求步骤: 1.创建XMLHttpRequest对象 2.准备数据发送 3.执行发送 4.指定回掉函数 第一步:创建XMLHttpReque ...
- VueJS搭建简单后台管理系统框架 (二) 模拟Ajax数据请求
开发过程中,免不了需要前台与后台的交互,大部分的交互都是通过Ajax请求来完成,在服务端未完成开发时,前端需要有一个可以模拟Ajax请求的服务器. 在NodeJs环境下,通过配置express可访问的 ...
- ajax数据请求5(php格式)
ajax数据请求5(php格式): <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- ajax数据请求4(xml格式)
ajax数据请求4(xml格式): <!doctype html> <html> <head> <meta charset="utf-8" ...
- ajax数据请求3(数组json格式)
ajax数据请求3(数组json格式) <!doctype html> <html> <head> <meta charset="utf-8&quo ...
- ajax数据请求2(json格式)
ajax数据请求2(json格式) <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- AJAX数据请求
ajax数据请求需要四个步骤:(请求文本内容) 1.创建XMLHttpRequest对象: 2.打开与服务起的链接: 3.发送给服务器: 4.响应就绪. <!DOCTYPE html> & ...
- 前端笔记之服务器&Ajax(下)数据请求&解决跨域&三级联动&session&堆栈
一.请求后端的JSON数据 JSON是前后端通信的交互格式,JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式. JSON是互联网各个后台与 ...
- ajax数据请求的理解
一,请求 发送请求有两种方式:get 跟 post . 1.get仅请求数据,不需要服务端做处理,最后会返回指定的资源. 2.post可以提交数据,服务端根据提交的数据做处理,再返回数据. 二,创建X ...
随机推荐
- 3-[Mysql]-库操作
1.系统数据库 information_schema: 虚拟库,不占用磁盘空间,存储的是数据库启动后的一些参数,如用户表信息.列信息.权限信息.字符信息等 performance_schema: My ...
- 3503: [Cqoi2014]和谐矩阵
3503: [Cqoi2014]和谐矩阵 链接 分析: 对于每个点,可以列出一个方程a[i][j]=a[i][j-1]^a[i][j+1]^a[i-1][j]^a[i+1][j],于是可以列出n*m个 ...
- 爬虫-设置代理ip
1.为什么要设置代理ip 在学习Python爬虫的时候,经常会遇见所要爬取的网站采取了反爬取技术导致爬取失败.高强度.高效率地爬取网页信息常常会给网站服务器带来巨大压力,所以同一个IP反复爬取同一个网 ...
- matlab GUI工作原理
例如,用GUIDE创建名为ceshi的GUI程序,其m文件的主函数有如下形式.那么,打开该GUI时,它到底是怎么运行的呢?以下略作小结,欢迎大家补充 function varargout = cesh ...
- 第一章:什么是Linux
Linux可以分为四部分: Linux 内核:系统内存管理,软件程序管理,硬件设备管理和文件系统管理 GNU 工具:除了内核控制硬件系统,操作系统还需要一些工具执行标准功能,比如控制文件和程序.包括核 ...
- 一步步实现一个基本的缓存模块·续, 添加Memcached调用实现
jusfr 原创,转载请注明来自博客园. 在之前的实现中,我们初步实现了一个缓存模块:包含一个基于Http请求的缓存实现,一个基于HttpRuntime.Cache进程级的缓存实现,但观察代码,会发现 ...
- JUC——线程同步锁(LockSupport阻塞原语)
java.util.concurrent.locks.LockSupport这个是一个独立的类,这个类的主要功能是用来解决Thread里面提供的suspend()(挂起线程).resume()(恢复运 ...
- Python3中isdigit(), isdecimal(), isnumeric()的区别和字符串的常用方法
# 全部小写 string.lower() # 全部大写 string.upper() # 是否全部小写 string.islower() # 是否全部大写 string.isupper() # 首字 ...
- gcc 与 g++的区分较
一:gcc与g++比较 误区一:gcc只能编译c代码,g++只能编译c++代码两者都可以,但是请注意:1.后缀为.c的,gcc把它当作是C程序,而g++当作是c++程序:后缀为.cpp的,两者都会认为 ...
- GlusterFS分布式存储集群-1. 部署
参考文档: Quick Start Guide:http://gluster.readthedocs.io/en/latest/Quick-Start-Guide/Quickstart/ Instal ...