JQuery -- Jquery 中的Ajax, Jquery解析xml文件

最新推荐文章于 2022-09-06 21:30:25 发布

今晚打酱油8

最新推荐文章于 2022-09-06 21:30:25 发布

阅读量968

点赞数

分类专栏： Ajax JavaScript 前台页面制作

本文链接：https://blog.csdn.net/xj626852095/article/details/19327823

版权

Ajax JavaScript 前台页面制作专栏收录该内容

73 篇文章 1 订阅

订阅专栏

1. JQuery 对 Ajax 操作进行了封装,在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post(),第三层是$.getScript() 和$.getJSON()

load()方法 是 jQuery 中最为简单和常用的 Ajax 方法 , 能载入远程的 HTML 代码并插入到 DOM 中 . 它的结构是 : load(url[, data][,callback])

程序员只需要使用 jQuery 选择器为 HTML 片段指定目标位置 , 然后将要加载的文件的 url 做为参数传递给 load() 方法即可

传递方式 : load() 方法的传递参数根据参数 data 来自动自定 . 如果没有参数传递 , 采用 GET 方式传递 , 否则采用 POST 方式

对于必须在加载完才能继续的操作 , load() 方法提供了回调函数 , 该函数有三个参数 : 代表请求返回内容的 data; 代表请求状态的 textStatus 对象 ( 其值可能为 : succuss, error, notmodify, timeout 4 种 ) 和 XMLHttpRequest 对象

方法的返回值是 jQuery

如果只需要加载目标 HTML 页面内的某些元素 , 则可以通过 load() 方法的 URL 参数来达到目的 . 通过 URL 参数指定选择符 , 就可以方便的从加载过来的 HTML 文档中选出所需要的内容 . load() 方法的 URL 参数的语法结构为 “url selector” ( 注意 : url 和选择器之间有一个空格 )

$.get()或$.post() 方法 使用 GET 方式来进行异步请求 . 它的结构是 : $.get(url[, data][, callback][, type]);

$.get() 方法的回调函数只有两个参数 : data 代表返回的内容 , 可以是 XML 文档 , JSON 文件 , HTML 片段等 ; textstatus 代表请求状态 , 其值可能为 : succuss, error, notmodify, timeout 4 种 .

方法的返回值:XMLHttpRequest对象

$.get() 和 $.post() 方法是 jQuery 中的全局函数 , 而 find() 等方法都是对 jQuery 对象进行操作的方法

数据序列化 jQuery 为准备 “发送到服务器的 key/value 数据” 提供了一个简化的方法 : serialize(). 该方法作用于一个 jQuery 对象 , 能将 DOM 元素内容序列化为字符串 , 用于 Ajax 请求 .

var xmlHpptReq=$.get("base01.jsp",{username:"aa",psw:"8888"});

var xmlHpptReq=$.get("base01.jsp",$("#form1").serialize());

使用 serialize() 方法可以自动完成对参数的 url 编码

因为该方法作用于 jQuery 对象 , 所以不光只要表单能使用 , 其它选择器选取的元素也能使用它 .

示例1： load()方法使用

