JavaScript强化教程——jQuery AJAX 实例

什么是 AJAX?
AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。
使用 AJAX 的应用程序案例:谷歌地图、腾讯微博、优酷视频、人人网等等。

jQuery load() 方法
jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
语法:
$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
这是示例文件("demo_test.txt")的内容:
<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>
下面的例子会把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中:
示例
$("#div1").load("demo_test.txt");
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $(‘#test‘).load(‘/example/jquery/demo_test.txt‘);
  })
})
</script>
</head>

<body>

<h3 id="test">请点击下面的按钮,通过 jQuery AJAX 改变这段文本。</h3>
<button id="btn1" type="button">获得外部的内容</button>

</body>
</html>

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 —— jQuery AJAX实例

时间: 2024-10-13 22:01:44

JavaScript强化教程——jQuery AJAX 实例的相关文章

JavaScript强化教程——jQuery选择器

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 -- jQuery选择器 jQuery 选择器 选择器 实例 选取 * $("*") 所有元素 #id $("#lastname") id="lastname" 的元素 .class $(".intro") 所有 class="intro" 的元素 element $("p") 所有 <p&

JavaScript强化教程——jQuery动画

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 —— jQuery动画 jQuery 动画 - animate() 方法 jQuery animate() 方法用于创建自定义动画. 语法:$(selector).animate({params},speed,callback);必需的 params 参数定义形成动画的 CSS 属性. 可选的 speed 参数规定效果的时长.它可以取以下值:"slow"."fast" 或毫秒

JavaScript强化教程——jQuery Callback 函数

本文为 H5EDU 机构官方 HTML5培训HTML5培训 教程,主要介绍:JavaScript强化教程 -- jQuery Callback 函数 Callback 函数在当前动画 100% 完成之后执行. jQuery 动画的问题许多 jQuery 函数涉及动画.这些函数也许会将 speed 或 duration 作为可选参数.例子:$("p").hide("slow")speed 或 duration 参数可以设置许多不同的值,比如 "slow&qu

JavaScript强化教程——jQuery - Chaining

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 —— jQuery - Chaining 通过 jQuery,您可以把动作/方法链接起来. Chaining 允许我们在一条语句中允许多个 jQuery 方法(在相同的元素上). jQuery 方法链接 直到现在,我们都是一次写一条 jQuery 语句(一条接着另一条). 不过,有一种名为链接(chaining)的技术,允许我们在相同的元素上运行多条 jQuery 命令,一条接着另一条. 提示:这样的话,

JavaScript强化教程——jQuery UI API 类别

主要介绍:JavaScript强化教程-- jQuery UI API 类别 jQuery UI 在jQuery 内置的特效上添加了一些功能.jQuery UI 支持颜色动画和 Class 转换,同时也提供了一些额外的 Easings.另外,提供了一套完整的定制特效,供显示和隐藏元素时或者只是添加一些视觉显示时使用. API     描述      也属于类别 .addClass()     当动画样式改变时,为匹配的元素集合内的每个元素添加指定的 Class. 特效核心(Effects Cor

JavaScript强化教程——JQuery中的DOM编程

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 --JQuery中的DOM编程 JavaScript强化教程--JQuery中的DOM编程 本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 --JQuery中的DOM编程 DOM编程 ---------------------------- js中DOM编程   创建一个标签对象     var p=document.createElement("p"

JavaScript强化教程——JQuery初级教程

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 --JQuery初级教程 第一步 下载jquery首先需要在jquery官网下载 jquery-3.0.0.js(版本和当前最新版本一致)放到自己的文件夹中第二部 引用jquery <script src="jquery-3.0.0.js"></script> 第三部 使用jquery语法写一个简单地程序 <!DOCTYPE html> <html la

jquery ajax实例教程和一些高级用法

jquery ajax的调用方式:jquery.ajax(url,[settings]),jquery ajax常用参数:红色标记参数几乎每个ajax请求都会用到这几个参数,本文将介绍更多jquery ajax实例,后面会有一些ajax高级用法 query ajax的调用方式:jquery.ajax(url,[settings]),因为实际使用过程中经常配置的并不多,所以这里并没有列出所有参数,甚至部分参数默认值,就是最佳实践,根本没必要去自己定义,除非有特殊需求,如果需要所有参数,可以查看jq

【JavaScript】jQuery Ajax 实例 全解析

jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中. url (String) :