通过Ajax发送数据--jQuery方法

最新推荐文章于 2024-07-15 22:52:27 发布

xiaobing_hope

最新推荐文章于 2024-07-15 22:52:27 发布

阅读量2.1k

点赞数

分类专栏： Jquery Ajax

本文链接：https://blog.csdn.net/xiaobing_hope/article/details/50380856

版权

Jquery 同时被 2 个专栏收录

13 篇文章 1 订阅

订阅专栏

Ajax

1 篇文章 0 订阅

订阅专栏

通过Ajax发送数据--jQuery方法

.load()方法：

$(document).ready(function(){
   $('#letter a').click(function(event){
       event.preventDefault();
       $("#dictionary").load('a.html');
   });
});

通过使加载的内容淡入视图而不是突然出现，.load()方法可以接受一个加载完成时触发的回调函数：

$(document).ready(function(){
    $('#letter a').click(function(event){
        event.preventDefault();
        $("#dictionary").hide().load('a.html',function(){
            $(this).fadeIn();
        });
    });
});

.getJSON() ----------加载json文件

$(document).ready(function(){
    $('#letter a').click(function(event){
        event.preventDefault();
        $.getJSON('b.json');
    });
});

$.get() -----get方法请求

$(document).ready(function(){
        $('#letter form').submit(function(event){
            event.preventDefault();
            $.get('f.php',{'term':$('input[name="term"]').val()},function(data){
//                其中f.php为请求服务地址，
//                    第二个参数为随请求传递给服务器的参数，
//                    第三个参数data为返回的响应参数
                $('#dictionary').html(data);
//                将返回的参数呈现在页面id为dictionary的地方
            });
        });
    });

$.post() -----post方法请求

$(document).ready(function(){
   $('#letter a').submit(function(event){
     event.preventDefault();
     var requestData = {term:$(this).text()};
     $.post('f.php',requestData,function(data){
//     其中f.php为请求服务地址，
//     第二个参数为随请求传递给服务器的表单参数，
//     第三个参数data为返回的响应参数
        $('#dictionary').html(data);
     });
   });
});

$(document).ajaxStart()

$(document).ajaxStop() ------全局函数，在请求开始和结束时触发执行

$(document).ready(function(){
    var $loading = $('<div id="loading">Loading....</div>').insertBefore("#dictionary");
    $(document).ajaxStart(function(){
        $loading.show();
    }).ajaxStop(function(){
        $loading.hide();
    });
});

.serialize() ------序列化表单

该方法作用于一个jQuery对象，将匹配的DOM元素装换成能够随Ajax请求传递的查询字符串。即将表单数据一次性传递：

$(document).ready(function(){
  $('#letter form').submit(function(event){
    event.preventDefault();
    var formValue = $(this).serialize();
    $.get('f.php',formValue,function(data){
//      其中f.php为请求服务地址，
//      第二个参数为随请求传递给服务器的表单参数，
//      第三个参数data为返回的响应参数
       $('#dictionary').html(data);
    })；
  });
});

Ajax错误处理

考虑到在网络或者数据发生错误的可能性，并适当地记录或者报告这些错误。

我们可以使用全局的.ajaxError()方法，处理链接出错时的情况。

可以给.load()之外的Ajax方法连缀.done()、.always()和.fail()方法，并通过他们添加相应的回调函数即可：

$(document).ready(function(){
   $('#letter a').click(function(event){
      event.preventDefault();
      var requestData = {term: $(this).text()};
      $.get('z.php',requestData,function(data){
         $('#dictionary').html(data);
      }).fail(function(jqXHR){
//        请求出错时，对页面的处理
          $('#dictionary').html('An error occurred: ' + jqXHR.status)
          .append(jqXHR.responseText);
       });
   });
});