Ajax使用3
* Ajax的增强操作
* jQuery对Ajax的支持
* 第一组：最基本的用法，最复杂
* $.ajax( url, [setting] )方法
* 第二组：
* load( url, [data], [callback] )方法
* $.get( url, [data], [callback], [type] )方法
* 该方法要求请求方式必须是GET
* $.post( url, [data], [callback], [type] )方法
* 该方法要求请求方式必须是POST
* 第三组（了解）：
* $.getScript( url, [callback] )方法
* 作用：动态读取JavaScript脚本代码
* $.getJSON( url, [data], [callback] )方法
* 作用：
* 只是用于读取JSON格式的数据内容
* 解决Ajax的跨域请求（了解） —— JSONP模式
* 表单操作
* Ajax中的表单提交：
* 不能再使用表单的submit事件
* 为button增加onclick事件，处理函数中进行Ajax异步请求
* 问题：
* 如何获取表单中所有的元素值。（元素过多时）
* 实现Ajax提交表单的步骤：
* 使用getElementById()或jQuery获取表单中所有的元素值
* 问题：表单中具有多少元素内容（元素越多，获取越复杂）
* 将获取的所有元素值进行拼串（文本、XML和JSON）
* 问题：必须要面对字符串的拼串（极容易出错）
* 使用Ajax异步提交表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script src="../jquery-1.11.3.js"></script>
</head>
<body>
<form>
用户名:<input type="text" id="username"><br>
密码:<input type="password" id="password"><br>
爱好:<input type="checkbox" id="Html" name="hobbys" value="Html">Html
<input type="checkbox" id="Css" name="hobbys" value="Css">Css
<input type="checkbox" id="JavaScript" name="hobbys" value="JavaScript">JavaScript
<input type="checkbox" id="jQuery" name="hobbys" value="jQuery">jQuery
<input type="checkbox" id="Ajax" name="hobbys" value="Ajax">Ajax<br>
性别:<input type="radio" id="male" name="gender">男
<input type="radio" id="female" name="gender">女<br>
所在地:<select id="province">
<option>-请选择-</option>
<option>江苏省</option>
<option>浙江省</option>
<option>辽宁省</option>
<option>吉林省</option>
</select>
<select id="city">
<option>-请选择-</option>
<option>无锡市</option>
<option>泰州市</option>
<option>常州市</option>
<option>苏州市</option>
<option>昆山市</option>
<option>江阴市</option>
</select>
<br>
<input type="button" value="提交" onclick="ajaxSubmit();">
</form>
</body>
<script>
function ajaxSubmit(){
//1使用DOM或者jQuery获取表单中所有元素值
var username = $("#username").val();
var password = $("#password").val();
var hobbys = $("input[name = 'hobbys']:checked");
var gender = $("input[name = 'gender']:checked");
var province = $("#province>option:selected");
var city = $("#city>option:selected");
//2将获取的元素值进行拼串（text、xml和json）
var ajaxString = "";
ajaxString+="username="+username;
ajaxString+="&password="+password;
var hobbys = [];
$.each(hobbys , function(index,domEle){
hobbys[index]=domEle.value;
})
ajaxString+="&hobbys="+hobbys.toString();
ajaxString+="&gender="+gender;
ajaxString+="&province="+province;
ajaxString+="&city="+city;
//3使用Ajax进行异步提交
$.ajax("server.php" , {
type : "POST",
data : "ajaxString",
dataType : "text",
success : function(data){
alert(data);
},error : function(textStatus){
alert(textStatus);
}
});
}
</script>
</html>
* 表单的序列化：
* 定义：从关注表单中的元素，到只关注表单本身，通过表单的序列化得到对应表单中的所有元素值。
* 表单序列化：（jQuery）
* serialize()方法：将指定的表单元素序列化成JSON格式的字符串
* serializeArray()方法：将指定的表单元素序列化成JSON格式的数组
* 注意：
* 序列化表单元素，元素具有name属性。
* 表单具有多选框的话，直接序列化表单时：结果是不正确的。
* jQuery.form插件：
* ajaxForm()方法：用于表单验证的方法（不能提交表单）。
* （只使用）ajaxSubmit()方法：用于提交表单。
* url
* type
* dataType
* beforeSubmit:function
* 提交表单之前完成的功能
function(fromData,jqFrom,options){}
* formData：表单中元素的值（数组）
* jqForm：表单的jQuery对象
* success:function
* 提交表单成功后的回调函数
function(responseText,statusText){}
* responseText：服务器端响应的数据内容
* statusText：请求状态
* 标准化的Ajax（了解） - RESTful
* Http协议的四个请求方式：
GET - 获取资源
POST - 新建资源
PUT - 修改或更新资源
DELETE - 删除资源
* 客户端向服务器端发送的请求链接：
GET http://www.xxx.com/users - 获取服务器端users资源
GET http://www.xxx.com/users/13 - 获取服务器端users资源中的id为13的用户信息
浙公网安备 33010602011771号