jq Ajax
.getScript()方法
获取JS文件内容的方式包括:
<script type="text/javascript" src="***.js"></script> //js引用
$("<script type="text/javascript" src="***.js"/>").appendTo("head"); //jq引用
不过,使用.getScript方法得到局部使用的js文件是效率最高的。语法:
$.getScript("url",fun(response,status))
response-来自服务器结果数据
status-请求的状态("success","error"."notmodified","timeout"."parsererror")
.getJSON()方法
专门用于调用JSON格式的数据。
$.getJSON("url",[date],fun())
在服务器创建一个json文件:
[
{
"name":"小明",
"sex":"男"
},
{
"name":"小花",
"sex":"女"
}
]
在html中的jq代码如下:
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$.getJSON("jsontest.json",function(response,status){
$("#p1").html(response[0].name)
})
})
})
</script>
如果希望得到所有数据,则需要遍历数据:
jquery $.each(data, function (index, value) {})
data是需要遍历处理的数据
index是当前元素的位置,value是值
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$.getJSON("jsontest.json",function(response,status){
$("#p1").empty(); //清空该元素内容
var strhtml="";
//.each里面的data就是得到的response
$.each(response,function(index, value){
strhtml+="姓名:"+value["name"]+"<br>"
strhtml+="性别:"+value["sex"]+"<br>"
})
$("#p1").html(strhtml)
})
})
})
</script>
.ajax()方法
ajax()方法是最底层的方法,其他方法都是在此基础上建立的。
$.ajax([参数])
参数:
1.url
发送请求的接收地址
2.type
请求方式GET(默认)/POST
3.data
发送到服务器的数据。会自动转换为字符串。使用get方式发送时,要将其附在url后面。
4.dataType
要求服务器返回的数据类型(html/script/text/xml/json)。
4.complete
请求完成后调用的回调函数
5.success
请求成功后调用的回调函数function(responseTxt,statusTxt){}
6.error
请求失败后调用的回调函数
7.timeout
请求超时的时间(毫秒)
表单序列化
serialize()方法
将表单内容转化成为能ajax传输的字符串,即序列化。
$(selector).serialize()
返回值为字符串。
<form name="form">
账号:<input type="text" placeholder="请输入账号" name="user">
密码:<input type="text" placeholder="请输入密码" name="password">
<select name="sex">
<option>男</option>
<option>女</option>
</select>
<input type="button" name="" value="提交">
</form>
<p id="p1"></p>
<script type="text/javascript">
$(function() {
$("form input[type='button']").click(function(){
$.ajax({
url:"user.php",
type:"POST",
data:$("form").serialize(),
success:function(responseTxt,statusTxt){
alert(responseTxt)
}
})
})
})
</script>
返回值为表单项中的各表单元素name1=value1&name2=value2&...组成的字符串。
当表单中值为中文时,会出现乱码情况,需要转码:
var params = $("#form").serialize(); // http request parameters.
params = decodeURIComponent(params,true);
serializeArray()方法
类似serialize()方法,返回值为数组,内部为json对象
[
{"name":"name1","value":"value1"},
{"name":"name2","value":"value2"}
]
可用JSON.stringify()方法将数组内json对象转化为json字符串。
自定义serializeJSON方法
这是一个自定义方法,返回值为JSON对象
$.fn.serializeJSON = function() {
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name]) {
if (!o[this.name].push()) {
o[this.name] = [ o[this.name] ];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
}
全局ajax
$.ajaxSetup({})
建立全局公用性的ajax,通过设置默认参数,可以页面全局共同使用。
再为dom添加ajax时,ajax参数只需要写自己单独需要的参数就可以了,避免了重复写相同代码。
ajax全局事件
.ajaxStart(callback)
.ajaxStop(callback)
.ajaxSuccess(callback)
.ajaxError(callback)
.ajaxSend(callback)
.ajaxComplete(callback)
全局事件可以绑定页面任何元素,只要页面任何ajax执行都会触发全局事件。