JQuery中Ajax的应用

1、使用load函数加载网页上的内容

  $("div").load(".../html li",function(){});

  选择在div元素内加载html网页的li内容,应用了选择器,后面的function()为回调函数

2、使用getJSON方法()异步加载JSON格式数据,调用格式:

  JQuery.getJSON(url,[data],[callback])或者$.getJSON(url,[data],[callback])

  url为加载JSON格式文件的服务器地址,data参数为请求时候发送的数据,callback为数据返回成功执行的回调函数

  

$.getJSON("http://www.imooc.com/data/sport.json",function(data){
                        $this.attr("disabled", "true");
                        $.each(data, function (index, sport) {
                            if(index==3)
                            $("ul").append("<li>" + sport["name"] + "</li>");
                        });
    
                    });

  上述代码获取服务器中JSON格式文件的数据,并遍历数据,将制定的字符名内容显示在页面中。

3、使用getScript方法()异步加载javascript格式文件,调用格式:

  JQuery.getScript(url,[callback])或者$.getScript(url,[callback]),与getJSON格式差不多

4、使用get()方法以GET方式从服务器获取数据,调用格式:

  $.get(url,[callback]);

 $(function () {
                $("#btnShow").bind("click", function () {
                    var $this = $(this);
                    $.get("http://www.imooc.com/data/info_f.php",function(data){
                        $this.attr("disabled", "true");
                        $("ul").append("<li>我的名字叫:" + data.name + "</li>");
                        $("ul").append("<li>男朋友对我说:" + data.say + "</li>");
                    }, "json");
                })
            }) ;

5、使用post()方法以POST方式从服务器发送数据:与get()方法相比,post()方法多用于以POST方式向服务器发送数据,服务器接收到数据之后,进行处理,并将处理结果返回页面

  $.post(url,[data],[callback]);

$(function () {
                $("#btnCheck").bind("click", function () {
                    $.post("http://www.imooc.com/data/check_f.php",{num:$("#textNuber").val()},
                    function (data) {
                        $("ul").append("<li>你输入的<b>  "
                        + $("#txtNumber").val() + " </b>是<b> "
                        + data + " </b></li>");
                    });
                })
            });

6、使用ajax()方法加载服务器数据,它不仅可以获取服务器返回的数据,还能向服务器发送请求并传递数值,它的调用格式如下:

  

jQuery.ajax([settings])  或      $.ajax([settings])

参数settings为发送ajax请求时的配置对象,在该对象中,url表示服务器请求的路径,data为请求时传递的数据,dataType为服务器返回的数据类型,success为请求成功的执行的回调函数,type为发送数据请求的方式,默认为get。实例:

 $(function () {
                $("#btnCheck").bind("click", function () {
                    $.ajax({
                        url:"http://www.imooc.com/data/check.php",             
                        type:"post",
                        data: { num: $("#txtNumber").val() },
                        dataType:"text", 
                        success: function (data) {
                            $("ul").append("<li>你输入的<b>  "
                            + $("#txtNumber").val() + " </b>是<b> "
                            + data + " </b></li>");
                        }
                    });
                })
            });

注意:settings为对象

7、使用ajaxSetup()方法设置全局Ajax默认选项,调用格式,参数里面的options也是一个对象 

jQuery.ajaxSetup([options])或$.ajaxSetup([options])
 $(function () {
                $.ajaxSetup(
                    {
            datatype:
"text", type:"post", data:"$(‘#txtNumber‘).val()", success:function(data){ $("ul").append("<li>你输入的<b> " + $("#txtNumber").val() + " </b>是<b> " + data + " </b></li>"); } }); $("#btnShow_1").bind("click", function () { $.ajax({ data: { num: $("#txtNumber").val() }, url: "http://www.imooc.com/data/check.php" }); }) $("#btnShow_2").bind("click", function () { $.ajax({ data: { num: $("#txtNumber").val() }, url: "http://www.imooc.com/data/check_f.php" }); }) });

8、ajaxStart()和ajaxStop()方法是绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数,ajaxStop()方法用于在Ajax请求完成后触发函数。它们的调用格式为:

$(selector).ajaxStart(function())和$(selector).ajaxStop(function())
$(function () {
                $("#divload").ajaxStart(function(){
                    $(this).html("正在请求数据...");
                });
                $("#divload").ajaxStop(function(){
                    $(this).html("数据请求完成!");
                });
                $("#btnShow").bind("click", function () {
                    var $this = $(this);
                    $.ajax({
                        url: "http://www.imooc.com/data/info_f.php",
                        dataType: "json",
                        success: function (data) {
                            $this.attr("disabled", "true");
                        $("ul").append("<li>我的名字叫:" + data.name + "</li>");
                        $("ul").append("<li>男朋友对我说:" + data.say + "</li>");
                        }
                    });
                })
            });

 


 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。