jQuery的ajax方法

JQuery对Ajax进行了封装,在jQuery中$,ajax()方法属于最底层的方法

       $(function() {
            $("#send").click(function() {
                $.ajax({
                    type: "GET",
                    url: "test50.js",
                    dataType: "script"
                });
            });
        });

第二层是load(),$.get()和$.post()

 1.load()方法

$(function() {            

$("#send").click(function() {                

// 1. 加载整个页面                

//$("#resText").load("test.html");               

// 2.加载页面的部分内容(过滤)                

$("#resText").load("test.html .para");

            });

        });

 2. $.get()

$(function(){

  $('#send').click(function(){

   

})

})

 $(function() {
            var url = "/TestWeb/serviceTask";
            var data = "";
            $("#Button1").click(function() {
                data = "{'no':" + $("#txtName").val() + ",'data':0}";
                alert(data);        //显示参数,是否符合要求
                $.post(url, {
                    method: 'seekcar',    // 指令字(参照协议)
                    data: data            // 指令参数详情
                }, function(msgText) {
                    $("#divTip").html(msgText);
                });
            });
        });

3. $.post()

   $(function() {
            $("#Button1").click(function() {
                $.get("UserInfo.xml", function(data) {
                    $("#divTip").empty(); //清空显示的内容
                    var msg = "";
                    $(data).find("User").each(function() {
                        var user = $(this);
                        msg += "姓名:" + user.find("name").text();
                        msg += "性别:" + user.find("sex").text();
                        msg += "E-Mail:" + user.find("email").text() + "<br/>";
                    });
                    $("#divTip").html(msg);
                }, "xml");
            });
        });

第三层是$.getScript()和$.getJSON()

1.$.getScript()

  $(function(){

  $('#send').click(function(){

  $.getScript('test.js');

    })

})

2.$.getJSON()

  $(function(){
        $('#send').click(function() {
             $.getJSON('test60.json', function(data) {
                 $('#resText').empty();
      var html = '';
      $.each( data  , function(commentIndex, comment) {
       html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';
      })
     $('#resText').html(html);
            })
       })
   })

posted @ 2017-05-17 09:47  指尖上的舞蹈  阅读(88)  评论(0)    收藏  举报