demo.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>
<head>
<title>jquery xml解析</title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
$.ajax( {
url : "xx.xml",
success : function(xml) {
$(xml).find("province").each(function() {
var t = $(this).attr("name");//this->
$("#DropProvince").append(
"<option>" + t + "</option>");
});
}
});
$("#DropProvince").change(
function() {
$("#sCity>option").remove();
var pname = $("#DropProvince").val();
$.ajax( {
url : "xx.xml",
success : function(xml) {
$(xml).find(
"province[name='" + pname
+ "']>city").each(
function() {
$("#sCity").append(
"<option>"
+ $(this)
.text()
+ "</option>");
});
}
});
});
});
</script>
</head>
<body>
<form id="form1">
<div>
<select id="DropProvince" style="width: 60px;">
<option>请选择</option>
</select>
<select id="sCity" style="width: 60px;">
</select>
</div>
</form>
</body>
</html>
xx.xml
<?xml version="1.0" encoding="utf-8" ?>
<provinces>
<province name="湖北">
<city>武汉</city>
<city>黄石</city>
<city>宜昌</city>
<city>天门</city>
</province>
<province name="湖南">
<city>邵阳</city>
<city>长沙</city>
<city>岳阳</city>
</province>
<province name="广东">
<city>广州</city>
<city>深圳</city>
</province>
</provinces>
从这个例子中学到了很多..
有联动菜单的思路..ajax解析xml方式..以及ajax的代码..
很受启发!
分享到:
相关推荐
这个例子结合了MVC架构模式、JQuery库、Ajax技术,实现了用户登录验证和无刷新分页功能。数据库采用SQL Server 2005,利用其强大的数据存储和管理能力。无刷新分页提升了用户体验,JQuery简化了前端代码,而MVC结构...
这可以通过监听第一个下拉框的change事件,然后发送Ajax请求获取新的选项数据,最后更新第二个下拉框。自动补全功能常用于输入框,当用户输入时,后台会返回匹配的建议列表。这通常结合keyup事件和$.ajax()实现,...
这就是一个基础的jQuery与AJAX结合的例子。在VS2005 C#环境下,你还可以利用ASP.NET的其他特性,如控件、数据绑定等,来进一步增强应用的功能。同时,jQuery的`.ajax()`方法还有许多可配置的选项,如设置请求头、...
本文将深入探讨一个完整的jQuery+AJAX传输请求的实例,旨在帮助开发者理解如何有效地使用这两种技术实现异步数据通信。 首先,jQuery是一个强大的JavaScript库,它为DOM操作、事件处理、动画效果和Ajax交互提供了...
总结起来,"jQuery+Ajax例子"是一个展示如何在MyEclipse环境下使用jQuery进行Ajax请求的实践项目。它涵盖了jQuery的Ajax方法、与Java后端的交互以及开源精神的应用,对于理解Web开发中的异步通信具有很高的参考价值...
然而,在这个例子中,我们将重点放在jQuery的AJAX函数上,因为它是跨平台的,并且更加灵活。 jQuery的AJAX函数`$.ajax()`是核心。它允许我们创建一个异步HTTP(GET或POST)请求,从而在不刷新整个页面的情况下获取...
jQuery,一个轻量级、功能丰富的JavaScript库,结合AJAX(异步JavaScript和XML)技术,可以实现动态、高效的分页效果。本篇文章将深入探讨jQuery AJAX分页的原理与实践,通过具体的实例来展示如何实现炫酷的分页功能...
2. jQuery:这是一个JavaScript库,极大地简化了JavaScript的使用,提供了一种更简单的方式来处理DOM操作、事件处理、动画效果和AJAX交互。jQuery的核心特性是选择器,它允许开发者快速定位并操作DOM元素。 3. Ajax...
在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和Ajax交互。本示例主要关注jQuery结合Ajax实现的分页功能,这种技术允许用户在不刷新整个页面的情况下加载新的内容,提高了...
jQuery 是一个流行的JavaScript库,它简化了DOM操作、事件处理、动画以及AJAX交互。AJAX(Asynchronous JavaScript and XML)是一种在不重新加载整个网页的情况下,能够更新部分网页的技术。在这个实例源码中,我们...
load()方法 、 $.get()和$.post()方法 、 $.getScript()和$.getJson() 、 $.ajax()方法 、 ...jQuery中的Ajax全局事件 这些都有详尽的例子,一看代码,你就能明白jquery里实现ajax是怎么回事了,简单明了。
标题“jquery的ajax例子无错版”表明这是一个关于jQuery AJAX用法的示例,且已针对可能出现的编码问题进行了处理,确保在utf_8和gb2312两种常见字符编码下都能正常显示,避免了乱码问题。在多语言网站或者处理中文...
下面是一个简单的例子: ```javascript $.ajax({ url: '/ajaxCall', type: 'POST', data: {param1: 'someValue'}, success: function(response) { // 在这里处理服务器返回的数据 console.log(response); }...
在IT行业中,jQuery是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理以及与服务器的数据交互。在给定的标题和描述中,主要涉及两个关键知识点:使用jQuery的AJAX方法读取TXT文件和实现jQuery分页功能...
jQuery是一个高效、简洁、易用的JavaScript库,它极大地简化了JavaScript的使用,包括Ajax操作。本篇文章将重点围绕jQuery中的Ajax应用进行详细讲解。 在“ajax例子—jquery相关例子”这个主题中,我们主要关注的是...
在Web开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和Ajax交互。Ajax(异步JavaScript和XML)技术则允许我们在不刷新整个页面的情况下更新部分网页内容,而JSON(JavaScript Object...
"jqueryAjax_无刷新调用另一页实例"这个标题意味着我们将探讨如何利用jQuery的AJAX功能实现页面的动态加载。 首先,jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计以及AJAX交互。...
"jQuery AJAX简易计算器"是一个实用示例,展示了如何利用jQuery和AJAX实现一个简单的动态计算功能。通过这个项目,开发者可以学习到如何在客户端和服务器之间有效地交换数据,以及如何更新页面内容而无需刷新整个...
在提供的"jQueryAjax完整拖动实例"中,可能包含了一个实现页面元素拖动功能的例子。这种功能通常利用jQuery的`mousedown()`, `mousemove()`, 和 `mouseup()`事件来跟踪用户的鼠标动作,同时使用Ajax来更新服务器端的...