load()

1.载入HTML文档
load()方法是jQuery中最为简单和常用的Ajax方法,能载入远程HTML代码并插入DOM中。
它的结构为:

  1. load(url [,data][,callback])
参数名称 类型 说明
url String 请求HTML页面的URL地址
data(可选) Object 发送至服务器的key/value数据
callback(可选) Function 请求完成时的回调函数,无论请求成功或失败

首先创建一个test.html文件,用于被load()方法加载并追加到页面中。

  1. test.html
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title></title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. </head>
  7. <body>
  8. <div class="comment">
  9. <h6>张三:</h6>
  10. <p class="para">沙发.</p>
  11. </div>
  12. <div class="comment">
  13. <h6>李四:</h6>
  14. <p class="para">板凳.</p>
  15. </div>
  16. <div class="comment">
  17. <h6>王五:</h6>
  18. <p class="para">地板.</p>
  19. </div>
  20. </body>
  21. </html>

然后再建一个demo1.html,在上面添加两个元素:<button>用来触发Ajax事件,id为”resText”的元素用来显示追加的HTML内容。HTML代码如下:

  1. demo1.html
  • 1
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title></title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <style type="text/css">
  7. * { margin:0; padding:0;}
  8. body { font-size:12px;}
  9. .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
  10. .comment h6 { font-weight:700; font-size:14px;}
  11. .para { margin-top:5px; text-indent:2em;background:#DDD;}
  12. </style>
  13. <!-- 引入jQuery -->
  14. <script src="https://cdn.bootcss.com/jquery/1.7.1/jquery.min.js"></script>
  15. <script language="javascript" type="text/javascript">
  16. $(function(){
  17. $("#send").click(function(){
  18. $("#resText").load("test.html");
  19. })
  20. })
  21. </script>
  22. </head>
  23. <body>
  24. <input type="button" id="send" value="Ajax获取" />
  25. <div class="comment">
  26. 已有评论:
  27. </div>
  28. <div id="resText" ></div>
  29. </body>
  30. </html>

显然,load()方法完成了原本很繁琐的工作。开发人员只需要使用jQuery选择器为HTML片段指定目标位置,然后将要加载的文件的URL作为参数传递给load()方法即可。当单击按钮后,test.html页面的HTML内ring就会被加载并插入主页面<div id="resText"></div>的元素中。

2.筛选载入的HTML文档
上面的例子是将test.html页面中的内容都加载到id"resText"的元素里。如果只需要加载test.html页面内的某些元素,那么可以使用load()方法的URL参数来达到目的。通过为URL参数指定选择符,就可以很方便地从加载过来的HTML文档里筛选出所需要的内容。

load()方法的URL参数的语法结构为:“url selector”。注意,URL和选择器之间有一个空格。

例如只需要加载test.html页面中class为”para”的内容,可以将demo1.html中的

  1. $("#resText").load("test.html");
  • 1

改为

  1. $("#resText").load("test.html .para");
  • 1

3.传递方法
load()方法的传递方式根据参数data来自动指定。如果没有参数传递,则采用GET方式传递;反之,则会自动转换为POST方法。

  1. //无参数传递,则是GET方式
  2. $('#resText').load('test.php',function(){
  3. //...
  4. });
  1. //有参数传递,则是POST方式
  2. $('#resText').load('test.php',{name:'rain',age:'22'},function(){
  3. //...
  4. });

4.回调函数
对于必须在加载完成后才能继续的操作,load()方法提供了回调函数(callback),该函数有3个参数,分别代表请求返回的内容请求状态XMLHttpRequest对象,jQuery代码如下:

  1. $("#resText").load("test.html",function (responseText, textStatus, XMLHttpRequest){
  2. alert(responseText); //请求返回的内容
  3. alert(textStatus); //请求状态:success,error
  4. alert(XMLHttpRequest); //XMLHttpRequest对象
  5. });

在load()方法中,无论Ajax请求是否成功,只要当请求完成(complete)后,回调函数(callback)就被触发。


load()方法通常用来从Web服务器上获取静态的数据文件,然后这并不能体现Ajax的全部价值。在项目中,如果需要传递一些参数给服务器中的页面,那么可以使用$.get()或者$.post()或者$.ajax()方法。


$.get()

$.get()方法使用GET方式来进行异步请求。
它的结构为:

  1. $.get(url[,data][,callback][,type])
  • 1
参数名称 类型 说明
url String 请求的HTML页的URL地址
data(可选) Object 发送至服务器的key/value数据会作为QueryString附加到请求URL中
callback(可选) Function 载入成功时回调函数(只有当Response的返回状态是success才调用该方法)自动将请求结果和状态传递给该方法
type(可选) String 服务器端返回内容的样式,包括xml、html、script、json、text和_default

我们用$.get()来实现评论的功能:

  1. get1.html
  • 1
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title></title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <style type="text/css">
  7. * { margin:0; padding:0;}
  8. body { font-size:12px;}
  9. .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
  10. .comment h6 { font-weight:700; font-size:14px;}
  11. .para { margin-top:5px; text-indent:2em;background:#DDD;}
  12. </style>
  13. <!-- 引入jQuery -->
  14. <script src="../scripts/jquery.js" type="text/javascript"></script>
  15. <script type="text/javascript">
  16. //<![CDATA[
  17. $(function(){
  18. $("#send").click(function(){
  19. $.get("get1.php", {
  20. username : $("#username").val() ,
  21. content : $("#content").val()
  22. }, function (data, textStatus){
  23. $("#resText").html(data); // 把返回的数据添加到页面上
  24. }
  25. );
  26. })
  27. })
  28. //]]>
  29. </script>
  30. </head>
  31. <body>
  32. <form id="form1" action="#">
  33. <p>评论:</p>
  34. <p>姓名: <input type="text" name="username" id="username" /></p>
  35. <p>内容: <textarea name="content" id="content" rows="2" cols="20"></textarea></p>
  36. <p><input type="button" id="send" value="提交"/></p>
  37. </form>
  38. <div class='comment'>已有评论:</div>
  39. <div id="resText" >
  40. </div>
  41. </body>
  42. </html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

get1.html向get1.php发送get请求,服务器端get1.php的代码如下:

  1. <?php
  2. header("Content-Type:text/html; charset=utf-8");
  3. echo "<div class='comment'><h6>{$_REQUEST['username']}:</h6><p class='para'>{$_REQUEST['content']}</p></div>";
  4. ?>

由于服务器端get1.php返回的数据格式是一段HTML片段,因此并不需要经过处理就可以将新的HTML数据插入到主页面中。
我们再来看一下get.html中的核心代码jQuery是如何完成get请求的:

  1. $(function(){
  2. $("#send").click(function(){
  3. $.get("get1.php", {
  4. username : $("#username").val() ,
  5. content : $("#content").val()
  6. }, function (data, textStatus){
  7. $("#resText").html(data); // 把返回的数据添加到页面上
  8. }
  9. );
  10. })
  11. })

我们可以看到在回调函数中,我们直接将返回回来的data(也就是HTML片段)直接在html中使用。

HTML片段实现起来只需要很少的工作量,但这种固定的数据结构并不一定能够在其他的Web应用程序中得到重用。

XML文档

服务器端是如何接收数据然后返回XML的呢?
代码如下:

  1. get2.php
  • 1
  1. <?php
  2. header("Content-Type:text/xml; charset=utf-8");
  3. echo "<?xml version='1.0' encoding='utf-8'?>".
  4. "<comments>".
  5. "<comment username='{$_REQUEST['username'] }' >".
  6. "<content>{$_REQUEST['content']}</content>".
  7. "</comment>".
  8. "</comments>";
  9. ?>

注意:由于服务器端返回的数据格式是XML文档,因此需要在服务端设置Content-Type类型,代码如下:

  1. header("Content-Type:text/xml; charset=utf-8");
  • 1

对于服务器端返回的数据是XML格式的情况,我们需要对返回的数据进行处理,才能应用到HTML中,jQuery有强大的DOM处理能力,处理XML文档与处理HTML文档一样,也可以使用常规的attr()、find()、filter()以及其他方法。jQuery代码如下:

  1. $(function(){
  2. $("#send").click(function(){
  3. $.get("get2.php", {
  4. username : $("#username").val() ,
  5. content : $("#content").val()
  6. }, function (data, textStatus){
  7. var username = $(data).find("comment").attr("username");
  8. var content = $(data).find("comment content").text();
  9. var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";
  10. $("#resText").html(txtHtml); // 把返回的数据添加到页面上
  11. },'XML');
  12. });
  13. })

返回数据格式为XML文档的过程实现起来比HTML片段要稍微复杂些,但XML文档的可移植性是其他数据格式无法比拟的,因此以这种格式提供的数据的重要性将极大提高。不过,XML文档体积相对较大,与其他文件格式相比,解析和操作它们的速度要慢一些。

JSON文件
之所以会出现这种数据格式的文件,很大程度上是因为XML文档体积大和难以解析。JSON文件和XML文档一样,也可以方便的被重用。而且,JSON文件非常简洁,也容易阅读。

服务器端是如何接收数据然后返回JSON的呢?
代码如下:

  1. get3.php
  • 1
  1. <?php
  2. header("Content-Type:text/html; charset=utf-8");
  3. echo "{ \"username\" : \"{$_REQUEST['username']}\" , \"content\" : \"{$_REQUEST['content']}\"}"
  4. ?>

JSON的格式还是比较严格的,所以格式不能写错了。
由于服务器端返回的数据格式是JSON文件,因此需要对返回的数据进行处理之后,才可以将新的HTML数据添加到主页面中。HTML文件其他部分还是一样,要修改的地方是jQuery部分,jQuery代码如下:

  1. $(function(){
  2. $("#send").click(function(){
  3. $.get("get3.php", {
  4. username : $("#username").val() ,
  5. content : $("#content").val()
  6. }, function (data, textStatus){
  7. var username = data.username;
  8. var content = data.content;
  9. var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";
  10. $("#resText").html(txtHtml); // 把返回的数据添加到页面上
  11. },"json");
  12. });
  13. })

在上面的代码中,将$.get()方法的第4个参数(type)设置为”json”来代表期待服务器返回的数据格式。

对于服务器端返回HTML片段、XML数据、JSON数据的优缺点进行分析,可以的得知在不需要与其他应用程序共享数据的时候,使用HTML片段来提供返回数据一般来说是最简单的;如果数据需要重用,那么JSON文件是不错的选择,它在性能和文件大小方面具有优势,它是Web服务器领域的“世界语”,我们推荐使用JSON。

$.post()

它与$.get()方法的结构和使用方式都相同,不过它们之间仍然有以下区别。

  • GET请求会将参数跟在URL后进行传递,而POST请求则是作为HTPP消息的实体内容发送给Web服务器。当然,在Ajax请求中,这种区别对用户是不可见的
  • GET方式对传输的数据有大小限制(通常不能大于2KB),而使用POST方式传递的数据量要比GET方式大得多(理论上不受限制)
  • GET方式请求的数据会被浏览器缓存起来,因此其他人就可以从浏览器的历史记录中读取到这些数据,例如账号和密码等。在某种情况下,GET方式会带来严重的安全性问题,而POST方式相对来说就可以避免这些问题。
  • GET方式和POST方式传递的数据在服务器端的获取也不相同。在PHP中,GET方式的数据可以用$_GET[]获取,而POST方式可以用$_POST[]获取。两种方式都可以用$_REQUEST[]来获取。

由于POST和GET方式提交的所有数据都可以通过$_REQUEST[]来获取,因此只需要改变jQuery函数,就可以将程序在GET请求和POST请求之间切换。
代码如下:

  1. $(function(){
  2. $("#send").click(function(){
  3. $.post("post1.php", {
  4. username : $("#username").val() ,
  5. content : $("#content").val()
  6. }, function (data, textStatus){
  7. $("#resText").html(data); // 把返回的数据添加到页面上
  8. });
  9. })
  10. })

load()、$.get()和$.post(),我们可以发现,$.get()和$.post()方法是jQuery中的全局函数,而在此之前讲的load()是对jQuery对象进行操作的。

上面使用load()、$.get()和$.post()方法完成了一些常规的Ajax程序,如果还需要编写一些复杂的Ajax程序,那么就要用到jQuery中的$.ajax()方法。$.ajax()方法不仅能实现与load()、$.get()和$.post()方法同样的功能,而且还可以设定beforeSend()、error()、success()以及complete()回调函数,通过这些函数,可以给用户更多的Ajax提示信息。另外,还有一些参数,可以设置Ajax请求的超时时间或者页面的”最后更改”状态等。关于$.ajax()方法将在下一篇博客中讲解

JQuery中的$.getScript()、$.getJson()和$.ajax()方法

JQuery中的load()、$.get()和$.post()详解 (转)的更多相关文章

  1. jquery 中 (function( window, undefined ) {})(window)写法详解(转)

    最常见的闭包 (Closure) 范式大家都很熟悉了: 123 (function() {// ...})(); 很简单,大家都在用.但是,我们需要了解更多.首先,闭包是一个匿名函数 (Anonymo ...

  2. Jquery中find与each方法使用详解

    本文实例讲述了jQuery中find与each方法用法.分享给大家供大家参考.具体如下: 一.find()方法 jquery选择器非常强大,利用css的命名规约,可以更快更方便的找出想要的元素. 图解 ...

  3. jQuery中$.ajax()和$.getJson()同步处理详解

    一.前言 为什么需要用到同步,因为有时候我们给一个提交按钮注册提交表单数据的时候,在提交动作之前会进行一系列的异步ajax请求操作,但是页面js代码会按顺序从上往下面执行,如果你在这过程中进行了异步操 ...

  4. jQuery中mouseleave和mouseout的区别详解

    很多人在使用jQuery实现鼠标悬停效果时,一般都会用到mouseover和mouseout这对事件.而在实现过程中,可能会出现一些不理想的状况. 先看下使用mouseout的效果: <p> ...

  5. Jquery中attr与prop的区别详解

    prop()函数的结果: 1.如果有相应的属性,返回指定属性值. 2.如果没有相应的属性,返回值是空字符串. attr()函数的结果: 1.如果有相应的属性,返回指定属性值. 2.如果没有相应的属性, ...

  6. 在ASP.NET 5应用程序中的跨域请求功能详解

    在ASP.NET 5应用程序中的跨域请求功能详解 浏览器安全阻止了一个网页中向另外一个域提交请求,这个限制叫做同域策咯(same-origin policy),这组织了一个恶意网站从另外一个网站读取敏 ...

  7. JQuery动画animate的stop方法使用详解

    JQuery动画animate的stop方法使用详解 animate语法: 复制代码 代码如下: $(selector).animate(styles,speed,easing,callback) 复 ...

  8. js数组中foEach和map的用法详解 jq中的$.each和$.map

    数组中foEach和map的用法详解 相同点: 1.都是循环遍历数组(仅仅是数组)中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项value, ...

  9. Java中堆内存和栈内存详解2

    Java中堆内存和栈内存详解   Java把内存分成两种,一种叫做栈内存,一种叫做堆内存 在函数中定义的一些基本类型的变量和对象的引用变量都是在函数的栈内存中分配.当在一段代码块中定义一个变量时,ja ...

  10. Python中操作mysql的pymysql模块详解

    Python中操作mysql的pymysql模块详解 前言 pymsql是Python中操作MySQL的模块,其使用方法和MySQLdb几乎相同.但目前pymysql支持python3.x而后者不支持 ...

随机推荐

  1. JS支持可变参数(任意多个)

    <script type="text/javascript"> function abc(){ //js中有个变量arguments,可以访问所有传入的值 for(va ...

  2. RF脚本中的坑2: pip下载python库时报certificate verify failed

    用pip命令下载第三方library时,报错certificate verify failed,截图如下: 在网上找了各种教程,包括修改了pip下载源地址也无效果,最后祭出了杀手锏——FQ,FQ成功后 ...

  3. 转载:em(倍)与px的区别

    转载出处:http://www.cnblogs.com/showker/archive/2010/05/24/1742821.html 在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝色理 ...

  4. Matlab Colour Theme

    [转]http://blog.csdn.net/df865017/article/details/48164429 使用MATLAB进行编码时, 长时间面对白底黑字的屏幕, 眼睛会疼! 因此, 选择一 ...

  5. Codeforces 396A 数论,组合数学

    题意:给一个a数组,求b 数组的方案数,但是要求两者乘积相同. 分析: 不可能将它们乘起来,对于每个数质因数分解,得到每个质因子个数,遍历这些质因子,将某个质因子放到 对应的盒子里面,可以不放,方案数 ...

  6. [18/11/29] 继承(extends)和方法的重写(override,不是重载)

    一.何为继承?(对原有类的扩充) 继承让我们更加容易实现类的扩展. 比如,我们定义了人类,再定义Boy类就只需要扩展人类即可.实现了代码的重用,不用再重新发明轮子(don’t  reinvent  w ...

  7. SpringBoot 使用(三): 配置文件详解

    代码从开发到测试要经过各种环境,开发环境,测试环境,demo环境,线上环境,各种环境的配置都不一样,同时要方便各种角色如运维,接口测试, 功能测试,全链路测试的配置,hardcode 肯定不合适,如S ...

  8. 【luogu P3128 [USACO15DEC]最大流Max Flow】 题解

    题目链接:https://www.luogu.org/problemnew/show/P3128 菜 #include <cstdio> #include <cstring> ...

  9. UGUI防止点击穿透

    if (!IsPointerOverGameObject(Input.mousePosition)) { } public static bool IsPointerOverGameObject(Ve ...

  10. 标准对象——RegExp

    字符串是编程时涉及到的最多的一种数据结构,对字符串进行操作的需求无处不在.比如判断一个字符串是否是合法的Email地址,虽然可以编程提取@前后的子串,再分别判断是否是单词和域名,但这样麻烦且代码难以复 ...