load1.html 客户端页面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>ddd</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script language="JavaScript" src="../js/jquery-1.4.2.js">
        </script>
        <style type="text/css">
            div, span {
                width: 140px;
                height: 140px;
                margin: 20px;
                background: #9999CC;
                border: #000 1px solid;
                float: left;
                font-size: 17px;
                font-family: Roman;
            }
            
            div.mini {
                width: 30px;
                height: 30px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family: Roman;
            }
            
            div.visible {
                display: none;
            }
        </style>
        <!--引入jquery的js库-->
    </head>
    <body>
        <form action="" name="form1" id="form1">
            <input type="text" name="username" id="username" value="zhang">
            <br>
            <input type="text" name="psw" id="psw" value="99999">
            <br>
            <input type="button" id="b1" value="登陆">
        </form>
        <div id="one">
        </div>
    </body>
    <script language="JavaScript">
    	
		$("#b1").click(function(){
			
			/*
			 * load(url,data,callback)
			 * 		* jquery对象调用load()方法，返回内容会自动写入jquery对象内
			 * 		* url：请求路径
			 * 		* data：请求数据，以key/value形式，json数据格式
			 * 		* callback：回调函数，function(data,textStatus,XMLHttpRequest){}
			 * 			* data：代表请求返回内容
			 * 			* textStatus：代表请求状态,其值可能为: succuss, error, notmodify, timeout 4 种
			 * 			* XMLHttpRequest对象
			 * 
			 * 		* load()方法的请求类型：
			 * 			* 如果客户端没有向服务器端发送请求数据，那么请求类型就是"GET"方式
			 * 			* 如果客户端向服务器端发送请求数据，那么请求类型就是"POST"方式
			 * 			* load()方法的请求类型，是根据有没有向服务器端发送数据决定的。
			 */
			var json = {
				username:$("#username").val(),
				psw:$("#psw").val()
			}
			
			$("#one").load("load01.jsp",json,function(data,textStatus,XMLHttpRequest){
				alert(data);
			});
			
		});
    
    </script>
</html>

load1.jsp 模拟服务器端处理

<%@ page language="java" pageEncoding="UTF-8"%>
<%

	System.out.println("请求类型：	"+request.getMethod());
	System.out.println("connection server success!");
	
	System.out.println("username = "+request.getParameter("username"));
	System.out.println("psw = "+request.getParameter("psw"));
	

	out.println("Hello World!");

%>

示例2：$.get() $.post() 方法使用

get.html 客户端页面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.3.1.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div.mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div.visible{
				display:none;
			}
	 </style>
	 <!--引入jquery的js库-->
    
	</head>
	 
	<body>
		<form action="" name="form1" id="form1">
			<input type="text" name="username" id="username" value="zhang"><br>
			<input type="text" name="psw" id="psw" value="99999"><br>
	        <input type="button" id="b1" value="登陆">
		</form>
		
		<div id="one">
		</div>
		
	</body>
<script language="JavaScript">
		
//		$("#b1").click(function(){
//			
//			/*
//			 * get(url,data,callback,type)
//			 * 		* url：请求路径
//			 * 		* data：请求数据，以key/value形式，json数据格式
//			 * 		* callback：function(data,textstatus){}
//			 * 			* data：代表返回的内容，可以是 XML 文档, JSON 文件, HTML 片段等
//			 * 			* textstatus：代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种
//			 * 		* type：返回内容格式，xml, html, script, json, text, _default。
//			 * 
//			 * 		* 返回值:XMLHttpRequest
//			 * 
//			 * 		* get()方法无论发送不发送请求数据，请求类型都是"GET"方式
//			 */
//			var json = {
//				username:$("#username").val(),
//				psw:$("#psw").val()
//			}
//			
//			$.get("get.jsp",json,function(data,textstatus){
//				alert(data);
//			});
//			
//		});
		
		$("#b1").click(function(){
			
			/*
			 * post(url,data,callback,type)
			 * 		* url：请求路径
			 * 		* data：请求数据，以key/value形式，json数据格式
			 * 		* callback：function(data,textstatus){}
			 * 			* data：代表返回的内容，可以是 XML 文档, JSON 文件, HTML 片段等
			 * 			* textstatus：代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种
			 * 		* type：返回内容格式，xml, html, script, json, text, _default。
			 * 
			 * 		* 返回值:XMLHttpRequest
			 * 
			 * 		* post()方法无论发送不发送请求数据，请求类型都是"POST"方式
			 */
//			var json = {
//				username:$("#username").val(),
//				psw:$("#psw").val()
//			}

			//序列化元素 序列化以name属性为参数名
			var json = $("#form1").serialize();
			
			$.post("get.jsp",json,function(data,textstatus){
				alert(data);
			});
			
		});
</script>
</html>

get.jsp 模拟服务器端处理

