初学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的代码,万分感激! 知乎登录分为邮箱登录和手机登录两种方式,通过 ...
随机推荐
- oracle12c不能进入到http://localhost:5500/em的解决办法
Oracle11g企业管理器无法打开——解决https://localhost:1158/em 页面无法打开的问题 常见的问题:https://localhost:1158/em 无法打开 解决办法: ...
- Go原子计数
通过原子计数可以在多线程情况下,对同一个数值进行加减操作,一般用于状态同步. 先看代码: package main import "fmt" import "time&q ...
- iOS学习之Object-C语言继承和初始化方法
一.继承 1.面向对象的三大特性:封装,继承,多态. 面向对象提供了继承特性.把公共的方法和实例变量写在父类里,子类只需要写自己独有的实例变量和方法即可.继承既能保证类的完整,又能简化代码. ...
- SharePoint 2010 中使用Ztree和EasyUI样式冲突问题
<style type="text/css"> /*解决ztree和SharePoint样式冲突问题*/ .ztree li a { display: inline-b ...
- Linux内核内存管理
<Linux内核设计与实现>读书笔记(十二)- 内存管理 内核的内存使用不像用户空间那样随意,内核的内存出现错误时也只有靠自己来解决(用户空间的内存错误可以抛给内核来解决). 所有内核 ...
- C Primer Plus学习笔记
1.汇编语言是特地的Cpu设计所采用的一组内部指令的助记符,不同的Cpu类型使用不同的Cpu C给予你更多的自由,也让你承担更多的风险 自由的代价是永远的警惕 2.目标代码文件.可执行文件和库 3.可 ...
- [shell基础]——算术运算
shell只支持整数运算.一般可用let.expr.declare.$[]实现. 更精准的运算建议使用Linux下的bc工具——一款高精度计算语言. 1. let是shell内建的整数运算命令 ## ...
- shell if判断的种类
if [ $# != 1 ] ; then echo "USAGE: $0 TABNAME" echo " e.g.: $0 CDR_CALL_20040701" ...
- Ztree的初步使用--checkbox--指定目录下搜索子节点
这里记录一下zTree的check的使用 首先 <%@ Page Language="C#" AutoEventWireup="true" CodeBeh ...
- Netsharp快速入门(之2) 基础档案(之A 创建插件和资源)
作者:秋时 杨昶 时间:2014-02-15 转载须说明出处 第三章 基础档案开发 本文不再对此需求进行分析设计,其实分析设计的结果在下文会体现在平台的使用过程中,这个销售系统分成两个模 ...