初学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的代码,万分感激! 知乎登录分为邮箱登录和手机登录两种方式,通过 ...
随机推荐
- EF 随机排序
/// <summary> /// 数据上下文扩展 /// </summary> public partial class dbDataContext : IUnitOfWor ...
- Entity Framework 插入数据出现重复插入（导航属性硬是要查再一遍???????）
问题: Artist artmodel = new Artist(); artmodel.user = uinfo; _artiests.Add(artmodel); 新增一条Artist记录,但是同 ...
- Linux 文件与目录
文件描述符 在内核中,所有打开的文件都使用文件描述符(一个非负整数)标记.文件描述符的变化范围是0~OPEN_MAX – 1.早期的unix系统中,每个进程最多可以同时打开20个文件,就是说文件描述符 ...
- 利用LibreOffice转换ppt、doc转化pdf
利用LibreOffice转换ppt.doc转化pdf LibreOffice下载地址: http://www.libreoffice.org/download/libreoffice-fresh/ ...
- 【BOZJ 1901】Zju2112 Dynamic Rankings
Description 给定一个含有n个数的序列a[1],a[2],a[3]……a[n],程序必须回答这样的询问:对于给定的i,j,k,在a[i],a[i+1],a[i+2]……a[j]中第k小的数是 ...
- 软件工程实践小队--团队项目NABC
团队项目的NABC 1) N (Need 需求) 作为一个网上教学问答系统,用户的基本需求很明确,即为:提问.搜索.浏览.回答.编辑.评论.附加需求还有: 获取金币.提升等级. 提问:关于一门学科,用 ...
- quartz2D简单使用
quartz2D绘图 1:上下文:context,这个翻译不好理解,其实翻译环境更好一点,就是给了你一个画板,你看不到而已 在: CGContextRef ctx = UIGraphicsGetCur ...
- mysql存储过程和游标以及if-else,while典型实例
-- -------------------------------------------------------------------------------- -- Routine DDL - ...
- Javascript对象的创建模式 -- 深入了解Javascript
/* 一.模式1:命名空间(namespace) 优点:减少全局命名所需的数量,避免命名冲突或过度 */ // 更简洁的方式 var MYAPP = MYAPP || {}; //定义通用方法 MYA ...
- submit和button的区别
两者主要区别在于:submit可以提交表单(form),而button如果不指定onclick等事件处理函数,它是不做任何事情的.注意哦,在页面上<input type="submit ...