开发者社区> 技术小胖子> 正文

读<jquery 权威指南>[4]-Ajax

简介:
+关注继续查看

一、获取异步数据

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>

image

②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方式。

image

image

②ajax中的全局事件

image

实例:

复制代码
<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>
复制代码





版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
13862 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
14744 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
17200 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
10006 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
21678 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
20690 0
21117
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载