jquery ajax基础

最新推荐文章于 2025-06-27 10:46:03 发布

戴维南

最新推荐文章于 2025-06-27 10:46:03 发布

阅读量664

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/yangnuowei88/article/details/8907341

jquery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用JQuery实现AJAX加载远程HTML内容，并解析返回的数据。重点讲解了$.load方法的使用及其回调函数的应用，同时对比了$.get方法处理XML文件的方式。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
//1、创建Ajax的方式，可以直接为包装器创建，这样，ajax之后的内容会自动加载到包装器中
/*
在URL中可以通过空格来插入相应的选择器，以下表示去01.html页面中获取id为c的元素加载进来
*/
//$("#content").load("01.html #c");（如果没有#c就是加载整个的HTML文档）
//当使用了第二参数传值之后，就自动转换为post请求（如果想用get方式那么就在01.html后面加入？参数名= 参数值（多参数用&隔开））
$("#content").load("01.html",{id:11},function(data){
  //function这个回调函数表示，加载完成之后的一些处理方式
  //1、已经是完成了对content这个内容的处理之后才会调用该函数
  //alert(data);（打印出来的值是html内容）

  /*
  特别注意以下讲解：
  首先data是一个html类型的值，通过$(data)之后，会讲这个值包装为JQuery对象

（最开始的时候我以为 01.html 后面加入#c后就data应该是过滤后的东西，结果不是还是html文档的完整内容，但是加入到#content的东西是过滤过的！）
  在jQuery中包装一个document是这样来处理，会将所有body中的根节点包装到包装器中
  */
  /*
   <h1>哈哈哈！加载成功</h1>
   <div id="c">
    呵呵呵！加载成功
    <div id="c1">
    这个是C1中的内容
    </div>
   </div>
  */
  //如果要获取h1的值,因为h1是根对象，会被包装到包装器中，只能通过filter来获取
  alert($(data).filter("h1").html());
  //id为c1的元素是包装器中的元素，所以需要通过find来获取
  alert($(data).find("#c1").html());

  alert($(data).filter("#c").html());
});
});
</script>
</head>
<body>
<h1>使用JQuery实现Ajax</h1>
<div id="content"></div>
</body>
</html>

（打印出整个HTML）

（html方法是打印出匹配元素的内容，现在C里面的内容的div什么的业给弄了出来，而H1里面只有文字所以，如果不想要c1里面的div等这个时候你用text()方法就好，还有救是html只能用在html里面，text html 和XML都可以用）

-------------------------------------------------------------------------------------------------------------------------------分割------------------------------------------------------------------------------------------

/*$.get("02.xml",function(data) {
  //如果使用的返回类型是xml的话，data就是一个xml的元素
  //alert(data.getElementsByTagName("h1").length);
  //如果处理的是xml只能通过text来去元素，不支持html()取元素
  //特别注意:得到的值不会把根对象包装在包装器中，都需要通过find来找元素，这和前面的load事有区别的
  alert($(data).find("person").text());
},"xml");*/

（这就是传说中的get方法了，这个与load的区别是他不在需要你用一个包装集去调用，用全局的$,就能调用，然后如果是XML方式，那么02.xml必须是一个标准的xml）