文档章节

jQuery基础整理之二

霞女
 霞女
发布于 2015/12/14 14:19
字数 1326
阅读 49
收藏 5

5,jQuery AjAX

5.1 AJAX简介

AJAX 是与服务器交换数据的艺术,它在不重载全部页面的情况下,实现了对部分网页的更新。

什么是 AJAX?

AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。

简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。

使用 AJAX 的应用程序案例:谷歌地图、腾讯微博、优酷视频、人人网等等。

您可以在我们的 AJAX 教程中学到更多有关 AJAX 的知识。

关于 jQuery 与 AJAX

jQuery 提供多个与 AJAX 有关的方法。

通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

提示:如果没有 jQuery,AJAX 编程还是有些难度的。

编写常规的 AJAX 代码并不容易,因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过,jQuery 团队为我们解决了这个难题,我们只需要一行简单的代码,就可以实现 AJAX 功能。

jQuery AJAX 方法

在下面的章节,我们将学习到最重要的 jQuery AJAX 方法。

5.2 加载

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");

也可以把 jQuery 选择器添加到 URL 参数。

下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容,加载到指定的 <div> 元素中:

实例

$("#div1").load("demo_test.txt #p1");

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数:

  • responseTxt - 包含调用成功时的结果内容

  • statusTXT - 包含调用的状态

  • xhr - 包含 XMLHttpRequest 对象

下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功,则显示“外部内容加载成功!”,而如果失败,则显示错误消息:

实例

$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部内容加载成功!");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});

5.3 GET/POST

jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。

HTTP 请求:GET vs. POST

两种在客户端和服务器端进行请求-响应的常用方法是:GET 和 POST。

  • GET - 从指定的资源请求数据

  • POST - 向指定的资源提交要处理的数据

GET 基本上用于从服务器获得(取回)数据。注释:GET 方法可能返回缓存数据。

POST 也可用于从服务器获取数据。不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据。

如需学习更多有关 GET 和 POST 以及两方法差异的知识,请阅读我们的 HTTP 方法 - GET 对比 POST

jQuery $.get() 方法

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

语法:

$.get(URL,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 callback 参数是请求成功后所执行的函数名。

下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据:

实例

$("button").click(function(){
  $.get("demo_test.asp",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

$.get() 的第一个参数是我们希望请求的 URL("demo_test.asp")。

第二个参数是回调函数。第一个回调参数存有被请求页面的内容,第二个回调参数存有请求的状态。

提示:这个 ASP 文件 ("demo_test.asp") 类似这样:

<%
response.write("This is some text from an external ASP file.")
%>

jQuery $.post() 方法

$.post() 方法通过 HTTP POST 请求从服务器上请求数据。

语法:

$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。

下面的例子使用 $.post() 连同请求一起发送数据:

实例

$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

$.post() 的第一个参数是我们希望请求的 URL ("demo_test_post.asp")。

然后我们连同请求(name 和 city)一起发送数据。

"demo_test_post.asp" 中的 ASP 脚本读取这些参数,对它们进行处理,然后返回结果。

第三个参数是回调函数。第一个回调参数存有被请求页面的内容,而第二个参数存有请求的状态。

提示:这个 ASP 文件 ("demo_test_post.asp") 类似这样:

<%
dim fname,city
fname=Request.Form("name")
city=Request.Form("city")
Response.Write("Dear " & fname & ". ")
Response.Write("Hope you live well in " & city & ".")
%>


© 著作权归作者所有

共有 人打赏支持
霞女
粉丝 40
博文 122
码字总数 38101
作品 0
丰台
程序员
私信 提问
几个非常实用的JQuery代码片段

jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多)。jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并...

IT智云编程
11/03
0
0
从零实现一个简易的jQuery框架之二—核心思路详解

如何读源码 整体框架甚是复杂,也不易读懂。但是若想要在前端的路上走得更远、更好,研究分析前端的框架无疑是进阶路上必经之路。但是庞大的源码往往让我们不知道从何处开始下手。在很长的时...

余大彬
08/08
0
0
《JavaScript实用效果整理》系列分享专栏

整理一些使用的JavaScript效果,在Web开发中遇到的比较好的动态效果,都收藏在这里,对以后的网站开发增加不少的色彩 《JavaScript实用效果整理》已整理成PDF文档,点击可直接下载至本地查阅...

开元中国2015
10/29
0
0
《基于JQuery和CSS的特效整理》系列分享专栏

《基于JQuery和CSS的特效整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201724.html 文章 一款基于jQuery的颜色拾取器 分享一款基于jQuery的QQ表情插件 ...

kaixin_code
11/04
0
0
10 款高质量的 jQuery 表单验证插件

本文整理了几款高质量的jQuery表单验证插件,可以节约web开发者的时间。希望对你有帮助! 列表如下: 1) A Jquery Inline Form Validation 2) Form Validation Using Jquery 3) Using Jquery...

小卒过河
2011/06/28
109.7K
18

没有更多内容

加载失败,请刷新页面

加载更多

AutoCAD_系统变量

https://baike.sogou.com/v53561514.htm?fromTitle=cad%E5%8F%98%E9%87%8F lunits 设置线性单位。1 科学 2 小数 3 工程 4 建筑 5 分数 6 windesk...

一个小妞
6分钟前
0
0
点播转码相关常见问题及排查方式

概述: 点播转码目前涉及用户上传自动触发转码、通过SubmitTranscodeJobs接口触发转码等方式,会出现用户转码失败的情况,这当中有用户源片的问题、也有用户设置转码参数的原因以及相关资源性...

阿里云云栖社区
8分钟前
1
0
图片base64预览及上传PHP处理

1、前端代码 <div id="img"/> <input type="file" id="img-select"/> <input type='button' id='submit'/> var newUrl; function imgPreview() {//将图片转成base64,实现预览效果 var file......

葬-花
10分钟前
0
0
Iris框架

1、安装iris: $ go get -u github.com/kataras/iris 2、golang iris web项目热重启 # 安装rizla包 $ go get -u github.com/kataras/rizla # 热重启方式启动iris项目 $ rizla main.go......

Liens
18分钟前
3
0
初探sentinel实践思考

简单说下, sentinel的优势: 友好的控制面板,支持实时监控 多种限流。支持QPS限流,线程数限流,多种限流策略,如:直接拒绝,匀速模式(漏斗),冷启动(如设置限制1000,延迟10秒,那第一...

爱吃大肉包
19分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部