JQuery中的load()、$.get()和$.post()详解 （转）

load()

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

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

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

test.html
<!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></title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="comment">
 <h6>张三:</h6>
 <p class="para">沙发.</p>
</div>
<div class="comment">
 <h6>李四:</h6>
 <p class="para">板凳.</p>
</div>
<div class="comment">
 <h6>王五:</h6>
 <p class="para">地板.</p>
</div>
</body>
</html>

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

demo1.html
  • 1
<!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></title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* { margin:0; padding:0;}
body { font-size:12px;}
.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
.comment h6 { font-weight:700; font-size:14px;}
.para { margin-top:5px; text-indent:2em;background:#DDD;}
</style>
 <!--   引入jQuery -->
<script src="https://cdn.bootcss.com/jquery/1.7.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
  $(function(){
      $("#send").click(function(){
              $("#resText").load("test.html");
      })
  })
</script>
</head>
<body>
<input type="button" id="send" value="Ajax获取" />

<div  class="comment">
    已有评论：
</div>
<div id="resText" ></div>
</body>
</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中的

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

改为

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

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

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

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

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

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


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

$.get()

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

$.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()来实现评论的功能：

get1.html
  • 1
<!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></title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* { margin:0; padding:0;}
body { font-size:12px;}
.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
.comment h6 { font-weight:700; font-size:14px;}
.para { margin-top:5px; text-indent:2em;background:#DDD;}
</style>
 <!--   引入jQuery -->
<script src="../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
    $(function(){
       $("#send").click(function(){
            $.get("get1.php", {
                        username :  $("#username").val() ,
                        content :  $("#content").val()
                    }, function (data, textStatus){
                        $("#resText").html(data); // 把返回的数据添加到页面上
                    }
            );
       })
    })
//]]>
</script>
</head>
<body>
<form id="form1" action="#">
<p>评论:</p>
 <p>姓名: <input type="text" name="username" id="username" /></p>
 <p>内容: <textarea name="content" id="content"  rows="2" cols="20"></textarea></p>
 <p><input type="button" id="send" value="提交"/></p>
</form>

<div  class=‘comment‘>已有评论：</div>
<div id="resText" >
</div>

</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

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

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

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

$(function(){
       $("#send").click(function(){
            $.get("get1.php", {
                        username :  $("#username").val() ,
                        content :  $("#content").val()
                    }, function (data, textStatus){
                        $("#resText").html(data); // 把返回的数据添加到页面上
                    }
            );
       })
    })

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

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

XML文档

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

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

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

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

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

$(function(){
  $("#send").click(function(){
    $.get("get2.php", {
      username :  $("#username").val() ,
      content :  $("#content").val()
    }, function (data, textStatus){
      var username = $(data).find("comment").attr("username");
      var content = $(data).find("comment content").text();
      var txtHtml = "<div class=‘comment‘><h6>"+username+":</h6><p class=‘para‘>"+content+"</p></div>";
      $("#resText").html(txtHtml); // 把返回的数据添加到页面上
    },‘XML‘);
  });
})

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

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

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

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

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

$(function(){
      $("#send").click(function(){
            $.get("get3.php", {
                username :  $("#username").val() ,
                content :  $("#content").val()
            }, function (data, textStatus){
                var username = data.username;
                var content = data.content;
                var txtHtml = "<div class=‘comment‘><h6>"+username+":</h6><p class=‘para‘>"+content+"</p></div>";
        $("#resText").html(txtHtml); // 把返回的数据添加到页面上
            },"json");
       });
    })

在上面的代码中，将$.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请求之间切换。
代码如下：

$(function(){
  $("#send").click(function(){
    $.post("post1.php", {
      username :  $("#username").val() ,
      content :  $("#content").val()
    }, function (data, textStatus){
      $("#resText").html(data); // 把返回的数据添加到页面上
    });
  })
})

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()方法

原文地址：https://www.cnblogs.com/liuxingleiyu/p/8169518.html

时间： 2024-07-31 10:24:40

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

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

一.前言 为什么需要用到同步,因为有时候我们给一个提交按钮注册提交表单数据的时候,在提交动作之前会进行一系列的异步ajax请求操作,但是页面js代码会按顺序从上往下面执行,如果你在这过程中进行了异步操作,那么获取不到当前异步操作返回的结果,js会继续执行下一条语句,所以我们需要同步操作请求获取后台返回数据结果后,判断结果是否符合再执行js下一条语句. 二.$.ajax()参数解释 url: 发送请求的地址. type: 请求方式(post或get)默认为get. timeout: 要求为Numb

jQuery中mouseleave和mouseout的区别详解

很多人在使用jQuery实现鼠标悬停效果时,一般都会用到mouseover和mouseout这对事件.而在实现过程中,可能会出现一些不理想的状况. 先看下使用mouseout的效果: <p>先看下使用mouseout的效果:</p> <div id="container" style="width: 300px;"> <div id="title" style="cursor: pointer;

CSS3中的弹性流体盒模型技术详解(一)

从这篇文章开始,会利用几个篇幅,我将跟大家分享 从CSS1到CSS3都是如何实现页面布局的(当然,所指的范畴是利用CSS技术). 由于盒子模型技术内容比较多,这篇文章我将着重讲解知识点. 下一篇文章,我会带领大家开发一个兼容 pc端浏览器和 移动端浏览器的弹性布局web界面的实例.希望大家能从中领受到CSS3在布局方面的强大功能. 好了,长话短说,现在开始我们的<CSS3中的弹性流体盒模型技术详解>之旅吧! 在讲解CSS3中新增的弹性布局属性之前,我们先回顾一下CSS1 和 CSS2中都已经定

JQuery Easy Ui （Tree树）详解（转）

JQuery Easy Ui (Tree树)详解(转) 第一讲:JQuery Easy Ui到底是什么呢? 首先咱们知道JQuery是对Java Script的封装,是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等.. JQuery ui是在jQuery的基础上,利用jQuery的扩展性,设计的插件. 那么JQuery Easy Ui到底是什么呢? 我的理解就是比JQuery ui更强大,同样都是实现绚丽的多功能效果! jQuery Easy UI的目的就是帮助Web开发者更轻松的打

CSS3中的弹性流体盒模型技术详解

先回顾一下CSS1 和 CSS2中都已经定义了哪些布局方面的属性,这样也会增加我们理解弹性布局. 其实我们现在有很多一部分人,你们刚刚接触CSS层叠样式表,或者接触有一段时间了,但是却没有很好的去消化与理解.可能平时你们还一直在使用table,然后通过不断了合并单元格来实现网页布局.希望我今天的这篇文章能彻底改变大家的观念. Q:如何理解盒子模型? A:大家可以想一想,在现实生活中,如果我们拿一个盒子来装东西,那么盒子里面的东西是不是跟这个盒子之间会有空隙呢?站在里面物品的角度,则它们之间的间隙

jquery插件图片延时加载实例详解(转)

jquery插件图片延时加载实例详解 效果预览:http://keleyi.com/keleyi/phtml/image/index.htm 使用方法:1.导入JS插件 <script src="http://keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js" type="text/javascript"></script> <script src="http://keleyi.com/

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

在ASP.NET 5应用程序中的跨域请求功能详解 浏览器安全阻止了一个网页中向另外一个域提交请求,这个限制叫做同域策咯(same-origin policy),这组织了一个恶意网站从另外一个网站读取敏感数据,但是一些特殊情况下,你需要允许另外一个站点跨域请求你的网站. 跨域资源共享(CORS:Cross Origin Resources Sharing)是一个W3C标准,它允许服务器放宽对同域策咯的限制,使用CORS,服务器可以明确的允许一些跨域的请求,并且拒绝其它的请求.CORS要比JSONP

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

JQuery动画animate的stop方法使用详解 animate语法: 复制代码 代码如下: $(selector).animate(styles,speed,easing,callback) 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Testing</title> <link rel="styl

jquery ajax 的 $.get（）用法详解

js文件 $(document).ready(function(){ $("form").submit(function(event) {event.preventDefault()})//取消submit的默认行为 $("form input[type='submit']").click(function(){ var url = $('form').attr('action'); // 取Form中要提交的链接 var param = {}; // 组装发送参数

PHP中的命名空间(namespace)及其使用详解

PHP中的命名空间(namespace)及其使用详解 晶晶 2年前 (2014-01-02) 8495次浏览 PHP php自5.3.0开始,引入了一个namespace关键字以及__NAMESPACE__魔术常量(当然use关键字或use as嵌套语句也同时引入):那么什么是命名空间呢?php官网已很明确的进行了定义并形象化解释,这里直接从php官网copy一段文字[来源]. “什么是命名空间?从广义上来说,命名空间是一种封装事物的方法.在很多地方都可以见到这种抽象概念.例如,在操作系统中目录