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"

  }

]

Ajax在jQuery中的应用---加载异步数据的更多相关文章

  1. Ajax在jQuery中的应用（加载异步数据、请求服务器数据）

    加载异步数据 jQuery中的load()方法 load(url,[data],[callback]) url:被加载的页面地址 [data]:可选项表示发送到服务器的数据,其格式为 key/valu ...

  2. Jquery.ajax 详细解释 通过Http请求加载远程数据

    首先请看一个Jquery.ajax的例子 $.ajax({ type: "GET", url: "/api/SearchApi/GetResults", dat ...

  3. ajax在jQuery中的应用 （1）加载异步数据

  4. jquery 中dataTable显示加载中，图片或文字

    引入js文件 <script type="text/javascript" src="${basePath}/lib/datatables/1.10.0/jquer ...

  5. Javascript在ajax提交过程中页面显示加载中，请等待效果，并在提交过程中限制确定按钮防止多次提交，提交完成后，解除提交限制

    加载中,请等待div: <div id="load" class="center-in-center" style="display:none; ...

  6. jquery中的页面加载方法load()

    load方法会在元素的onload事件中绑定一个处理函数,如果处理函数绑定给window对象,则会在所有内容(包括窗口,框架,对象和图片等)加载完毕后触发, 如果处理函数绑定在元素上,则会在元素的内容 ...

  7. react中在hooks方法useEffect中加载异步数据

    useEffect( ()=>{ (async function getPipeList(value:any) { let result= await GetPipeList(value); s ...

  8. jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据

    jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据 这个是jQuery 的底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等. $.ajax() ...

  9. PHP+Jquery+Ajax 实现动态生成GUID、加载GUID

    GUID: 全局唯一标识符(GUID,Globally Unique Identifier)是一种由算法生成的二进制长度为128位的数字标识符.GUID主要用于在拥有多个节点.多台计算机的网络或系统中 ...

随机推荐

  1. SQL数据库 CRUD

    1.删除表 drop  table +表名 2.修改表 alter  table+表名+ add(添加)+列名+ int(类型) alter  table+表名+ drop(删除)+column(列) ...

  2. spring 第一篇（1-3）：鸟瞰spring蓝图

    如你所见,spring框架的核心是关注于如何使用DI.AOP和模板来让企业级java开发变得更简单.spring确实也是这样做的,所以很值得你去使用它.不过spring内容可能比你所能看到的要多很多. ...

  3. Yarn源码分析之参数mapreduce.job.reduce.slowstart.completedmaps介绍

    mapreduce.job.reduce.slowstart.completedmaps是MapReduce编程模型中的一个参数,这个参数的含义是,当Map Task完成的比例达到该值后才会为Redu ...

  4. TPM Key相关概念

    1. Storage Keys:存储密钥,用来加密数据和其它密钥的通用非对称密钥,这里的其它密钥可以是另外一个存储密钥,也可以是绑定密钥或签名密钥.它本身是长度2048bit的RSA私钥:它既可以是可 ...

  5. SecurCRT 远程linux 输入中文及 oracle 查询出文号问题

    一. 首先确认你的linux是否设置了支持中文 cat /etc/sysconfig/i18n 其中: LANG 变量是 language 的简称, 这个变量时决定系统的默认语言, 即系统菜单, 程序 ...

  6. hdu 2460(tarjan求边双连通分量+LCA)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2460 思路:题目的意思是要求在原图中加边后桥的数量,首先我们可以通过Tarjan求边双连通分量,对于边 ...

  7. Laravel5.1 模型 --一对一关系

    这篇文章主要记录模型的一对一关系,关联关系是Model的一种非常方便的功能. 1 实现一对一关系 1.1 准备工作 首先我们需要创建两张表和对应的两个模型,第一个模型是用户表,第二个模型是账号表. 这 ...

  8. Linux下IP等网络配置

    Linux下IP等网络配置: 我所知道一共三种方式,下面简单介绍(注意:网络配置必须”root管理员“登录才能进行配置). 一 1.首先在命令行输入[ifconfig]命令,可看到相关网络信息,其中” ...

  9. Android无线测试之—UiAutomator UiSelector API介绍之三

    节点关系介绍 每一个布局文件都是一个严格的层次结构布局文件,只有对层次结构非常的了解,才能更好的搜索定位我们需要的主键元素 一.XML文档节点关系介绍 备注:查看节点关系主要使用UiAutomatro ...

  10. keras常用的网络层

    一.常用层 常用层对应于core模块,core内部定义了一系列常用的网络层,包括全连接.激活层等. 1.Dense层 Dense层:全连接层. keras.layers.core.Dense(outp ...