Ajax——jQuery实现

Posted Wayfo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ajax——jQuery实现相关的知识,希望对你有一定的参考价值。

紧接上文

一、load()方法

  • load() 方法师jQuery中最为简单和常用的Ajax方法,能载入远程的html代码并插入到DOM中。它的机构是:load(url[,data][,callback])
参数名称 类型 说明
url   String 请求HTML页面的URL地址
data(可选) Object 发送到服务器的key/value数据,json格式
callback(可选) Function 请求完成时的回调函数,无论请求成功或失败

①、方法细节

  • 如果只需要加载目标HTML页面的某些元素,则可以通过load()方法的URL参数来达到目的。通过URL参数指定选择符,就可以方便的从加载过来的HTML文档中选出所需要的内容。load()方法的URL参数的语法结构为“url selector”(注意:url和选择器之间有一个空格)
  • 传递方式:load()方法的传递参数根据参数data来自动自动。如果没有参数传递,采用GET方式传递,否则采用POST方式
  • 对于必须在加载完才能继续的操作,load()方法提供了回调函数,该函数有三个参数:代表请求返回内容的data;代表请求状态的textStatus对象和XMLHttpRequest对象

②、load方法的Demo

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <script type="text/javascript" src="../scripts/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
      $(function(){
            $("a").click(function(){
                  //选择HTML片段,h2 元素节点下的a节点
                  var url=this.href+" h2 a";
           //json格式的参数
var args={"time":new Date()};
//任何一个html节点都可以使用load方法来加载Ajax,结果将直接插入html节点中 $("#details").load(url,args); return false; }); }); </script> </head> <body> <h1>People</h1> <ul> <li><a href="files/andy.html">Andy</a></li> <li><a href="files/richard.html">Richard</a></li> <li><a href="files/jeremy.html">Jeremy</a></li> </ul> <div id="details"></div> </body> </html>

二、$.get()(或$.post())方法

  • $.get()方法使用GET方式来进行异步请求,它的结构是:$.get(url[,data][,callback][,type]);
参数名称 类型 说明
url                               String                请求HTML页面的URL地址
data(可选) Object 发送到服务器的key/value数据,附加到请求URL中,Json格式
callback(可选) Function 载入成功时回调函数(只有当Response的返回状态是success时才调用该方法)自动将请求结果和状态传递给该方法
type(可选) String 服务器返回内容的格式,包括XML,HTML,json,script,text和_default
  • $.get()方法的回调函数只有两个参数:data代表返回的内容,可以是XML文档,JOSN文件,HTML片段等;textstatus代表请求状态,其值可能为:success,error,notmodify和timeout 4种。 

①、解析XML格式数据

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
  <script type="text/javascript" src="../scripts/jquery-1.4.2.js"></script>
  <script type="text/javascript">
      $(function(){
        $("a").click(function(){
            var url=this.href;
            var args={"time":new Date()};
            $.get(url,args,function(data){
         //将Dom对象转换为jQuery对象
var name=$(data).find("name").text(); var email=$(data).find("email").text(); var website=$(data).find("website").text();
         //向父元素节点追加子节点前,先清空父元素 $(
"#details").empty() .append("<h2><a href=\'mailto:"+email+"\'>"+name+"</a></h2>") .append("<a href=\'"+website+"\'>"+website+"</a>"); }); return false; }); }) </script> </head> <body> <h1>People</h1> <ul> <li><a href="files/andy.xml">Andy</a></li> <li><a href="files/richard.xml">Richard</a></li> <li><a href="files/jeremy.xml">Jeremy</a></li> </ul> <div id="details"></div> </body> </html>

②、解析JOSN格式数据

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
<script type="text/javascript" src="../scripts/jquery-1.4.2.js"></script>
  <script type="text/javascript">
  //url:ajax请求的目标url
  //args:传递的参数:json类型
  //data:ajax响应成功后的数据,可能是xml,html,json
      $(function(){
        $("a").click(function(){
            var url=this.href;
            var args={"time":new Date()};
            //使用$.getJSON方法回调函数返回的数据是json对象 
            $.getJSON(url,args,function(data){
                var name=data.person.name;
                var email=data.person.eamil;
                var website=data.person.website;
                $("#details").empty()
                        .append("<h2><a href=\'mailto:"+email+"\'>"+name+"</a></h2>")
                        .append("<a href=\'"+website+"\'>"+website+"</a>");
                });
            return false;

        });
      })          
  </script>
  </head>
  
  <body>
    <h1>People</h1>
    <ul>
        <li><a href="files/andy.js">Andy</a></li>
           <li><a href="files/richard.js">Richard</a></li>
           <li><a href="files/jeremy.js">Jeremy</a></li>
    </ul>
    <div id="details"></div>
  </body>
</html>

其他方式

$.get(url,args,function(data){


},"JSON")

$.post(url,args,function(data){


},"JSON")

以上是关于Ajax——jQuery实现的主要内容,如果未能解决你的问题,请参考以下文章

十条jQuery代码片段助力Web开发效率提升

Javascript代码片段在drupal中不起作用

html PHP代码片段: - AJAX基本示例:此代码演示了使用PHP和JavaScript实现的基本AJAX功能。

jQuery高级Ajax

使用 JQuery ajax 在 DOM 操作后附加事件

使用 Jquery 的同步“Ajax”调用似乎不起作用