jQuery-Ajax

Ajax(异步的JavaScript和XML)允许按需部分更新页面,而不用刷新整个页面,既提升了用户体验,又能减轻服务器和带宽的负担。

浏览器对Ajax的基础方法XMLHttpRequest()支持不同,兼容等非常麻烦,就选用jQuery库来使用Ajax。

jQuery创建Ajax 请求的主要方法是$.ajax() ,封装了5个简易方法:.load()、$.get()、$.post()、$.getJSON()、$.getScript()。

jQuery-Ajax语法

语法特点
$.get(url[,data][,callback][,type])

请求数据并加载

$.post(url[,data][,callback][,type])提交数据并返回更新后结果
$.getJSON(url[,data][,callback])请求JSON数据并加载
$.getScript(url[,callback])请求并加载、执行JavaScript
注释:1.url指定获取数据的地址 2.data通过键值对方式发送额外数据
注释:3.callback指示当数据返回时的调用函数 4.type指示期望的返回文件格式

下面为几个方法的例子:

1.load()

用于加载HTML代码,可直接加入页面中


    $('#content').load('example.html #content' );

2.$.get()

data、callback、type为可选参数,data通常不能大于2KB,当数据载入成功时调用callback回调函数,GET数据会被浏览器储存。


    $(function(){
    $('#send').click(
    function (){
    $.get('example.php',{
    username:$('#name').val(),
    phone:$('#phone').val(),
    massage:$('#message').text()
    },function(data,textStatus){
    $('#user').html(data);
    });
    })
    })

3.$.post()

向服务器发送数据,并加载服务器更新的数据。


    $.post('example.php',{
    username:$('#name').val(),
    phone:$('#phone').val(),
    massage:$('#message').text()
    },function(data,textStatus){
    $('#user').append(data);
    });


4.$.getScript()

加载JavaScript并运行,可在JavaScript文件载入完成后调用回调函数


    $.getScript('http://www.gaoyuanlizi.top/example.js',function(){
//处理代码……
    });


5.$.getJSON()

加载JSON文件,回调函数常配合$.each()方法使用


    $(function(){
    $('#refresh').click(
    function (){
    $.getJSON('example.json',function(data){
    var content="";
    $.each(data){
    content+='

'+content['left']+'

'+'

'+content['right']+'

'; $('#article').html(content); }}); }) })

6.$.ajax()

参数为一个对象,对象内的参数以键值对方式传递


    $(function(){
    $('#send').click(
    function (){
    $.ajax({
    type: "GET",
    url: "http://www.gaoyuanlizi.top/example.json",
    timeout: 1000,
    beforeSend: function(){
$('#article').html("正在加载");

    },
    complete: function(){
$('#article').remove();

    },
    success: function(){
    $.each(data){
    content+='

'+content['left']+'

'+'

'+content['right']+'

'; $('#article').html(content); }}, fail: function(){ $('#article').html("出错"); } }); })

$.ajax参数详细

参数详细
type

提交方式,可为POST或GET

url数据地址
data需要发送的数据
successAjax请求完成时调用函数
errorAjax请求发生错误时调用函数
beforeSendAjax请求开始之前调用函数
complete请求完成后调用
timeOut错误前等待时间(ms)
global是否触发全局事件,默认参数为true