JQuery -- Jquery 中的Ajax, Jquery解析xml文件
1. JQuery 对
Ajax 操作进行了封装,在
jQuery 中最底层的方法时
$.ajax(), 第二层是
load(), $.get() 和 $.post(),第三层是$.getScript()
和$.getJSON()
load()方法是jQuery
中最为简单和常用的Ajax
方法,能载入远程的
HTML 代码并插入到
DOM 中.它的结构是:
load(url[, data][,callback])
中最为简单和常用的Ajax
方法,能载入远程的
HTML 代码并插入到
DOM 中.它的结构是:
load(url[, data][,callback])
程序员只需要使用 jQuery
选择器为 HTML 片段指定目标位置,然后将要加载的文件的
url 做为参数传递给
load() 方法即可
选择器为 HTML 片段指定目标位置,然后将要加载的文件的
url 做为参数传递给
load() 方法即可
传递方式: load()
方法的传递参数根据参数 data
来自动自定. 如果没有参数传递,采用
GET 方式传递,否则采用
POST 方式
方法的传递参数根据参数 data
来自动自定. 如果没有参数传递,采用
GET 方式传递,否则采用
POST 方式
对于必须在加载完才能继续的操作, load()方法提供了回调函数,
该函数有三个参数:
代表请求返回内容的data; 代表请求状态的
textStatus 对象(其值可能为: succuss, error, notmodify, timeout 4种)和XMLHttpRequest
对象
该函数有三个参数:
代表请求返回内容的data; 代表请求状态的
textStatus 对象(其值可能为: succuss, error, notmodify, timeout 4种)和XMLHttpRequest
对象
方法的返回值是 jQuery
如果只需要加载目标 HTML
页面内的某些元素, 则可以通过load()
方法的 URL
参数来达到目的.通过
URL 参数指定选择符,就可以方便的从加载过来的
HTML文档中选出所需要的内容. load()方法的
URL 参数的语法结构为
“url selector”(注意: url和选择器之间有一个空格)
页面内的某些元素, 则可以通过load()
方法的 URL
参数来达到目的.通过
URL 参数指定选择符,就可以方便的从加载过来的
HTML文档中选出所需要的内容. load()方法的
URL 参数的语法结构为
“url selector”(注意: url和选择器之间有一个空格)
$.get()或$.post() 方法使用GET
方式来进行异步请求.它的结构是: $.get(url[, data][, callback][, type]);
方式来进行异步请求.它的结构是: $.get(url[, data][, callback][, type]);
$.get() 方法的回调函数只有两个参数:data
代表返回的内容,可以是
XML 文档, JSON
文件, HTML片段等; textstatus代表请求状态,
其值可能为: succuss, error, notmodify, timeout 4种.
代表返回的内容,可以是
XML 文档, JSON
文件, HTML片段等; textstatus代表请求状态,
其值可能为: succuss, error, notmodify, timeout 4种.
方法的返回值:XMLHttpRequest对象
$.get() 和
$.post() 方法是 jQuery中的全局函数,
而 find()
等方法都是对jQuery 对象进行操作的方法
$.post() 方法是 jQuery中的全局函数,
而 find()
等方法都是对jQuery 对象进行操作的方法
数据序列化 jQuery为准备 “发送到服务器的
key/value数据” 提供了一个简化的方法: serialize().该方法作用于一个
jQuery对象,
能将DOM 元素内容序列化为字符串,用于
Ajax 请求.
key/value数据” 提供了一个简化的方法: serialize().该方法作用于一个
jQuery对象,
能将DOM 元素内容序列化为字符串,用于
Ajax 请求.
var xmlHpptReq=$.get("base01.jsp",{username:"aa",psw:"8888"});
var xmlHpptReq=$.get("base01.jsp",$("#form1").serialize());
使用 serialize()
方法可以自动完成对参数的 url
编码
方法可以自动完成对参数的 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.
$.get() 或 $.post()
方法来加载 xml.
JQuery 解析
XML 与解析 DOM
一样, 可以使用
find(), children() 等函数来解析和用
each() 方法来进行遍历
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> ...
随机推荐
- Linux磁盘管理命令（fdisk，mount，umount，mkfs）
查看磁盘:fdisk -l 一块磁盘可以分14个分区 [root@wendyhost ~]# fdisk -l Disk /dev/sda: 64.4 GB, 64424509440 bytes 25 ...
- 高德js API moveAlong 函数的一个错误解决
使用覆盖物之一:点标记,让点标记沿着固定的路线移动. API 提供了现成的函数 moveAlong() 开始以为 实现移动很简单:分两部 1.准备好经纬度数组 2.调用moveAlong()函数.按照 ...
- 高德地图 js api 使用
使用高德地图js api 制作网页上的地图应用. 1.先申请一个 开发者用的 key . 2. 在页面中引入高德提供的地图js <script src="http://webapi. ...
- 一篇搞定vue-router
由于Vue常见于前后端分离开发场景下,所以页面跳转工作全部交给了前端,所以基于集中管理的原则,就有了vue-router插件,它给定了url和组件之间的跳转规则 Demo准备 vue init web ...
- 2015-03-22——js常用的String方法
String string.charAt(pos); //返回字符串中pos位置处的字符.如果pos小于0或大于等于string.length返回空字符串.模拟实现:Function.prototy ...
- 使用数组初始化list
ArrayList<String> names = new ArrayList<String>(Arrays.asList("Delete","I ...
- UML_visio安装及使用
安装:百度云安装visio 64bit 类图在visio当中 用例图 来自为知笔记(Wiz)
- Git 快速入门--Git 基础
Git 快速入门 Git 基础 那么,简单地说,Git 究竟是怎样的一个系统呢? 请注意接下来的内容非常重要,若你理解了 Git 的思想和基本工作原理,用起来就会知其所以然,游刃有余. 在开始学习 G ...
- PolyBase--整合SQLServer和Hadoop
我们一直强调,大数据和传统的关系数据库并不对立,未来公司的的业务将会是大数据和关系型数据库的整合.微软的PolyBase打响了SQL Server和Hadoop整合的第一枪. 在2012年度的SQL ...
- 什么是EventLoop
Event Loop 是一个很重要的概念,指的是计算机系统的一种运行机制. JavaScript语言就采用这种机制,来解决单线程运行带来的一些问题. 本文参考C. Aaron Cois的<Und ...