Ajax入门教程:3.jq Ajax(2)



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执行都会触发全局事件。


上一篇: 2.jq Ajax(1) 下一篇: 4.HTTP协议