<%@ page language="java" pageEncoding="UTF-8"%>
<%
	
	System.out.println(request.getMethod());
	
	System.out.println("post connection server success!");
	
	System.out.println(request.getParameter("username"));
	System.out.println(request.getParameter("psw"));
	

	out.println("Hello World!");

%>

2. Jquery 解析xml文件

JQuery 可以通过 $.get() 或 $.post() 方法来加载 xml.

JQuery 解析 XML 与解析 DOM 一样 , 可以使用 find(), children() 等函数来解析和用 each() 方法来进行遍历

示例：二级连菜单，解析xml配置文件

cities.xml 需要解析的xml文件

<?xml version="1.0" encoding="GB2312"?>
<china>
	<province name="吉林省">
		<city>长春</city>
		<city>吉林市</city>
		<city>四平</city>
		<city>松原</city>
		<city>通化</city>
	</province>
	<province name="辽宁省">
		<city>沈阳</city>
		<city>大连</city>
		<city>鞍山</city>
		<city>抚顺</city>
		<city>铁岭</city>
	</province>
	<province name="山东省">
		<city>济南</city>
		<city>青岛</city>
		<city>威海</city>
		<city>烟台</city>
		<city>潍坊</city>
	</province>
</china>

city.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>test01.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
	<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
  </head>
  <body>
     <select id="province" name="province">
       <option value="">请选择....</option>
     </select>
	 <select id="city" name="city">
	 	<option value="">请选择.....</option>
	 </select>
  </body> 
	<script language="JavaScript">
			
			/*
			 * jquery通过$.get()或者$.post()方法来解析并加载xml文件
			 * 
			 * 	* 以$.get(url,callback)方法为例
			 * 		* url：要解析的xml文件的路径
			 * 		* callback：回调函数，function(xml){}
			 * 			* xml：解析后的内容
			 */
			$.get("cities.xml",function(xml){
				var docXml = xml;
										
				//在jquery中使用标签名来查找对应标签，利用find()方法，传入标签名
				var $provinceXmlElements = $(docXml).find("province");
				
				$provinceXmlElements.each(function(index,domEle){
					var $provinceXmlValue = $(domEle).attr("name");
					
					/*
					 * <select id="province" name="province">
					       <option value="">请选择....</option>
					   </select>
					 */
					var $option = $("<option></option>");
					$option.attr("value",$provinceXmlValue);
					$option.text($provinceXmlValue);
					
					var $provinceElement = $("#province");
					$provinceElement.append($option);
					
 				});
				
				$("#province").change(function(){
					var $provinceValue = $("#province").val();
					
					//清空
					/*
					 * <select id="city" name="city">
						 	<option value="">请选择.....</option>
						 	<option value="长春">长春</option>
						 </select>
					 */
//					$("#city option[value!='']").each(function(index,domEle){
//						$(domEle).remove();
//					});
					
					$("#city option[value!='']").remove();
					
					
					
					$provinceXmlElements.each(function(index,domEle){
						var $provinceXmlValue = $(domEle).attr("name");
						
						if($provinceValue==$provinceXmlValue){
							var $cityXmlELements = $(domEle).find("city");
							var $firstcity;
							$cityXmlELements.each(function(index,domEle){
								
								if(index==0)
									$firstcity = $(domEle).text();	
								
								var $cityXmlValue = $(domEle).text();
								
								/*
								 * <select id="city" name="city">
									 	<option value="">请选择.....</option>
									 </select>
								 */
								var $option = $("<option></option>");
								$option.attr("value",$cityXmlValue);
								$option.text($cityXmlValue);
								
								var $cityElement = $("#city");
								$cityElement.append($option);
								
							});
							$("#city").val($firstcity);
						}
					});
				});
			});
			
	</script>
</html>

今晚打酱油8

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery -- Jquery 中的Ajax, Jquery解析xml文件

1. JQuery 对 Ajax 操作进行了封装,在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post(),第三层是$.getScript() 和$.getJSON()load()方法是jQuery 中最为简单和常用的Ajax 方法,能载入远程的 HTML 代码并插入到 DOM 中.它
复制链接

扫一扫