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的用户信息