初学Ajax(三)
$.ajax()
$.ajax()是所有ajax方法中最底层的方法，所有其他方法都是基于$.ajax()方法的封装。这个方法只有一个参数，传递一个各个功能键值对的对象。
$.ajax()方法对象参数表
| 参数 | 类型 | 说明 |
| url | String | 发送请求的地址 |
| type | String | 请求方式：POST或GET，默认GET |
| timeout | Number | 设置请求超时的时间(毫秒) |
| data | Object或String | 发送到服务器的数据，键值对字符串或对象 |
| dataType | String | 返回的数据类型，比如html、xml、json等 |
| beforeSend | Function | 发送请求前可修改XMLHttpRequest对象的函数 |
| complete | Function | 请求完成后调用的回调函数 |
| success | Function | 请求成功后调用的回调函数 |
| error | Function | 请求失败时调用的回调函数 |
| global | Boolean | 默认为true，表示是否触发全局Ajax |
| cache | Boolean | 设置浏览器缓存响应，默认true。如果dataType类型为script或jsonp则为false |
| content | DOM | 指定某个元素为与这个请求相关的所有回调函数的上下文 |
| contentType | String | 指定请求内容的类型，默认为application/x-www-form-urlencoded |
| async | Boolean | 是否异步处理。默认为true，false为同步处理 |
| processData | Boolean | 默认为true，数据被处理为URL编码格式。如果为false，则阻止将传入的数据处理为URL编码的格式 |
| dataFilter | Function | 用来筛选响应数据的回调函数 |
| ifModified | Boolean | 默认为false，不进行头检测。如果为true，进行头检测，当相应内容与上次请求改变时，请求被认为是成功的 |
| jsonp | String | 指定一个查询参数名称来覆盖默认的jsonp回调参数名callback |
| username | String | 在HTTP认证请求中使用的用户名 |
| password | String | 在HTTP认证请求中使用的密码 |
| scriptCharset | String | 当远程和本地内容使用不同的字符集时，用来设置script和jsonp请求所使用的字符集 |
| xhr | Function | 用来提供XHR实例自定义实现的回调函数 |
| traditional | Boolean | 默认为false，不使用传统风格的参数序列化。如果为true，则使用。 |
html(部分)代码如下：
<input type="button" value="异步加载数据" />
post方式接受的test.php：
<?php
if($_POST['url'] == 'ycku') {
echo "瓢城Web俱乐部";
} else {
echo "木有！";
}
?>
jQuery代码如下：
$("input").click(function() {
$.ajax({
type:"post", //这里可以换成GET
url:"test.php",
data:{
url:"ycku"
},
success:function(response, status, xhr) {
$("#box").html(response);
}
});
});
注意：对于data属性，如果是GET模式，可以使用三种之前说所的三种形式。如果是POST模式可以使用之前的两种形式。
表单序列化
Ajax用的最多的地方莫过于表单操作，而传统的表单操作是通过submit提交将数据传输到服务器端。如果使用Ajax异步处理的话，我们需要将每个表单元素逐个获取方才能提
交，这样工作效率就大大降低。
有html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax</title>
<script type="text/javascript" src="jquery-1.12.3.js"></script>
<script type="text/javascript" src="demo.js"></script>
</head>
<body>
<form>
用户名：<input type="text" name="user" />
邮 件：<input type="text" name="email" />
<input type="button" value="提交" />
</form> <div id="box"> </div>
</body>
</html>
post方式接受的user.php：
<?php
echo $_POST['user'].' - '.$_POST['email'];
?>
常规形式的表单提交：
$("form input[type=button]").click(function() {
$.ajax({
type:"post",
url:"user.php",
data:{
user:$("form input[name=user]").val(),
email:$("form input[name=email]").val()
},
success:function(response, status, xhr) {
$("#box").html(response);
}
});
});
以上方法的缺点：表单元素特别多的情况下，写起来非常麻烦，容易出错，复制提交的JS内容时，data属性需要修改的非常多。而使用表单序列化方法.serialize()，会智能的获取指定表单内的所有元素。这样，在面对大量表单元素时，会把表单元素内容序列化为字符串，然后再使用Ajax请求。
使用.serialize()序列化表单内容：
$("form input[type=button]").click(function() {
$.ajax({
type:"post",
url:"user.php",
data:$("form").serialize(), //一句话搞定
success:function(response, status, xhr) {
$("#box").html(response);
}
});
});
alert($("form").serialize()); //字符串形式的键值对，并且还对url进行了编码
.serialize()方法不但可以序列化表单内的元素，还可以直接获取单选框、复选框和下拉列表框等内容。
如html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax</title>
<script type="text/javascript" src="jquery-1.12.3.js"></script>
<script type="text/javascript" src="demo.js"></script>
</head>
<body> <form>
用户名：<input type="text" name="user" />
邮 件：<input type="text" name="email" />
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女
<input type="button" value="提交" />
</form> <div id="box"> </div>
</body>
</html>
使用序列化得到单选框中的元素内容：
$("form input[name=sex]").click(function() {
$("#box").html(decodeURIComponent($(this).serialize())); //返回 sex=男/女
});
除了.serialize()方法，还有一个可以返回JSON数据的方法：.serializeArray()。这个方法可以直接把数据整合成键值对的JSON对象。
$("form input[name=sex]").click(function() {
//console.log($(this).serializeArray()); //控制台输出Array[Object] 即{name:"sex",value:"男"}/{name:"sex",value:"女"}
var json = $(this).serializeArray();
$("#box").html(json[0].name + "=" + json[0].value);
});
有时，我们可能会在同一个程序中多次调用$.ajax()方法，而它们很多参数都相同，这个时候我们可以使用jQuery提供的$.ajaxSetup()方法请求默认值来初始化参数。
//初始化重复的属性
$.ajaxSetup({
type:"post",
url:"user.php",
data:$("form").serialize()
});
$("form input[type=button]").click(function() {
$.ajax({
success:function(response, status, xhr) {
$("#box").html(response);
}
});
});
在使用data属性传递的时候，如果是以对象形式传递键值对，可以使用$.param()方法将对象转换为字符串键值对格式。
alert($.param({ // 返回，如：user=123&email=123%40163.com
user:$("form input[name=user]").val(),
email:$("form input[name=email]").val()
}));
$("form input[type=button]").click(function() {
$.ajax({
type:"post",
url:"user.php",
data:$.param({
user:$("form input[name=user]").val(),
email:$("form input[name=email]").val()
}),
success:function(response, status, xhr) {
$("#box").html(response);
}
});
});
注意：使用$.param()将对象形式的键值对转为URL地址的字符串键值对，可以更加稳定准确的传递表单内容。因为有时程序对于复杂的序列化解析能力有限，所以直接传递obj对象要谨慎。
初学Ajax(三)的更多相关文章
- Linux系统初学-第三课 Linux网络配置1
Linux系统初学-第三课 Linux网络配置 1.动态IP配置 配置文件路径 /etc/sysconfig/network-scripts/ ls查看网卡eth0,其中HWADDR值得获取:ifco ...
- 初学Ajax(二)
$.get()和$.post() .load()方法是局部方法,因为它需要一个包含元素的jQuery对象作为前缀.而$.get()和$.post()是全局方法,无须指定某个元素.对于用途而言,.loa ...
- 初学Ajax(一)
以下文字根据李炎恢——jQuery教程整理而成. Ajax全称为:“Asynchronous JavaScript and XML”(异步JavaScript和XML),它并不是JavaScript的 ...
- ajax 三种数据格式
1.JSON(格式要正确,可以引jar包操作) servlet代码 package com.hsp.action; import java.io.IOException; import java.io ...
- 初学Ajax
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 JavaScript和 ...
- jQuery中Ajax(三)
1. jQuery.ajaxSetup([options]), 设置全局 AJAX 默认选项. 参数见 'jQuery.ajax(url,[settings])' 说明. 2. jQuery.ajax ...
- AJAX三
三.ajax 4.代参数的get方法 ①服务器 ②ajax代码 xhr.open("get",url,true) url="/demo/get_login?uname=& ...
- AJAX三种返回值方式
(一)TEXT方式 该方式返回的是拼接字符串,想要取到其中的值,需要先将返回值进行拆分 (二)JSON方式 该方式返回的是数组,想要取到其中的值,可用索引项进行提取 (三)XML方式 XML:可扩展标 ...
- Python爬虫初学（三）—— 模拟登录知乎
模拟登录知乎 这几天在研究模拟登录, 以知乎 - 与世界分享你的知识.经验和见解为例.实现过程遇到不少疑问,借鉴了知乎xchaoinfo的代码,万分感激! 知乎登录分为邮箱登录和手机登录两种方式,通过 ...
随机推荐
- epoll重要
EPOLL事件分发系统可以运转在两种模式下:Edge Triggered (ET).Level Triggered (LT). LT是缺省的工作方式,并且同时支持block和no-blocksocke ...
- Mysql 更改最大连接数
方法一: 进入MySQL安装目录 打开MySQL配置文件 my.ini 或 my.cnf查找 max_connections=100 修改为 max_connections=1000 服务里重起MyS ...
- [转]coredump简介与coredump原因总结
[转]coredump简介与coredump原因总结 http://blog.sina.com.cn/s/blog_54f82cc201013srb.html 什么是coredump? 通常情况下co ...
- Android实现SharePreferences和AutoCompletedTextView
Android实现SharePreferences和AutoCompletedTextView 开发工具:Andorid Studio 1.3 运行环境:Android 4.4 KitKat 工程内容 ...
- 20145120 《Java程序设计》第7周学习总结
20145120 <Java程序设计>第7周学习总结 教材学习内容总结 Lambda表达式 例:Comparator<String> byLength = (name1, na ...
- 结队开发项目—NABC模型
特点:可以避免食堂的用餐高峰,从而使使用者节约时间 need:很多学生中午下课在食堂吃饭会遭遇用餐高峰,使用这款软件,可以提前订饭,按时送达,从而避免食堂的用餐高峰期. approach:学生可以提前 ...
- 卷积神经网络CNN介绍：结构框架，源码理解【转】
1. 卷积神经网络结构 卷积神经网络是一个多层的神经网络,每层都是一个变换(映射),常用卷积convention变换和pooling池化变换,每种变换都是对输入数据的一种处理,是输入特征的另一种特征表 ...
- 主元分析PCA理论分析及应用
首先,必须说明的是,这篇文章是完完全全复制百度文库当中的一篇文章.本人之前对PCA比较好奇,在看到这篇文章之后发现其对PCA的描述非常详细,因此迫不及待要跟大家分享一下,希望同样对PCA比较困惑的朋友 ...
- 用 Android-X86 和 VirtualBox 玩安卓游戏
目前的系统是 Ubuntu 14.04,近日玩了玩 flash 版的<皇家禁卫军:前线>塔防游戏,还是想试试原生安卓游戏的表现.发现大概有两个选择: 各类安卓模拟器:官方SDK模拟器,bl ...
- skinned mesh 蜘蛛样
被skinned mesh 折磨了 好久,开始感觉skinindices不对,因为pix显示里面全是0 后来跟来跟去发现是这样的,那些uchar的整数被pix用float的格式显示出来 (显示为0.0 ...