jQuery学习教程二十四: jQuery

来源：互联网发布：ajax过程 js 编辑：程序博客网时间：2024/06/05 16:17

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> 元素中：

示例

<!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>

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

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

实例

<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){  $("button").click(function(){    $("#div1").load("/example/jquery/demo_test.txt #p1");  });});</script></head><body><div id="div1"><h2>使用 jQuery AJAX 来改变文本</h2></div><button>获得外部内容</button></body></html>

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

responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象

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

实例

<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){  $("button").click(function(){    $("#div1").load("/example/jquery/demo_test.txt",function(responseTxt,statusTxt,xhr){      if(statusTxt=="success")        alert("外部内容加载成功！");      if(statusTxt=="error")        alert("Error: "+xhr.status+": "+xhr.statusText);    });  });});</script></head><body><div id="div1"><h2>使用 jQuery AJAX 来改变文本</h2></div><button>获得外部内容</button></body></html>

jQuery Ajax 操作函数

jQuery 库拥有完整的 Ajax 兼容套件。其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。

函数描述jQuery.ajax()执行异步 HTTP (Ajax) 请求。.ajaxComplete()当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。.ajaxError()当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。.ajaxSend()在 Ajax 请求发送之前显示一条消息。jQuery.ajaxSetup()设置将来的 Ajax 请求的默认值。.ajaxStart()当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。.ajaxStop()当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。.ajaxSuccess()当 Ajax 请求成功完成时显示一条消息。jQuery.get()使用 HTTP GET 请求从服务器加载数据。jQuery.getJSON()使用 HTTP GET 请求从服务器加载 JSON 编码数据。jQuery.getScript()使用 HTTP GET 请求从服务器加载 JavaScript 文件，然后执行该文件。.load()从服务器加载数据，然后把返回到 HTML 放入匹配元素。jQuery.param()创建数组或对象的序列化表示，适合在 URL 查询字符串或 Ajax 请求中使用。jQuery.post()使用 HTTP POST 请求从服务器加载数据。.serialize()将表单内容序列化为字符串。.serializeArray()序列化表单元素，返回 JSON 数据结构数据。

0 0