紧接上文

一、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实现的更多相关文章

  1. MVC中处理表单提交的方式（Ajax+Jquery）

    MVC中处理表单有很多种方法,这里说到第一种方式:Ajax+Jquery 先看下表单: <form class="row form-body form-horizontal m-t&q ...

  2. 30+最佳Ajax jQuery的自动完成插件的例子

    在这篇文章中,我们将介绍35个jQuery AJAX的自动完成提示例子. jQuery 的自动完成功能,使用户快速找到并选择一定的价值.每个人都想要快速和即时搜索输入栏位,因为这个原因,许 流行的搜索 ...

  3. AJAX JQuery 调用后台方法返回值（不刷新页面）

    AJAX JQuery 调用后台方法返回值(不刷新页面) (1)无参数返回值(本人亲试返回结果不是预期结果) javascript方法: $(function () {             //无 ...

  4. Ajax&jQuery教案总结

    Ajax&jQuery教程总结 目录 第一章 Ajax入门 6 第1讲 传统表单提交存在的问题 6 课程内容 6 1. 问题的引入 6 2. 问题的解决 6 参考进度(0.5课时) 7 第2讲 ...

  5. 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能

    使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下 ...

  6. Struts2+AJAX+JQuery 实现用户登入与注册功能。

    要求 必备知识 JAVA/Struts2,JS/JQuery,HTML/CSS基础语法. 开发环境 MyEclipse 10 演示地址 演示地址 预览截图(抬抬你的鼠标就可以看到演示地址哦): 关于U ...

  7. Ajax jquery的库的简化版本

    Ajax jquery的库的简化版本 (function(){    //面向外界的唯一变量接口!    var myajax = window.myajax = {};    //作者.版本号等等信 ...

  8. Struts2+AJAX+JQuery 实现用户登入与注册功能

    要求:必备知识:JAVA/Struts2,JS/JQuery,HTML/CSS基础语法:开发环境:MyEclipse 10 关于UI部分请查看下列链接,有详细制作步骤: 利用:before和:afte ...

  9. HTML5 + AJAX ( jQuery版本 ) 文件上传带进度条

    页面技术:HTML5 + AJAX ( jQuery) 后台技术:Servlet 3.0 服务器:Tomcat 7.0 jQuery版本:1.9.1 Servlet 3.0 代码 package or ...

  10. Python菜鸟之路：原生Ajax/Jquery Ajax/IFrame Ajax的选用

    原生Ajax Jquery Ajax IFrame Ajax 如果发送的是普通的数据,比如用户简单的输入.选择的值,推荐使用Jquery ,其次用XMLHttpRquest对象,最次使用IFrame ...

随机推荐

  1. Chrome 的审查元素功能有哪些奇技淫巧

    学习地址: https://www.zhihu.com/question/34682699

  2. C#去除数组空格

    static void Main(string[] args) { "}; Console.WriteLine("输出带有空字符串的数组:"); foreach (str ...

  3. SVN1.6服务端和客户端安装配置指导

    本节向大家描述SVN1.6服务端和客户端安装配置步骤,随着SVN的快速发展,版本也进行了升级更新,本节就和大家一起学习一下SVN1.6服务端和客户端安装配置步骤,欢迎大家一起来学习.下面是具体介绍.1 ...

  4. FPGA简单概述

    中国FPGA市场及人才需求 如今毕业生的就业问题十分严峻,特别是计算机专业的毕业生.通过对FPGA目前发展情况的分析和市场岗位的调查,结合高职高专生在FPGA岗位的定位,制定相应的教学计划,使高职高专 ...

  5. 【转】Jmeter做web压力测试时设置持续时间注意点

    头一回使用jmeter做web的压力测试,遇到个很莫名其妙的问题,不管我的线程组怎么设置,它就是执行一次就结束了. 设置循环次数为300,不使用调度器--〉执行一次就结束了,循环次数未生效 设置循环次 ...

  6. 权益保护-知识产权：知识产权（IP）百科

    ylbtech-权益保护-知识产权:知识产权(IP)百科 知识产权,也称其为“知识所属权”,指“权利人对其智力劳动所创作的成果和经营活动中的标记.信誉所依法享有的专有权利”,一般只在有限时间内有效.各 ...

  7. 1147 Heaps

    1147 Heaps(30 分) In computer science, a heap is a specialized tree-based data structure that satisfi ...

  8. 1088 Rational Arithmetic

    题意: 给出两个分式(a1/b1 a2/b2),分子.分母的范围为int型,且确保分母不为0.计算两个分数的加减乘除,结果化为最简的形式,即"k a/b",其中若除数为0的话,输出 ...

  9. tomcat7.0在centos7下中文乱码问题解决汇总

    1. 系统级的中文设置 Centos7跟之前的6和5安装的中文字符命令都不一样 [root@iZ25bdzgev8Z ~]# locale #查看当前系统的语言环境 [root@iZ25bdzgev8 ...

  10. DFT的理解

    在以前学习的离散傅立叶变换(DFT),总是不能理解只是知道公式 X(k) = Σx(n) * WNnk    ,也不知道如何得来的. 现在可以聊聊了,因为最近在使用MATLAB实际的操作了所以比以前了 ...