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> ...

随机推荐

mongodb3.0+ 版本内置数据压缩
mongodb3+版本之后支持zlib和snappy. 创建压缩的集合 db.createCollection( "email", {storageEngine:{wiredTig ...
文件操作 - 三元运算/chardet/文件操作r w/文件的操作方法
Alex:读书可以改变一个人的气质读书:豆瓣: 1年读20本你的问题:想法太多,读书太少书:追风筝的人,白鹿原电影:阿甘正传辛德勒名单---------------------------- ...
转！！Tomcat网站上的core和deployer的区别
转自:https://www.cnblogs.com/guxia/p/6678184.html 8.5.13 Please see the README file for packaging info ...
MongoDB资料汇总（转）
原文:MongoDB资料汇总上一篇Redis资料汇总专题很受大家欢迎,这里将MongoDB的系列资料也进行了简单整理.希望能对大家有用. 最后更新时间:2013-04-22 1.MongoDB是什么 ...
Tensorflow神经网络进行fiting function
使用Tensorflow中的神经网络来拟合函数(y = x ^ 3 + 0.7) # -*- coding:utf-8 -*-import tensorflow as tf import numpy ...
用pytesseract识别验证码报错
运行py文件出现下面报错 pytesseract.pytesseract.TesseractError: (1, 'Error opening data file \\Program Files\\T ...
java基本类型和包装器类
java是一种面向对象语言,java中的类把方法与数据连接在一起,并构成了自包含式的处理单元.但在java中不能定义基本类型(primitive type),为了能将基本类型视为对象来处理,并能连接相 ...
CNN学习笔记：激活函数
CNN学习笔记:激活函数激活函数激活函数又称非线性映射,顾名思义,激活函数的引入是为了增加整个网络的表达能力(即非线性).若干线性操作层的堆叠仍然只能起到线性映射的作用,无法形成复杂的函数.常用的 ...
Top 10 Uses For A Message Queue
We’ve been working with, building, and evangelising message queues for the last year, and it’s no se ...
28. Implement strStr()(KMP字符串匹配算法)
Implement strStr(). Return the index of the first occurrence of needle in haystack, or -1 if needle ...

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

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

随机推荐

热门专题