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

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>

JQuery -- Jquery 中的Ajax, Jquery解析xml文件的更多相关文章

在java项目中怎样利用Dom4j解析XML文件获取数据
在曾经的学习.net时常常会遇到利用配置文件来解决项目中一些须要常常变换的数据.比方数据库的连接字符串儿等.这个时候在读取配置文件的时候.我们一般会用到一个雷configuration,通过这个类来进 ...
Android中的几种解析XML文件的类
Ø DOM解析优点: 1.XML树在内存中完整存储,因此可以直接修改其数据和结构. 2.可以通过该解析器随时访问XML树中的任何一个节点. 3.DOM解析器的API在使用上也相对比较简单. 缺点:如 ...
Android pull解析xml文件
本文介绍android中使用pull来解析xml文件先自己写一个xml文件,存一些天气信息 <?xml version="1.0" encoding="UTF-8 ...
jQuery ajax解析xml文件demo
解析xml文件,然后将城市列表还原到下拉列表框中:当选择下拉列表框时,在对应的文本框中显示该城市信息. 前端代码: <!doctype html> <html> <hea ...
jquery插件中使用ajax并且获取使用插件的对象
jquery插件中使用ajax后无法在里面获取this 解决办法是在函数内使用ajax前声明变量 $this=this 然后再ajax中使用$this
Ajax实现xml文件数据插入数据库（一）--- 构建解析xml文件的js库
Ajax实现将xml文件数据插入数据库的过程所涉及到的内容比较多,所以对于该过程的讲解本人打算根据交互的过程将其分为三个部分,第一部分为构建解析xml文件的javascript库,第二部分为ajax与 ...
JAVA中使用DOM解析XML文件
XML是一种方便快捷高效的数据保存传输的格式,在JSON广泛使用之前,XML是服务器和客户端之间数据传输的主要方式.因此,需要使用各种方式,解析服务器传送过来的信息,以供使用者查看. JAVA作为一种 ...
java中采用dom4j解析xml文件
一.前言在最近的开发中用到了dom4j来解析xml文件,以前听说过来解析xml文件的几种标准方式:但是从来的没有应用过来,所以可以在google中搜索dmo4j解析xml文件的方式,学习一下dom4 ...
XML：使用DOM技术解析xML文件中的城市，实现select级联选择
中国的城市xml格式:cities.xml <?xml version="1.0" encoding="utf-8"?> <china> ...

随机推荐

【BZOJ2927】[Poi1999]多边形之战博弈
[BZOJ2927][Poi1999]多边形之战 Description 多边形之战是一个双人游戏.游戏在一个有n个顶点的凸多边形上进行,这个凸多边形的n-3条对角线将多边形分成n-2个三角形,这n- ...
巨蟒python全栈开发数据库前端3:CSS基础2
1.文本属性 2.背景属性 3.边框属性 4.display属性 5.盒子模型
使用Dell R710 IDRAC挂载虚拟介质
Dell DRAC,虚拟介质分离或所选虚拟磁盘驱动器的虚拟介质重定向已由另一用户使用 DELL Idrac 一台Dell的R710服务器,远程管理器后发现虚拟介质无法映射,一直提示“虚拟介质分离或所选 ...
for and range()
pyhon 中 for 循环可以遍历任何序列的项目,如一个字典或者一个字符. for 循环格式一般如下: for <variable-变量> in <sequence-序列>: ...
django博客项目3：创建 Django 博客的数据库模型
设计博客的数据库表结构博客最主要的功能就是展示我们写的文章,它需要从某个地方获取博客文章数据才能把文章展示出来,通常来说这个地方就是数据库.我们把写好的文章永久地保存在数据库里,当用户访问我们的博客 ...
SIP穿越NAT SIP穿越防火墙-SBC
FireWall&NAT FireWall是一种被动网络安全防卫技术,位于网络的边界.在两个网络之间运行訪问控制策略.防止外部网络对内部信息资源的非法訪问,也能够阻止特定信息从内部网络被非法输 ...
跨平台编译CMake使用
CMake是一个跨平台的安装(编译)工具,可以用简单的语句来描述所有平台的安装(编译过程).他能够输出各种各样的makefile或者project文件,能测试编译器所支持的C++特性,类似UNIX下的 ...
day3-set集合
set是一个无序且不重复的元素集合 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 3 ...
Delphi 正则表达式语法(4): 常用转义字符与 .
Delphi 正则表达式语法(4): 常用转义字符与 . // \d 匹配所有数字, 相当于 [0-9] var reg: TPerlRegEx; begin reg := TPerlRegE ...
SqlHelper简单实现（通过Expression和反射）5.Lambda表达式解析类
这个ExpressionHelper类,是整个SqlHelper中,最核心的一个类,主要功能就是将Lambda表达式转换为Sql语句.同时这个转换过程比较复杂,所以下面详细讲解一下思路和这个类的作用. ...

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

JQuery -- Jquery 中的Ajax, Jquery解析xml文件的更多相关文章

随机推荐

热门专题