ajax++jsp二级联动下拉框,无刷新分页资源-CSDN文库资源-CSDN文库

共4个文件

txt：2个

doc：2个

5星 · 超过95%的资源需积分: 16 51 浏览量 2012-04-23 14:35:55 上传评论 1 收藏 92KB RAR 举报

**Ajax技术介绍** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它的核心是利用JavaScript与服务器进行异步数据交换，通过XML或者JSON格式传输数据，使得用户界面更加动态，提高了用户体验。 **JSP（JavaServer Pages）与Ajax结合** JSP是Java的一种动态网页技术，它允许开发者在HTML中嵌入Java代码，实现服务器端的动态生成。当JSP与Ajax结合时，可以在用户交互过程中，通过Ajax发送请求到服务器，处理特定任务，然后将结果返回给客户端，所有这些操作都在后台完成，无需刷新整个页面。 **二级联动下拉框** 二级联动下拉框是一种常见的前端交互设计，常用于选择项关联的场景。例如，一个省市区选择的例子，当你选择一个省份后，下拉框会自动更新为对应省份的城市列表。这种效果是通过Ajax实现的，当用户在一级下拉框中做出选择时，触发Ajax事件，向服务器发送请求获取对应的数据，然后在二级下拉框中动态填充这些数据。 **无刷新查询** 无刷新查询是Ajax的重要应用之一，它实现了在用户输入查询条件后，无需点击“搜索”按钮或刷新页面即可实时显示查询结果。这大大提升了用户的交互体验，尤其是在大数据量的搜索场景下。在本示例中，用户可能只需要在输入框中输入关键词，Ajax会监听输入事件，每当输入变化时，向服务器发送请求，服务器返回匹配的数据，前端则动态展示出来。 **Ajax异步** Ajax的异步特性是其关键优势。在传统的HTTP请求中，浏览器会等待服务器的响应，直到请求完成才会执行后续代码。而Ajax请求是异步的，这意味着浏览器可以继续执行其他任务，不需等待Ajax请求的完成。这样，用户可以一边查看页面其他内容，一边等待数据加载，提高了网页的响应速度和用户体验。 **文件详解** - `51CTO下载-Ajax.doc`: 这个文档可能详细解释了Ajax的基本概念、工作原理以及如何在实际项目中使用Ajax。 - `51CTO下载-Ajax异步.doc`: 可能深入探讨了Ajax的异步特性，包括如何处理异步回调、状态监控等。 - `51CTO下载-ajax++jsp二级联动下拉框.txt`: 这个文本文件可能提供了实现JSP与Ajax结合的二级联动下拉框的代码示例或步骤说明。 - `51CTO下载-ajax实现无刷新查询.txt`: 文件内容可能涉及如何使用Ajax实现无刷新查询，包括查询事件监听、请求发送、数据处理及展示的流程。以上就是关于"ajax++jsp二级联动下拉框,无刷新分页"这一主题的相关知识点，涵盖了Ajax、JSP、二级联动下拉框和无刷新查询等多个方面。通过这些技术，开发者可以创建出更高效、更友好的Web应用程序。

资源推荐

资源详情

资源评论

收起资源包目录

jsp+ajax.rar （4个子文件）

51CTO下载-ajax实现无刷新查询.txt 3KB

51CTO下载-Ajax异步.doc 26KB

51CTO下载-ajax++jsp二级联动下拉框.txt 27KB

51CTO下载-Ajax.doc 514KB

