使用load()方法通过Ajax请求加载服务器中的数据，并把返回的数据放置到指定的元素中，它的调用格式为：

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

参数url为加载服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

     <head>

         <title>使用load()方法异步请求数据</title>

         <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>

         <link href="style.css" rel="stylesheet" type="text/css" />

     </head>

     <body>

         <div id="divtest">

             <div class="title">

                 <span class="fl">我最爱吃的水果</span>

                 <span class="fr">

                     <input id="btnShow" type="button" value="加载" />

                 </span>

             </div>

             <ul></ul>

         </div>

         <script type="text/javascript">

             $(function () {

                 $("#btnShow").bind("click", function () {

                     var $this = $(this);

                     $("ul").load("./fruit.html",function(){

                         $this.attr("disabled", "true");

                     });

                 })

             });

         </script>

     </body>

 </html>
 <ul>

     <li>橘子</li>

     <li>香蕉</li>

     <li>葡萄</li>

     <li>苹果</li>

 </ul>

使用load()方法异步请求数据的更多相关文章

  1. jQuery基础（Ajax，load()，getJSON()，getScript()，post()，ajax()，同步/异步请求数据）

    1.使用load()方法异步请求数据   使用load()方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为:   load(url,[data],[callba ...

  2. 解决ajax异步请求数据后swiper不能循环轮播(loop失效)问题、滑动后不能轮播的问题。

    问题描述: 1.我使用axios异步请求后台的图片进行渲染后不能实现循环轮播,也就是loop失效,但是静态写死的情况下不会出现这种问题. 2. 分析: swiper的机制是:初始化的时候将swiper ...

  3. python爬虫（3）——用户和IP代理池、抓包分析、异步请求数据、腾讯视频评论爬虫

    用户代理池 用户代理池就是将不同的用户代理组建成为一个池子,随后随机调用. 作用:每次访问代表使用的浏览器不一样 import urllib.request import re import rand ...

  4. 09.VUE学习之watch监听属性变化实现类百度搜索栏功能ajax异步请求数据,返回字符串

    cmd下安装axios npm install axios 安装好后,会多出node_modules文件夹 思路: 监听data里的word改变时,发送ajax异步请求数据, 把返回的数据赋值给dat ...

  5. 微信小程序中使用Async-await方法异步请求变为同步请求

    微信小程序中有些 Api 是异步的,无法直接进行同步处理.例如:wx.request.wx.showToast.wx.showLoading等.如果需要同步处理,可以使用如下方法: 注意: Async ...

  6. jquery load 方法回显数据

    使用jQuery对象.load()方法 load() 方法的作用是可以通过 AJAX 请求从服务器加载数据,并把返回的数据直接放置到指定的元素中. 该方法使用起来非常简单,大大简化了ajax开发 语法 ...

  7. WeChat-SmallProgram：微信小程序中使用Async-await方法异步请求变为同步请求

    微信小程序中有些 Api 是异步的,无法直接进行同步处理.例如:wx.request.wx.showToast.wx.showLoading 等.如果需要同步处理,可以使用如下方法: 提示:Async ...

  8. Vuex异步请求数据通过computed计算属性值

    问题描述: 使用Vuex管理数据时,在组件内使用$emit分发事件后,获取回来的数据要自动更新到该组件内,需要使用computed来计算更新. 一开始尝试使用赋值给data的方法,后来发现重新发起aj ...

  9. vuejs之v-if-ajax异步请求数据遇到的坑

    场景: params是异步请求获得的数据是一个对象,对象中又有chefHealthInfos数组 渲染时候会报错: 分析: 这是因为可以把v-if看成渲染了两次,两次结果params分别为{},{ch ...

随机推荐

  1. <Linux下echo指令>

    echo这个命令我们最常见的还是在shell脚本中的使用,if语句,for语句,case语句....这些都不是对echo命令的全面了解.下面还有很多其他echo的参数: 来自本人的日常生活,和对资料查 ...

  2. 使用FormData上传文件、图片

    关于FormData XMLHttpRequest Level 2添加了一个新的接口  ---- FormData 利用FormData对象,可以通过js用一些键值对来模拟一系列表单控件,可以使用XM ...

  3. Noesis.Javascript.dll 引用时报错“找不到指定的模块”

    Could not load file or assembly 'Noesis.Javascript.dll' or one of its dependencies. 找不到指定的模块. 通过反编译发 ...

  4. jeecms子栏目或者文章页导航父栏目选中解决方法

    jeecms在子栏目或者文章页导航父栏目选中,看例子 <div class="nav"> <ul> [@cms_channel_list ] <li ...

  5. 非常有用！eclipse与myeclipse恢复已删除的文件和代码

     eclipse与myeclipse恢复已删除的文件和代码 今天写了1300多行代码,被不小心删除了顿时感觉手足无措,后来用myeclipse的历史文件恢复功能,找回来了,虚惊一场!!!MyEclip ...

  6. MySQL主从修复

    MySQL主从故障修复 测试库:192.168.1.2 主192.168.1.3 从 192.168.1.4 主 4又是2的从库192.168.1.5 从 有人修改了192.168.1.2和192.1 ...

  7. UML中的六大关系

    转自:http://www.cnblogs.com/shengtianlong/archive/2010/10/23/1858953.html UML定义的关系主要有六种:依赖.类属.关联.实现.聚合 ...

  8. 什么是XAML?

    XAML类似于XML一样的一种标记语言,主要用来设计UI. 对于XAML的历史,哪些都是废话了,至于Microsoft怎么整出XAML,然后,又怎么让XAML来开发windows 8应用程序,这些,都 ...

  9. WebAPi性能

    提高WebAPi性能   前言 WebAPi作为接口请求的一种服务,当我们请求该服务时我们目标是需要快速获取该服务的数据响应,这种情况在大型项目中尤为常见,此时迫切需要提高WebAPi的响应机制,当然 ...

  10. NodeJS下访问SQL Server

    1.下载node-sqlserver (1)msnodesql (msnodesql-0.2.1-v0.8-x64.msi)下载地址:下载  自行选择与自己系统相符的版本,点击安装. (2)msnod ...