*注意ajax必须是在搭建好的web服务器下设置
$.ajax({
type:"",
url:'',
timeout:
async:
cache:
data:
dataType:
beforeSend:
complete:
success:
error:
jsonp:
contentType:
dataFilter:
global:
ifModified:
username:
password:
processData:
scriptCharset:
});
更多参数请参考：https://sdeno.com/jq/jQuery.ajax.html
ajax是多技术集合，只要浏览器支持js就能运行ajax
减轻服务器和带宽负担。
load()是局部方法 比较适合做一些静态页面处理
举例
index.htm
<button></button>
<div id=”box”></div>
index.htm文件里面的#box里面要加载一些内容进去
可以这么写
$(‘#button’).click(function(){
$(‘#box’).load(‘test.html’);
});
#box里面加载进来了test.html里面的内容
load()提交方式默认是get 于是地址就可以这么提交
以get带参数提交给服务器
$(‘#box’).load(‘test.html?a=b&c=d’);
get可以带参数提交数据给服务器
内容过滤
$(‘#box’).load(‘test.html .url’);
获取得到的test.html内容进行筛选 上面意思是把
名为class=”url”的元素内容加载进到#box里面。
以Post方式提交参数给服务器
$(‘#button’).click(function(){
$(‘#box’).load(‘test.html’,{
url:’ycku’
});
});
回调函数
response 参数就是获取得到的test.html内容
作用就是把得到的内容需要进行编辑时用到。
$(‘#button’).click(function(){
$(‘#box’).load(‘test.html’,{
url:’ycku’
},function(response,status,xhr){
$(‘#box’).html(response+’123′);
});
});
status是指如果获取到的内容状态，成功时怎么样
失败时怎么样。success error
$(‘#button’).click(function(){
$(‘#box’).load(‘test.html’,{
url:’ycku’
},function(response,status,xhr){
if(status==’success’){
如果获取到内容成功后要做什么代码写这里..
}
});
});
xhr是一个总对象它里面的属性就有response和status，
因为response和status很重要所以开发的时候就独立写了出来。
xhr对象有4个属性分别是：
responseText xhr.responseText 跟 response功能一样
responseXML xhr.responseXML
status xhr.status 获取内容成功返回200
$.get()
$(‘input’).click(function(){
$.get(‘test.php?url=ycku’,function(response,status,xhr){
$(‘#box’).html(response);
});
});
$(‘input’).click(function(){
$.get(‘test.php’,’url=ycku’,function(response,status,xhr){
$(‘#box’).html(response);
});
});
$(‘input’).click(function(){
$.get(‘test.php’,{
url:’ycku’
},function(response,status,xhr){
$(‘#box’).html(response);
});
});
$.post()跟$.get()差不多，只是不能用带?请求服务器传递内容
$.getJSON用法也是跟get和post差不多
$(‘input’).click(function(){
$.getJSON(‘test.php’,{
url:’ycku’
},function(response,status,xhr){
alert(response[0].url); //数组第一个位置，并且是对象属性url
});
});
JSON内容是：
[{url:’你好’}]
$.getScript()
一般我们在调用JS 的时候都要加载到页面中不管用不用都已经加载调用了，但是我们要之后被调用的时候才加载进来，可以使用$.getScript()。
$(‘input’).click(function(){
$.getScript(‘test.js’);
});
————————
$.ajax可以取代上面所有的方法
$.ajax典型的用法
$(‘input’).click(function(){
$.ajax({
type:’POST’,
url:’test.php’,
data:{url:’ycku’},
success:function(response,status.xhr){ $(‘#box’).html(response) }
});
});
利用$.ajax把表单的数据传给服务器
$(‘form input[type=button]’).click(function(){ //点击按钮提交时
$.ajax({
type:’POST’, //将数据以Post方式传给服务器
url:’test.php’, //将数据传给test.php文件
data:{
user:$(‘form input[name=user]’).val(), //传递的数据就是name=’user’里面的数据
email: $(‘form input[name=email]’).val(),//传递的数据就是name=’email’里面的数据
},
success:function(response,status.xhr){ $(‘#box’).html(response) } ,//在从test.php请求数据
timeout:3000, //如果ajax加载时间超过3分钟，就停止运行了。
global:false //ajax默认是全局，加上这的ajax就不接受其他的全局事件了
});
});
对于表单多的可以使用.serialize()
data:$(‘form’).serialize()
serialize()获取到的数据就是URL编码字符,例如@ %23
serializeArray()获取到的数据是以对象形式封装的。
获取方法：
$(‘form input[name=sex]’).click(function(){
var json = $(this)serializeArray();
$(‘#box’).html(json[0].name);
});
$.ajaxSetup({ //$.ajaxSetup()可以将多余的部分封装
type;’POST’;
url:’test.php’,
});
如果提交的数据是以对象的形式提交的，例如：
data:{
user:$(‘form input[name=user]’).val(), //传递的数据就是name=’user’里面的数据
email: $(‘form input[name=email]’).val(),//传递的数据就是name=’email’里面的数据
},
上面是以对象的形式传个服务器。
需要提交的对象数据解析，需要用到$.param
data:$.param({
user:$(‘form input[name=user]’).val(), //传递的数据就是name=’user’里面的数据
email: $(‘form input[name=email]’).val(),//传递的数据就是name=’email’里面的数据
}),
上面是把对象转成URL地址的形式穿给服务器
用ajax的时候遇到网速很慢的时候,要给一个温馨
提示,例如”正在加载中”的效果
低于1.8的版本可以使用如下方法：
$(‘.loading’).ajaxStart(function(){
$(this).show();
}).ajaxStop(function(){
$(this).hide();
});
1.8以后的版本使用这样
$(document).ajaxStart(function(){
$(‘.loading’).show(); //ajax还没加载完就执行这里
}).ajaxStop(function(){
$(‘.loading’).hide(); //ajax加载完就执行这里
});
ajaxStart和ajaxStop是全局事件。
错误提示
适用于$.ajax的错误提示
$.ajax({
type:’POST’, //ajax选择POST方式提交数据
url:’use.php’, //将数据提交到这个文件
data:$(‘form’).serialize(), //获取到form中所有提交的数据
success:function(response,status,xhr){ //提交给use.php的数据成功后就执行的函数
$(‘#box’).html(response); //获取提交给use.php成功的数据
},
timeout:3000, //如果3分钟还没能显示内容就必须停止运行ajax
global:false, //将此ajax设置为局部,就不能接受其他全局功能了
error:function(xhr,errorText,errorType){
alert(‘错误’); // 找不到url就提示错误
alert(errorText+’:’+errorType);
alert(xhr.status+’:’+xhr.statusText);
}
});
适用于$.post的错误提示
$.post(‘use.php’).error(function(xhr,errorText,errorType){
alert(‘错误’); // 找不到url就提示错误
alert(errorText+’:’+errorType);
alert(xhr.status+’:’+xhr.statusText);
});
error() $.post局部的方法
使用全局错误提示ajaxError(),只要是全局的$.ajax $.get $.post出现了错误
都会统一调用以下错误提示，如果是加上了global:false就不会调用其他全局事件
$(document).ajaxError(function(event,xhr,settings,infoError){
alert(xhr.status+’:’+xhr.statusText);
});
以上是ajax执行失败后执行的方法，下面介绍ajax执行成功后执行的方法。
全局事件ajaxSend(),ajaxComplete(),ajaxSuccess(),ajaxError()
$(document).ajaxSend(function(){
alert(‘正要但是还没触发ajax之前，执行这里’);
}).ajaxComplete(function(){
alert(‘不管ajax执行成功还是失败ajax运行结束时，最后都执行这里’);
}).ajaxSuccess(function(){
alert(‘ajax执行成功才执行这里’);
}).ajaxError(function(){
alert(ajax执行失败才执行这里”);
});
请求成功后的局部事件写法
$.post没有局部的执行ajax前的触发事件
$(‘form input[type=button]’).click(function(){
$.post(‘use.php’,$(‘form’).serialize()).success(function(){
}).complete(function(){
}).error(function(){
});
});
$.ajax({
type:’POST’, //ajax选择POST方式提交数据
url:’use.php’, //将数据提交到这个文件
data:$(‘form’).serialize(), //获取到form中所有提交的数据
success:function(response,status,xhr){ //提交给use.php的数据成功后就执行的函数
$(‘#box’).html(response); //获取提交给use.php成功的数据
},
timeout:3000, //如果3分钟还没能显示内容就必须停止运行ajax
global:false, //将此ajax设置为局部,就不能接受其他全局功能了
error:function(xhr,errorText,errorType){
alert(‘错误’); // 找不到url就提示错误
alert(errorText+’:’+errorType);
alert(xhr.status+’:’+xhr.statusText);
},
complete:function(){
},
beforeSend:function(){
},
error:function(){
}
});