var req; function Change_Select() {// 当第一个下拉框的选项发生改变时调用该函数 var province = document.getElementById('province').value; var url = "SelectServlet?id=" + escape(province) + "&time = " + new Date(); if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); } if (req) { req.open("POST", url, true); // 指定回调函数为callback req.onreadystatechange = callback; req.send(null); } } // 回调函数 function callback() { if (req.readyState == 4) { if (req.status == 200) { parseMessage();// 解析XML文档 } else { alert("不能得到描述信息:" + req.statusText); } } } // 解析返回xml的方法 function parseMessage() { var xmlDoc = req.responseXML.documentElement; // 获得返回的XML文档 var xSel = xmlDoc.getElementsByTagName('select'); // 获得XML文档中的所有<select>标记 var select_root = document.getElementById('city'); // 获得网页中的第二个下拉框 select_root.options.length = 0; // 每次获得新的数据的时候先把每二个下拉框架的长度清0 for ( var i = 0; i < xSel.length; i++) { var xValue = xSel[i].childNodes[0].firstChild.nodeValue; // 获得每个<select>标记中的第一个标记的值,也就是<value>标记的值 var xText = xSel[i].childNodes[1].firstChild.nodeValue; // 获得每个<select>标记中的第二个标记的值,也就是<text>标记的值 var option = new Option(xText, xValue); // 根据每组value和text标记的值创建一个option对象 try { select_root.add(option);// 将option对象添加到第二个下拉框中 } catch (e) { } } } <select name="province" id="province" onChange="Change_Select()" style="width: 100px"> 　　 　　<option value="0" selected>--请选择--</option> 　　<% for (int i = 0; i < listProvince.size(); i++) { 　　　　　　Province province = listProvince.get(i); 　　　%> 　 <option value="<%=province.getId() %>"><%=province.getpName() %></option> <%}%> </select> <select name="city" id="city" style="width: 100px">  <option value="0">--请选择--</option> </select> package com.lxw.weibo.common; import java.io.IOException; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.springframework.beans.factory.BeanFactory; import org.springframework.context.support.ClassPathXmlApplicationContext; import com.lxw.weibo.model.City; import com.lxw.weibo.service.CityManager; public class SelectServlet extends HttpServlet { public SelectServlet() { super(); } public void destroy() { super.destroy(); } public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); request.setCharacterEncoding("GBK"); response.setCharacterEncoding("UTF-8"); String targetId = request.getParameter("id").toString(); BeanFactory factory = new ClassPathXmlApplicationContext("applicationContext-common.xml"); CityManager um = (CityManager) factory.getBean("cityManager"); List<City> cityList = (List<City>)um.getCityByProvince(Integer.parseInt(targetId)); // 获得请求中参数为id的值 String xml_start = "<selects>"; String xml_end = "</selects>"; String xml = ""; xml += "<select><value>0</value><text>--请选择--</text></select>"; if (targetId.equalsIgnoreCase(targetId)) { for (int j = 0; j < cityList.size(); j++) { City city = (City) cityList.get(j); xml += "<select><value>" + city.getId() + "</value>" +"<text>"+ city.getcName() + "</text></select>"; } } String last_xml = xml_start + xml + xml_end; response.getWriter().write(last_xml); System.out.println(last_xml); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doGet(request, response); } } <filter-mapping> <filter-name>struts2</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <filter-mapping> <filter-name>struts2</filter-name> <url-pattern>*.jsp</url-pattern> </filter-mapping> <filter-mapping> <filter-name>struts2</filter-name> <url-pattern>*.action</url-pattern> </filter-mapping> 第二个例子 index.jsp <%@ page language="java" pageEncoding="UTF-8"%> <html> <head> <title>二级菜单联动演示</title> <script type="text/javascript"> var req; window.onload=function() {//页面加载时的函数 } function Change_Select(){//当第一个下拉框的选项发生改变时调用该函数 var province = document.getElementByIdx('province').value; var url = "select?id="+ escape(province); if(window.XMLHttpRequest){ req = new XMLHttpRequest(); }else if(window.ActiveXObject){ req = new ActiveXObject("Microsoft.XMLHTTP"); } if(req){ req.open("GET",url,true); //指定回调函数为callback req.onreadystatechange = callback; req.send(null); } } //回调函数 function callback(){ if(req.readyState ==4){ if(req.status ==200){ parseMessage();//解析XML文档 }else{ alert("不能得到描述信息:" + req.statusText); } } } //解析返回xml的方法 function parseMessage(){ var xmlDoc = req.responseXML.documentElement;//获得返回的XML文档 var xSel = xmlDoc.getElementsByTagName_r('select'); //获得XML文档中的所有<select>标记 var select_root = document.getElementByIdx('city'); //获得网页中的第二个下拉框 select_root.options.length=0; //每次获得新的数据的时候先把每二个下拉框架的长度清0 for(var i=0;i<xSel.length;i++){ var xValue = xSel[i].childNodes[0].firstChild.nodeValue; //获得每个<select>标记中的第一个标记的值,也就是<value>标记的值 var xText = xSel[i].childNodes[1].firstChild.nodeValue; //获得每个<select>标记中的第二个标记的值,也就是<text>标记的值 var option = new Option(xText, xValue); //根据每组value和text标记的值创建一个option对象 try{ select_root.add(option);//将option对象添加到第二个下拉框中 }catch(e){ } } } </script> </head> <body> <div align="center"> <form name="form1" method="post" action=""> <table width="70%" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center"> 二级联动示例 </td> </tr> <tr> <td> <select name="province" id="province" onChange="Change_Select()">  <option value="0"> 请选择 </option> <option value="1"> 北京 </option> <option value="2"> 天津 </option> <option value="3">

评论收藏

内容反馈