/*
* 0. $.ajax()
* $('#btn').click(function(){
var data = $('input[name=go]').val();
$.ajax({
url: "ajax.php",
type:"POST",
data:{'data' : data},
success: function(msg){
if(msg){
$('input[name=back]').val('走服务器返回的输入值为:'+msg);
}
}
});
});
*/
/*
* 1. jQueryload(url, [data], [callback])
* url:待装入 HTML 网页网址。
* data:发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。
* callback:载入成功时回调函数。
*/
$('#btn1').click(function(){ // 加载外部js
$('#div1').load("js/test.js")
});
$('#btn2').click(function(){ // 加载外部html,并筛选class="product"显示
$('#div2').load("js/test.html .product",function(){
console.log("完成")
},'html')
});
/*
* 2. jQuery.post(url, [data], [callback], [type])
* url: 发送请求地址。
* data: 待发送 Key/value 参数,{ name:"LYX", time:"2pm" }
* callback: 发送成功时回调函数。
* responseText: 请求返回的内容
* textStatus: 请求状态:success,error,notmodified,timeout
* XMLHTTPRequest: XMLHTTPRequest对象
* type: 返回内容格式.
* xml, html, script, json, text, _default.
* "js/test.html .product" :表示筛选出product类传输,load()方法中,有参数会默认post,没有参数默认get
*/
$('#btn3').click(function(){
var data = $('#txt3').val();
$.post(
'post.php',
{'data' : data},
function(data,textStatus){
console.log("textStatus的值为: "+textStatus);
$('#div3>span').html("post服务器返回的data: "+data)
console.log(data)
})
});
/*
* 3. jQuery.get(url, [data], [callback], [type])
* url: 发送请求地址。
* data: 待发送 Key/value 参数。
* callback: 发送成功时回调函数。
* data: 请求返回的内容
* textStatus: 请求状态:success,error,notmodified,timeout
* type: 返回内容格式.
* xml, html, script, json, text, _default.
* 注意返回格式:HTML,XML,JSON
*/
$('#btn4').click(function(){
var data = $('#txt4').val();
$.get(
'get.php',
{'data' : data},
function(data,textStatus){
console.log("textStatus的值为: "+textStatus);
$('#div4>span').html("get服务器返回的data: "+data)
console.log(data)
})
});
/*
* 4. getJSON获取json文件
*/
$('#btn5').click(function(){
$.getJSON('address.json',function(data){
$.each(data, function(index,elem) {
$('#div5>span').append('<b>'+elem['name']+' </b>');
});
})
});
/*
* 5. $.getScript() 可用于延迟加载script
* 测试失败
*/
$('#btn6').click(function(){
$.getScript("http://www.imooc.com/data/sport_f.js",function(){
//抓取外部的script
})
});
/*
* 6. $.ajax()底层的Ajax实现,以上的方法都能用$.ajax()实现
*/
$.ajax({
type:"get",
url:"",
async:true
});
/*
* 7. serialize()方法 序列化你的表单
*/
$('#btn7').click(function(){
$.get(
'get.php',
//{data:$('#username').val()},
$('#form1').serialize(),
function(data,textStatus){
console.log( $('#form1').serialize() )
//序列化表单 username=11111&content=aaaaa
console.log( $('#form1').serializeArray())
//数组化表单 [{name:username,value:11111},{name:content,value:aaaaa}]
}
)
});
/*
* 8. ajax中的全局函数
* $().ajaxComplete()
* $().ajaxStart()
* $().ajaxStop()
* $().ajaxError()
* $().ajaxSend()
* $().ajaxSuccess()
* 如果不想ajax被全局影响,设置global:false
*/
$('#btn8').click(function(){
$.ajax({
url: "post.php",
type:"POST",
data:{'data' : $('#txt8').val()},
beforeSend:function(){
$('#div8>span').append('<b>'+'1.beforeSend'+' </b>');
},
success: function(data){
$('#div8>span').append('<b>'+'2.success:'+data+' </b>');
},
error:function(){
$('#div8>span').append('<b>'+'3.error'+' </b>');
},
complete:function(){
$('#div8>span').append('<b>'+'4.complete'+' </b>');
}
});
});
/*
* 9. 统一设置ajax的属性
*/
$.ajaxSetup({
url: "/xmlhttp/",
global: false,
type: "POST"
});