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. DataUml Design 介绍9 - DataUML 1.3版本功能（查询分析器功能等）

    DataUML 1.3 (下载)主要更新内容如下: 1.增加查询分析器功能: 2.增加打开历史文件记录功能: 3.修改查询对象功能: 4.增加显示对象长度功能: 5.增加配置显示表字段功能: 6.增加 ...

  2. 【转】SQL SERVER 2005 数据库状态为“可疑”的解决方法

    --MyDB为修复的数据名 USE MASTER GO SP_CONFIGURE 'ALLOW UPDATES',1 RECONFIGURE WITH OVERRIDE GO ALTER DATABA ...

  3. 锂电池电流单位C5A

    C5A是一起的,是一个单位!C5A是描述一个电池本身容量标准中一个放电电流的单位,具体是直观意义是这电池在充满电状态下放电到2.75或者3V,用C5A这么大的电流,能放电5小时,那么C5A就代表的是这 ...

  4. 将bloomfilter(布隆过滤器)集成到scrapy-redis中

    Python分布式爬虫打造搜索引擎Scrapy精讲—将bloomfilter(布隆过滤器)集成到scrapy-redis中,判断URL是否重复 布隆过滤器(Bloom Filter)详解 基本概念 如 ...

  5. java 读取world的图片 并把图片路径存入数据库

    package World; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundExcep ...

  6. php 按条件进行计算的方法

    $isin = in_array($sheng,$s_sheng);//post过来的省的编码是否在s_sheng(自定义的数组)里,如果在,则加一,如果不在则不加一 if($isin){ //ech ...

  7. php5.4n 长链接 bug

    运行5.2的部分程序会有中文无法显示的问题 恢复到5.2后中文显示正常

  8. SVN服务器迁移，SVN版本库迁移(网络copy)

    做法: 准备:系统平台:windows server 2003 版本库:vos 源服务器:10.10.13.48 目标服务器:10.10.13.129源SVN版本库的path: D:\svn\vos要 ...

  9. Xcode7.3打包ipa文件 报错和解决

    An error occurred during export. The file “xxx.ipa” couldn’t be opened because there is no such file ...

  10. haml入门

    1.什么是Haml Haml是HTML abstraction markup language,遵循的原则是标记应该是美的.Haml能够加速和简化模版,长处是简洁.可读.高效. 2.erbm模板和ha ...