同等、获取异步数据

jQuery可以由服务器异步得到静态数据。

①load()

$.load(url,data,callback)

  • url要加载的页面地址,
  • data发送至服务器的数额key/value格式,
  • callback代表加载成功后回到到加载页面的回调函数。

中间url中还得过滤页面元素。

<script type="text/javascript">
        $( function () {
            $( "#Button1").click(function () { //按钮点击事件
                $( "#divTip").load("a.html .aa" ); //load()方法加载数据
            });
        })
</script>

a.html代码为:

<div class="clsShow">test</div>
<div class="clsShow aa">test1</div>

jQuery 1

②getJSON()

计:$.getJSON(url,data,callback):获取.json格式的数码并拓展拍卖。

参数:url要加载的页面地址,data发送数据,callback回调函数。
news.js

[
  {
    "title": "新天龙八部要停播",
    "date":"2014-1-26"
  },
  {
    "title": "我是歌手你喜欢谁",
    "date":"2014-1-24"
  }
]

html:

<div class="divFrame">
      <div class="divTitle">
           <input id="Button1" type="button" 
                  class="btn" value="获取数据" />
      </div>
      <div class="divContent">
           <div id="divTip"></div>
      </div>
 </div>

<script type="text/javascript">
    $(function () {
        $("#Button1").click(function () {
            $.getJSON("news.js", function (data) {
                var html = "";
                $.each(data, function (index, item) {
                    html += (index + 1);
                    html += "标题:" + item.title + "<br/>";
                    html += "日期:" + item.date + "<br/>";
                });
                $("#divTip").html(html);
            });
        });
    });
</script>

③getScript()

$.getScript(url,callback):获取js文件并自动执行注入的台本。

参数:url为要加载的js文件地点,callback为回调函数。

实例:

news1.js:

var data = [
  {
      "title": "新天龙八部要停播",
      "date": "2014-1-26"
  },
  {
      "title": "我是歌手你喜欢谁",
      "date": "2014-1-24"
  }
];
$.each(data,function () {
    var html = "";
    $.each(data, function (index, item) {
        html += (index + 1);
        html += "标题:" + item.title + "<br/>";
        html += "日期:" + item.date + "<br/>";
    });
    $("#divTip").html(html);
});

调用:

$(function () {
    $("#Button1").click(function () {
        $.getScript("news1.js");
        });
});

老二、请求服务器数据——$.get,$.post

①方法

  • $.get(url,[data],[callback],[type])
  • $.post(url,[data],[callback],[type])

参数表明:url是假如要的数地址;data是意味着发送到服务器的地址是key/value格式;callback表示请成功后行之回调函数;type是归数据的格式,如html、json、xml等。

专注:data中使带有粤语格式,要动用encodeURI()方法开展转码;在客户端接收数据日常如用decodeURI()方法举行解码。

②差别:

$.get和$.post方法差异不雅,首要区别在偏下简单点:

  • $.get不相符传递数据量比充足的数量,$.post无此限制。
  • $.get请求的结果碰头缓存到浏览器中,而$.post结果未晤面浏览器缓存。

③实例:

<script type="text/javascript">
        $(function() {
            $("#Button1").click(function() { //按钮单击事件
                //打开文件,并通过回调函数返回服务器响应后的数据
                $.get("UserInfo.aspx",
                { name: encodeURI($("#txtName").val()) },
                function(data) {
                    $("#divTip")
                    .empty() //先清空标记中的内容
                    .html(data); //显示服务器返回的数据
                })
            })
        })
    </script>

三、$.ajax

①方法

$.ajax([options])是较底层的异步调用方法。参数options是key/value格式的,既包含发送请求的安,也隐含相应后底回调数据。

内需专注的是跨域调用时尽管使用Jsonp形式。

jQuery 2

jQuery 3

②ajax中的全局事件

jQuery 4

实例:

<script type="text/javascript">
        $(function() {
            //元素绑定全局ajaxStart事件
            $("#divMsg").ajaxStart(function() {
                $(this).show(); //显示元素
            })
            //元素绑定全局ajaxStop事件
            $("#divMsg").ajaxStop(function () {
                $(this).html("已成功获取数据。").hide();
            })
            //按钮的单击事件
            $("#Button1").click(function() {
                $.ajax({ //带参数请求服务器
                    type: "GET",
                    url: "GetData.aspx",
                    //获取加码后的数据并作为参数传给服务器
                    data: { txtData: encodeURI($("#txtData").val()) },
                    dataType: "html",
                    success: function(data) { //显示解码后的返回数据
                        $("#divTip").html(decodeURI(data));
                    }
                })
            })
        })
         </script>

相关文章

网站地图xml地图