• Ajax在jQuery中的应用---加载异步数据


    Ajax是Asynchronous JavaScript and XML的缩写,其核心是通过XMLHttpRequest对象,以一种异步的方式,向服务器发送数据请求,并通过该对象接收请求返回的数据,从而完成人机交互的数据操作。在jQuery中,有大量的函数与方法为Ajax技术提供支持。

    jQuery加载异步数据:

    $(“#id”).load():加载html格式的数据

    $.getJSON():加载json格式的数据

    $.getScript():加载js格式的数据

    $.get():加载xml格式的数据

    1.load()方法

    load(url,[data],[callback])

    参数url为被加载的页面地址,可选项[data]参数表示发送到服务器的数据,其格式为key/value。可选项[callback]参数表示加载成功后,返回至加载页的回调函数。

    示例:创建两个新页面a.html和b.html,前者用于加载页,单击“获取数据”按钮后,在不刷新该页面的情况下,将b.html页中的内容显示在a.html页面的<div>标记中。

    a.html
     
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>Insert title here</title>
            
            <script language="javascript" type="text/javascript" src="js/jquery-1.9.0.js"></script>
                            
            <script type="text/javascript">
                $(function() {
                    $("#Button1").click(function() {   //按钮点击事件
                    $("#divTip").load("b.html");   //load()方法加载数据
                    })
                })
             </script>
        </head>
        <body>
            <input id="Button1" type="button" value="获取数据" />
            <div id="divTip"></div>  
        </body>
    </html>
    b.html
    
    <div class="clsShow">
        姓名:陶国荣<br />
        性别:男<br />
        邮箱:tao_guo1_rong@163.com
    </div>

    2.getJSON()方法

    getJSON(url,[data],[callback])

    参数url表示请求的地址,可选项[data]参数表示发送到服务器的数据,其格式为key/value。可选项[callback]参数表示加载成功时执行的回调函数。

    示例:创建一个JSON格式的文件UserInfo.json,用于保存人员资料信息。另外,创建一个页面,单击“获取数据”按钮后,将通过全局函数getJSON()获取文件UserInfo.json中的全部数据,并显示在页面中。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>Insert title here</title>
            
            <script language="javascript" type="text/javascript" src="js/jquery-1.9.0.js"></script>
                                     
            <script type="text/javascript">
                $(function() {
                    $("#Button1").click(function() { //按钮单击事件
                        //打开文件,并通过回调函数处理获取的数据
                        $.getJSON("UserInfo.json", function(data) {
                            $("#divTip").empty(); //先清空标记中的内容
                            var strHTML = ""; //初始化保存内容变量
                            $.each(data, function(InfoIndex, Info) { //遍历获取的数据
                                strHTML += "姓名:" + Info["name"] + "<br>";
                                strHTML += "性别:" + Info["sex"] + "<br>";
                                strHTML += "邮箱:" + Info["email"] + "<hr>";
                            })
                            $("#divTip").html(strHTML); //显示处理后的数据
                        })
                    })
                })
            </script>
        </head>
        <body>
            <input id="Button1" type="button" value="获取数据" />
            <div id="divTip"></div>
        </body>
    </html>
    UserInfo.json
    [
      {
        "name": "陶国荣",
        "sex": "男",
        "email": "tao_guo_rong@163.com"
      },
      {
        "name": "李建洲",
        "sex": "女",
        "email": "xiaoli@163.com"
      }
    ]
  • 相关阅读:
    JavaScript作用域
    JavaScript数据类型
    CSS页面布局(二)
    CSS页面布局(一)
    CCS界面组件
    JavaScript面向对象设计
    python-序列化与反序列化
    python-常用模块
    python-re模块
    python-匿名函数
  • 原文地址:https://www.cnblogs.com/weilunhui/p/4235269.html
Copyright © 2020-2023  润新知