Ajax在jQuery中的应用---加载异步数据-CSDN博客

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">
            
         </script>
    </head>
    <body>
        <input id="" type="button" value="获取数据" />
        <div id=""></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">
            "#divTip").empty(); //先清空标记中的内容
                        var strHTML = ""; //初始化保存内容变量
                        $.each(data, function(InfoIndex, Info) { //遍历获取的数据
                           "#divTip").html(strHTML); //显示处理后的数据

        </script>
    </head>
    <body>
        <input id="" type="button" value="获取数据" />
        <div id=""></div>
    </body>
</html>

UserInfo.json
[
  {
    "name": "陶国荣",
    "sex": "男",
    "email": "tao_guo_rong@163.com"
  },
  {
    "name": "李建洲",
    "sex": "女",
    "email": "xiaoli@163.com"
  }
]

转载于:https://www.cnblogs.com/weilunhui/p/4235269.html