ajax二联动

合集下载

两天时间用AJAX写了个无限级的多级联动菜单(ajax+PHP构架)

花了两天时间。

研究ＡＪＡＸ，终于独立完成一个无限组的多级菜单联动功能。

主要特点：就是ＨＴＭＬ静态页面可以无刷新的与ＰＨＰ动态角本文件及数据库交互（这也是ＡＪＡＸ的核心目的）。

以下把代码贴出来。

供大家参考指正：ajax.js文件（位于根目录下js子目录）var xmlHttp;function createXmlHttp(){if(window.XMLHttpRequest){xmlHttp=new XMLHttpRequest();}else{xmlHttp=new ActiveXObject("Microsoft.XMLHttp");}}basic_inc.php(位于根目录下/include子目录下)<?php$DB_SERVER="localhost";$DB_NAME="ajax";$DB_USER="root";$DB_PASSWORD="";?>conn.php(位于根目录下/include子目录下)<?phprequire_once("dir_inc.php");require_once($ROOT_DIR."include/basic_inc.php");@ $db=mysql_connect($DB_SERVER,$DB_USER) or die ("faile!".mysql_error());@mysql_select_db($DB_NAME);?>dir_inc.php（位于根目标下/include子目录下）<?php$ROOT_DIR="../";?>select_menu.html(位于根目录下是核心前台文件)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>select_menu</title><script type="text/javascript" src="js/ajax.js">//这里引用创建xmlHttp对像的文件（对浏览器做过判断）</script><script type="text/javascript">var targetSelId; //申明一个全局变量用来存放当前要操作的对像的ＩＤvar selArray;//申明一个全局数组。

实验.Ajax二级联动

Ajax的应用实验目的：通过用EditPlus直接编写带javascript的HTML文件，实现用户名简单验证和二级联动的功能，理解Ajax的基本工作原理，并初步掌握Ajax应用的开发过程。

:实验步骤：一、使用记事本建立一个基本的HTML文件,输入如下代码：保存文件为：html格式：<HTML><HEAD><TITLE> 用户信息</TITLE></HEAD><BODY><form action = "" method = "post" name=”form1”><table border = 3 id = "table1" ><caption><center>用户信息</center></caption><tr> <td>请输入昵称:</td><td> <input type = "text" id = "username" name = "username"></td> </tr> <tr> <td>请输入密码:</td><td><input type = "password" id = "password1" name = "password1"></td> </tr> <tr> <td>请确认密码:</td><td><input type = "password" id = "password2" name = "password2"></td> </tr> <tr> <td> 爱好:</td><td><input type = "checkbox" name = "checkbox1" value = "1" id= "Favirate1"> 足球<input type = "checkbox" name = "checkbox1" value = "2" id= "Favirate2"> 上网<input type = "checkbox" name = "checkbox1" value = "3" id= "Favirate3"> 音乐<input type = "checkbox" name = "checkbox1" value = "4" id= "Favirate4"> 看书</td> </tr><tr> <td>性别:</td><td> <input type = "radio" name = "sex" checked>男<input type = "radio" name = "sex">女</td></tr><tr> <td>所在地区</td><td> <select size = "1" name = "city" tabindex = "5" id = "city"><option selected value = "河北市">河北市</option><option value = "安徽省">安徽省</option></select> </tr><tr> <td colspan="2" align="center"><input type = "submit" id = "reg" value = "提交"><input type = "reset" id = "reset" value = "重置"></td></tr></table></form></BODY></HTML>对其中的昵称的表单值用Ajax方式进行后台校验，要求后台判断用户注册的用户名是否已注册，并返回提示信息。

ajax两级联动下拉列表和显示相应数据

ajax两级联动下拉列表和显示相应数据
本人实现了 ajax 异步实现两级联动的下拉列表和分类显示数据：应该算是充分的实现例子，包含了 JS + CSS 的简单设计
显示：显示书籍大类 ----> 无刷新的显示相对应的书籍小类；
选择书籍小类时候，自动显示相应的书籍信息！
自己试试吧，试试才知道，很好用的
纯手写的实例，仅供学习探究！
Jsp页面：
<%@ page language="java" import="java.util.*,com.AjaxDemo.optionLists.Dao,java.sql.*;"
contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
table{
width: 500px;
text-align: center;
font: bold fantasy 25px;
}
td{
height:35px;
width: 95px;
border-bottom-width:1px;
border-bottom-color: orange;
border-bottom-style: solid;
}
书籍大类：
<%}}catch (SQLException e) {e.printStackTrace();}finally{data.close();} %>
书籍小类：
请选
择
书
籍
类
别
！。

ajax+java+jsp做的二级菜单联动（全）

ajax+java+jsp做的二级菜单联动（全）/*Navicat MySQL Data TransferSource Server : meetingroomMSSource Server Version : 50146Source Host : localhost:3306Source Database : skyTarget Server Type : MYSQLTarget Server Version : 50146File Encoding : 65001*/SET FOREIGN_KEY_CHECKS=0;-- ------------------------------ Table structure for `category`-- ----------------------------DROP TABLE IF EXISTS `category`;CREATE TABLE `category` (`id` int(11) NOT NULL DEFAULT '0',`name` varchar(50) DEFAULT NULL,`level` int(11) DEFAULT NULL,`parentid` int(11) DEFAULT NULL,PRIMARY KEY (`id`)) ENGINE=InnoDB DEFAULT CHARSET=utf8;-- ------------------------------ Records of category-- ----------------------------INSERT INTO `category` VALUES ('1', '数据库开发', '0', '0'); INSERT INTO `category` VALUES ('2', 'mysql5.0', '1', '0'); INSERT INTO `category` VALUES ('3', 'IBM DB2', '1', '0');INSERT INTO `category` VALUES ('4', 'Orcal', '1', '0'); INSERT INTO `category` VALUES ('5', 'web 开发', '0', '1'); INSERT INTO `category` VALUES ('6', 'asp', '1', '1'); INSERT INTO `category` VALUES ('7', 'jsp', '1', '1'); INSERT INTO `category` VALUES ('8', 'php', '1', '1'); INSERT INTO `category` VALUES ('9', '其他', '0', '2'); INSERT INTO `category` VALUES ('10', 'abc', '1', '2'); INSERT INTO `category` VALUES ('11', 'bbb', '1', '2'); INSERT INTO `category` VALUES ('12', 'ccc', '1', '2');========================本个数据库 Mysql 5.0 ,用户名:root ,密码：123一个类来获得数据库的 getCon()package com.xmlT est.yuan.DB;import java.sql.Connection;import java.sql.DriverManager;import java.sql.SQLException;public class ConnDB {public Connection getCon(){try {Class.forName("com.mysql.jdbc.Driver");} catch (ClassNotFoundException e) {// TODO Auto-generated catch blocke.printStackTrace();}String url = "jdbc:mysql://localhost:3306/sky"; Connection con = null;try {con = DriverManager.getConnection(url,"root","123");} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();}return con;}}----------------------index.jsp----------------------<%@ page language="java" import="java.util.*,com.xmlTest.yuan.DB.*,java.sql.*" pageEncoding="GBK"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+reque st.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><base href="<%=basePath%>"><title>ajax + java + jsp 做的二级菜单联动 </title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"> <script type="text/javascript"></script></head><body>This is my JSP page. kao <br><form name="form1" ><select name="select1" onchange="getLevel2()"><option >选择一级分类</option><%ConnDB cdb = new ConnDB();Connection con = cdb.getCon();Statement stmt = null;String sql = "select * from category where level=0";//String parentid = "2";//String sql = "select * from category where parentid="+parentid;ResultSet rs = null;try {stmt = con.createStatement();rs = stmt.executeQuery(sql);while(rs.next()){System.out.println(rs.getInt(4));rs.getInt(4);%><option value="<%=rs.getInt(4) %>"><%=rs.getString(2)%> </option><% }} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();}finally{try {rs.close();stmt.close();con.close();} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();}}%></select><select name="select2" ><option valer="0" >请选择。

PHPAJAX2级联动下拉列表（...

PHPAJAX2级联动下拉列表（...PHP+AJAX2级联动下拉列表（简单好用）这次给大家展示的是非常常用的一个ajax功能－－联动下拉列表，本程序采用2级联动，根据数据库的内容用ajax处理下拉列表内容，实现根据用户需求取得下拉选项，交互性强，更新容易。

废话少说，不如正题，这次依然象往常一样提供截图和源码下载，首先还是AJAX框架：var http_request=false;function send_request(url){//初始化，指定处理函数，发送请求的函数http_request=false;//开始初始化XMLHttpRequest对象if(window.XMLHttpRequest){//Mozilla浏览器http_request=new XMLHttpRequest();if(http_request.overrideMimeType){//设置MIME类别http_request.overrideMimeType("text/xml");}}else if(window.ActiveXObject){//IE浏览器try{http_request=new ActiveXObject("Msxml2.XMLHttp");}catch(e){try{http_request=new ActiveXobject("Microsoft.XMLHttp");}catch(e){}}}if(!http_request){//异常，创建对象实例失败window.alert("创建XMLHttp对象失败！");return false;}http_request.onreadystatechange=processrequest;//确定发送请求方式，URL，及是否同步执行下段代码http_request.open("GET",url,true);http_request.send(null);}//处理返回信息的函数function processrequest(){if(http_request.readyState==4){//判断对象状态if(http_request.status==200){//信息已成功返回，开始处理信息document.getElementById(reobj).innerHTML=http_request.respons eText;}else{//页面不正常alert("您所请求的页面不正常！");}}}function getclass(obj){var pid=document.form1.select1.value;document.getElementById(obj).innerHTML="<option>loading...</o ption>";send_request(‘doclass.php?pid=‘+pid);reobj=obj;}这个程序的核心就是动态添加<option>......</option>服务器端是进行数据的检索，很简单：<?phpheader("Content-type: text/html;charset=GBK");//输出编码,避免中文乱码$pid=$_GET[‘pid‘];$db=mysql_connect("localhost","root","7529639"); //创建数据库连接mysql_query("set names ‘GBK‘");mysql_select_db("menuclass");$sql="select classname from menu where parentid=".$pid."";$result=mysql_query($sql);//循环列出选项while($rows=mysql_fetch_array($result)){echo ‘<option>‘;echo $rows[‘classname‘];echo "</option>\n";}>再看看列表页面的html：<script language="javascript" src="ajaxmenu.js"></script><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>ajax2级联动菜单演示</title></head><body><form name="form1"><select name="select1" id="class1" style="width:100;" onChange="getclass(‘class2‘);"><option selected="selected"></option><option value="1">大类1</option><option value="2">大类2</option></select><select name="select2"id="class2" style="width:100;"></select></form></body></html>附件1.jpg(1.99 KB)2007-9-24 10:04PHP+AJAX2级联动下拉列表2.jpg(3.25 KB)2007-9-24 10:04PHP+AJAX2级联动下拉列表3.jpg(5.92 KB)2007-9-24 10:04PHP+AJAX2级联动下拉列表4.jpg(5.62 KB)2007-9-24 10:04PHP+AJAX2级联动下拉列表ajaxdemo.rar(1.66 KB)2007-9-24 10:05, 下载次数: 3PHP+AJAX2级联动下拉列表搜索更多相关主题的帖子: AJAX PHP列表台州南开技术小组专门用PHP+MYSQL技术进行Web(网站、平台、系统等)开发，凭借其开发产品的非凡速度、领先的技术优势、富于创新的开发团队，为众多行业门户、专业型站点提供最有优质的服务和技术保障。

第18章 Ajax动态联动菜单.

18.1 确定需求
• 首先需要确定联动菜单程序的需求。 • 采用Ajax加载选项数据。 • 级联层数无限制。 • 对外提供事件支持。 • 支持一对一、一对多、多对一、多对多的关联模
式。 • 可以动态修改关联关系。 • 支持JSON和XML两种数据格式。
18.2 基本设计
• 在确定需求后，现在对联动菜单程序进行基本设计。联动菜单基于JSVM搭建，使用17章中已经创建的Request类提供Ajax底层功能，并使用 EventManager类提供的事件兼容性封装。
代码实现如下所示。
18.4 测试
• 在实现SelectLoader类后，现在编写测试用例对该类的功能进行测试。测试用例包含3个文件，其中index.html如下所示。
第18章 Ajax动态联动菜单
• 联动菜单是指多个下拉框菜单组成一组菜单，下拉菜单之间有联动的关系。上级菜单的选中项改变时，下级菜单会根据上级菜单的选中项显示相应的选项内容。联动菜单在Web应用程序中应用非常广泛，例如用来呈现多级分类、显示省市级联等等。传统的联动菜单都是使用XML或者数组保存选项数据，这就要求在页面加载时加载所有的选项数据。当选项数据很庞大时，就会影响加载速度和影响速度。本章将向读者介绍如何创建一个基于Ajax的无限级联动菜单。

ajax嵌套ajax方法

ajax嵌套ajax方法
《Ajax嵌套Ajax方法》
Ajax嵌套Ajax是一种在一个Ajax请求中再发出另外一个或多个Ajax请求的方式，以实现更复杂的功能。

Ajax嵌套Ajax最常用的场景是在一个Ajax请求中发出另外一个Ajax请求，以获取相关的数据。

这种Ajax嵌套Ajax的方式可以让客户端获取远程服务器的数据，而无需重新加载整个页面，因此可以显著提高用户体验。

使用Ajax嵌套Ajax的方式来编写代码时，需要注意几点：
1. 嵌套请求的顺序。

Ajax嵌套Ajax有可能会出现多个请求发生在同一时间，因此需要按照一定的顺序，以免破坏原有的流程。

2. 减少嵌套层次。

Ajax嵌套Ajax如果层次过多，会使得代码变得非常复杂，对于程序的可维护性会造成很大的影响，因此需要尽量减少嵌套层次。

3. 回调函数的及时调用。

Ajax嵌套Ajax的请求需要使用回调函数来处理请求返回的数据，回调函数的及时调用对于嵌套Ajax的处理非常重要。

4. 确保所有请求都能够返回数据。

Ajax嵌套Ajax时，需要确保所有的请求都能够正确的返回数据，以防止出现异常的情况。

使用Ajax嵌套Ajax时，可以采用多种方式来实现，比如使用Promise对象，Async/Await等。

不管采用什么方式，在编写代码的时候，需要考虑这几点，以确保代码的正确运行。

ajax原理和实现步骤

ajax原理和实现步骤
Ajax的原理是利用前端的XMLHttpRequest对象与后端的服务
器进行异步通信，实现页面局部的更新。

实现步骤如下：
1. 创建XMLHttpRequest对象：使用`new XMLHttpRequest()`
创建一个新的XMLHttpRequest对象。

2. 设置回调函数：使用`onreadystatechange`属性设置一个回调
函数，在服务器响应发生改变时触发。

3. 打开请求：使用`open()`方法打开与服务器的连接，传入请
求的方法和URL。

4. 发送请求：使用`send()`方法将请求发送给服务器。

5. 监听状态变化：在回调函数中，使用`readyState`属性来判断服务器的响应状态，当`readyState`等于4时表示请求完成。

6. 处理服务器响应：通过`status`属性获取服务器的响应状态码，常见的有200表示成功，404表示未找到。

然后使用
`responseText`或者`responseXML`来获取服务器的响应数据。

7. 更新页面内容：通过获取到的响应数据，可以使用DOM操
作或者innerHTML来更新页面的内容。

以上就是Ajax实现的基本步骤，通过异步通信可以实现无需
刷新整个页面的数据更新。

Ajax二级联动简单实例

Ajax⼆级联动简单实例效果图：图1图2（浙江省内存在⼭东省的数据，原因是先前加⼊的数据未删除）思路：通过下拉省份，将省份id传⼊后台，根据省份塞⼊相应省份的市的数据，将市的数据再次传回前端前端HTML及JS代码：<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript">function loadInfo(){var shengId=document.getElementById("sheng").value;shi.options.length=0; // 页⾯加载前先删除所有市下拉框的选项，避免原先加⼊的市同时存在，即避免图⼆的情况出现var xmlHttp;if(window.XMLHttpRequest){xmlHttp=new XMLHttpRequest();}else{xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}xmlHttp.onreadystatechange=function(){if(xmlHttp.readyState==4 && xmlHttp.status==200){alert(xmlHttp.responseText);var dataObj=eval("("+xmlHttp.responseText+")");for(var i=0;i<dataObj.rows.length;i++){var o=dataObj.rows[i];shi.options.add(new Option(o.text,o.id));}}};xmlHttp.open("get", "getAjaxInfo?action=ejld&shengId="+shengId, true);xmlHttp.send();}</script></head><body>省：<select id="sheng" onchange="loadInfo()"><option value="1">江苏省</option><option value="2">⼭东省</option><option value="3">浙江省</option></select>  市<select id="shi"></select></body></html>后台servlet代码：public class GetAjaxInfoServlet extends HttpServlet{/****/private static final long serialVersionUID = 1L;@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {this.doPost(request, response);}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("text/html;charset=utf-8");String action=request.getParameter("action");if("checkUserName".equals(action)){this.checkUserName(request, response);}else if("ejld".equals(action)){this.ejld(request, response);}}private void checkUserName(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {PrintWriter out=response.getWriter();String userName=request.getParameter("userName");JSONObject resultJson=new JSONObject();if("jack".equals(userName)){resultJson.put("exist", true);}else{resultJson.put("exist", false);}out.println(resultJson);out.flush();out.close();}private void ejld(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {PrintWriter out=response.getWriter();String shengId=request.getParameter("shengId");JSONObject resultJson=new JSONObject();JSONArray jsonArray=new JSONArray();JSONObject temp=null;//以下为根据省ID模拟该省的市的数据switch(Integer.parseInt(shengId)){case 1:{temp=new JSONObject();temp.put("id", 1);temp.put("text", "南京");jsonArray.add(temp); temp=new JSONObject();temp.put("id", 2);temp.put("text", "南通");jsonArray.add(temp); temp=new JSONObject();temp.put("id", 3);temp.put("text", "泰兴");jsonArray.add(temp); break;}case 2:{temp=new JSONObject();temp.put("id", 4);temp.put("text", "济南");jsonArray.add(temp); temp=new JSONObject();temp.put("id", 5);temp.put("text", "烟台");jsonArray.add(temp); temp=new JSONObject();temp.put("id", 6);temp.put("text", "蓬莱");jsonArray.add(temp); break;}case 3:{temp=new JSONObject();temp.put("id", 7);temp.put("text", "杭州");jsonArray.add(temp); temp=new JSONObject();temp.put("id", 8);temp.put("text", "宁波");jsonArray.add(temp); temp=new JSONObject();temp.put("id", 9);temp.put("text", "温州");jsonArray.add(temp); break;}}resultJson.put("rows", jsonArray);out.println(resultJson);out.flush();out.close();}}Servlet在web.xml中的配置：<servlet><servlet-name>getAjaxInfoServlet</servlet-name><servlet-class>com.XXXXX.web.GetAjaxInfoServlet</servlet-class></servlet><servlet-mapping><servlet-name>getAjaxInfoServlet</servlet-name><url-pattern>/getAjaxInfo</url-pattern></servlet-mapping>。

使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例

使⽤Ajax和Jquery配合数据库实现下拉框的⼆级联动的⽰例⾸先我们需要先建⽴好数据库，将⼀些数据插⼊进去需要两张表：province：省份表city：城市表如图：然后再在java中建⽴相关的实体类与之对应再然后，我们就能开始做jdbc的操作了public class ConnectionFactory {private static String driver;private static String url;private static String user;private static String password;static {Properties prop = new Properties();//读取⽂件try {InputStream in = ConnectionFactory.class.getResourceAsStream("./jdbc.properties");prop.load(in);driver = prop.getProperty("jdbc.driver");url = prop.getProperty("jdbc.url");user = prop.getProperty("er");password = prop.getProperty("jdbc.password");} catch (IOException e) {e.printStackTrace();}}/*** 获取连接对象* @returnpublic static Connection getConnection(){Connection conn = null;try {Class.forName(driver);conn = DriverManager.getConnection(url, user, password);} catch (Exception e) {throw new RuntimeException(e);}return conn;}/*** 关闭资源* @param conn* @param pstmt* @param stmt* @param rs*/public static void close(Connection conn,PreparedStatement pstmt,Statement stmt,ResultSet rs){ try {if (conn != null) {conn.close();}if (pstmt != null) {pstmt.close();}if (stmt != null) {stmt.close();}if (rs != null) {rs.close();}} catch (SQLException e) {throw new RuntimeException(e);}}⾸先我们可以在页⾯加载的时候获取所有省份的信息，SQL语句如下Connection conn = null;PreparedStatement pstmt = null;Province province2 = null;@Overridepublic ArrayList<Province> findAllPro() {ResultSet rs = null;ArrayList<Province> pros = null;try {String sql = "select id,place from province";conn = ConnectionFactory.getConnection();pstmt = conn.prepareStatement(sql);pros = new ArrayList<Province>();rs = pstmt.executeQuery();while(rs.next()){Province province = new Province();province.setId(rs.getInt(1));province.setPlace(rs.getString(2));pros.add(province);}} catch (SQLException e) {throw new RuntimeException(e);}return pros;将查到的数据放到后台,建⽴⼀个SelectedServlet类，⽤于接收查询到的所有省份的信息response.setContentType("application/json;charset=utf-8");response.setCharacterEncoding("utf-8");request.setCharacterEncoding("utf-8");//创建⼀个Place对象ArrayList<Province> pros= new Place().findAllPro();PrintWriter out = response.getWriter();//将集合直接转换为Json对象out.write(JSONArray.fromObject(pros).toString());在这⾥会⽤到集合转换Json对象，我们需要导⼊以下⼏个包然后我们开始写前台页⾯：<body>省份:<select id="province"><option>--请选择省份--</option></select>城市:<select id="city"><option>--请选择城市--</option></select><br/><br/><span></span></body>然后jQuery代码如下:（由于我导⼊的jQuery版本⽐较低，所以使⽤的⽅法是getJSON，⽽不是getJson）$.getJSON("SelectedServlet",function(data,textStatus){var provinces = data;var res = "";for(var i =0;i<provinces.length;i++){<span style="white-space:pre"> </span>res += "<option>"+provinces[i].place+"</option>";}$("#province").append(res);});这样就能在页⾯加载的时候获取到数据然后我们再来做联动，⾸先给下拉框添加⼀个change事件，然后获取选中的信息，将选中的信息发送到另⼀个CityServlet中//下拉框改变时触发的事件$("#province").change(function(){var seled = $("option:selected").html();$("span").html(seled);$.getJSON("CityServlet",{"province":encodeURI(encodeURI(seled))},function(data){$("#city").html("");var citys = data;var res = "";for(var i = 0;i<citys.length;i++){res += "<option>"+citys[i].place+"</option>";}$("#city").append(res);});});服务器通过获得的信息通过sql语句查询出来，SQL代码如下：public ArrayList<City> findAllCityByPro(String name) {ResultSet rs = null;ArrayList<City> citys = null;try {//通过名字获得所有值String sql = "select c.city_place from city c ,"+ "province p where c.province_id = "+ " (select id from province where place = '"+ name +"') "+ " and c.province_id = p.id";conn = ConnectionFactory.getConnection();pstmt = conn.prepareStatement(sql);citys = new ArrayList<City>();System.out.println(sql);rs = pstmt.executeQuery();while(rs.next()){City city = new City();city.setPlace(rs.getString(1));citys.add(city);}System.out.println(citys);} catch (SQLException e) {e.printStackTrace();}return citys;}将查询到的数据发送到后台，后台接收到数据后将其转换为Json对象，并通过回调函数发送到前台，然后前台就可以通过事件直接获取到数据，⽽不⽤各种跳转页⾯，这就是Ajax(Asynchronous Javascript And XML),protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("application/json;charset=utf-8");response.setCharacterEncoding("utf-8");request.setCharacterEncoding("utf-8");// String proName = "浙江";String proName = URLDecoder.decode(URLDecoder.decode(request.getParameter("province"), "utf-8"),"utf-8");ArrayList<City> citys= new Place().findAllCityByPro(proName);PrintWriter out = response.getWriter();out.write(JSONArray.fromObject(citys).toString());}⾄于显⽰页⾯的代码也在前⾯写到jQuery语句中了效果如下：以上这篇使⽤Ajax和Jquery配合数据库实现下拉框的⼆级联动的⽰例就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

ajax接收二进制流简书

Ajax（Asynchronous JavaScript and XML）是一种用于在不重新加载整个页面的情况下，通过异步方式从服务器获取数据的技术。

通常情况下，Ajax主要用于接收和发送JSON或文本数据。

但有时候，可能需要通过Ajax接收二进制流，例如图片、音频或其他文件。

以下是使用Ajax接收二进制流的详细步骤：
1. 创建XMLHttpRequest对象
首先，创建一个XMLHttpRequest对象。

这是用于发起HTTP请求的关键对象。

2. 设置请求参数
设置HTTP请求的类型、URL和是否使用异步方式。

对于接收二进制流，需要将responseType属性设置为"arraybuffer"。

3. 注册事件处理程序
注册事件处理程序来处理请求的不同阶段，比如onload用于成功加载时的处理，onerror用于处理错误。

4. 发送请求
通过调用send方法来发送请求。

5. 处理二进制数据
在onload事件处理程序中，获得了二进制数据。

现在，根据需求进行处理。

例如，如果收到的是图片数据，可以将其转换为Base64编码或直接创建Blob对象。

这就是通过Ajax接收二进制流的基本步骤。

请注意，服务器端也需要正确配置，以便正确处理二进制数据的请求。

确保服务器返回正确的Content-Type头，指示返回的数据是二进制流。

Ajax与XML在二级联动列表菜单中的协同应用

收稿日期：2009 － 09 － 24 基金项目：安徽省自然科学基金资助项目（ KJ2009B140Z ）作者简介：王军号（ 1970 －），男，江苏赣榆人，硕士，实验师，研究方 123 @ 163 . com 向为计算机网络与多媒体技术。 E-mail ： wjh123-
［ 2］
。那么，运用 Ajax 与
XML 协同交互，在客户端加入一个沟通用户界面与服务器的中间层，实现页面呈现与应用的分离以及用户操作与服务器响应的异步化，从而使得二级列表菜单能够无刷新联动，并且可以按需取数据，大幅度地提高实现表单的无刷新提交，降低了页面重网页访问速度，
76 表1
属性 onreadystatechange readyState responseText responseXML
实
XMLHttpRequest 对象属性
描述
验
室
研
究
与
探
索
第 29 卷
中间层可以根据处理的需要，有选择地向服务器端异步请求数据，并且数据是使用 XML 格式封装从而在 Ajax 中间层与服务器端之间传输，减少了用户等待时间，优化了传输效率。
每个状态改变时都会触发这个事件处理器对象状态。0 －未初始化，1 －正在加载，2 －已加载，3 －交互中，4 = 完成服务器的响应，表现为一个文本串服务器的响应，表现为 XML 格式。可以解析为一个 DOM 对象服务器的 HTTP 状态码（ 200 表示 OK ，404 表示 NotFound 等）

ajax嵌套ajax方法

ajax嵌套ajax方法ajax嵌套ajax方法一、什么是Ajax嵌套Ajax？Ajax嵌套Ajax指的是在前端使用Ajax请求外部接口，请求到的数据有时候会包含内部接口数据，此时可以利用Ajax请求去请求内部接口，来获取更多数据，从而更好的实现前端信息展示。

二、为什么要使用Ajax嵌套Ajax？实际开发过程中，经常会遇到需求，前端需要获取外部接口数据，里面又包含有内部接口数据，此时就可以利用Ajax嵌套Ajax 的方式，获取更多数据，从而更好的实现前端信息展示。

三、Ajax如何嵌套Ajax？Ajax嵌套Ajax的实现原理就是在外部接口请求成功，获取到外部接口数据后，再发起内部接口请求，获取到内部接口数据后，再将外部和内部接口数据整合，就能实现Ajax嵌套Ajax的功能，代码如下：$.ajax ({url: ‘外部接口的URL’,type: ‘GET’,data: {},success: function (data) {//发起内部接口请求$.ajax({url: ‘内部接口的URL’,type: ‘GET’,data: {},success: function (data) {//将外部和内部接口数据整合，从而实现Ajax嵌套Ajax的功能}});}});四、Ajax嵌套Ajax有什么注意事项？1、Ajax嵌套Ajax的代码，要注意外部接口和内部接口的url 是否正确，否则无法正确获取数据；2、Ajax嵌套Ajax的代码，建议将内部接口封装成函数，在外部接口数据成功获取到后，再执行内部接口函数，从而实现Ajax嵌套Ajax的功能；3、Ajax嵌套Ajax代码中，一定要注意内外层的异步处理，一定要把外层接口的数据处理放在内层接口的异步处理之中，以避免外层接口数据更新时，尚未获取到内层接口数据，从而导致内外层数据无法更新的问题。

ajax获取json格式二级联动下拉菜单

ajax获取json格式⼆级联动下拉菜单在后台交互获得的数据json数据，在前台交互得不到他的值。

，原来要⽤eval（）对json数据进⾏转换成对象！！再⽤$.each()函数进⾏循环输出。

1.在1.php中关键代码<div><select name='s' id='ss' onchange="return show(this.value)"><option value="default">请选择</option><?php foreach($arr as $v){?><option value="<?=$v['id']?>"><?=$v['title']?></option><?php }?></select><select name="g" id="gg"><option value="default">--default--</option><option value="v1">t1</option><option value="v2">t2</option><option value="v3">t3</option></select></div>javascript代码为：function show(n){var id = n;$.ajax({type:'GET',url:'2.php',data:'id='+id,success:function(data){var gg = $("#gg");gg.empty(); //每次清空选项。

JS简单实现二级联动菜单

JS简单实现二级联动菜单二级联动菜单是一种常见的网站交互方式，通过选择第一级菜单项，可以动态的加载与之对应的第二级菜单项。

在JavaScript中实现一个简单的二级联动菜单，可以通过以下步骤：步骤一：构建HTML结构首先，需要在HTML中创建两个下拉菜单，一个用于显示第一级菜单项，另一个用于显示第二级菜单项。

例如：```html<label for="first-menu">第一级菜单：</label><select id="first-menu"></select><label for="second-menu">第二级菜单：</label><select id="second-menu"></select>```步骤二：定义数据接下来，需要定义一个包含第一级菜单项和对应的第二级菜单项的数据结构，可以使用JavaScript数组表示。

例如：```javascriptvar data =name: '菜单项1',subMenu: ['子菜单项1', '子菜单项2', '子菜单项3']},name: '菜单项2',subMenu: ['子菜单项4', '子菜单项5', '子菜单项6']},name: '菜单项3',subMenu: ['子菜单项7', '子菜单项8', '子菜单项9']}];```步骤三：动态加载第一级菜单使用JavaScript代码动态加载第一级菜单项。

首先，获取第一级菜单的DOM元素，并循环遍历数据数组，创建相应的选项。

Ajax在两级级联列表中的应用

Ａｊｘ在两级级联列表中的应用ａ
郭琳周蓉
６９０）２００（四川职业技术学院，四川遂宁
摘要：本文主要介绍使用Ａａｊｘ技术的优点，以及如何运用Ａａ技术来实现在Ｗｂｊｘｅ应用中的两级级联列表．
关键词：Ａａ；Ｘｌｔｐｅｕｓ；ＸＬＯ；两级级联列表ｊｘｍＨＲｑｅＭ；ＤＭｔｔ中图分类号：Ｔ３２Ｐ１文献标识码：Ａ文章编号：１０— １５（０）０— ０８０９８２１０３０３０６— ４
表中的字段如表１：
表１数据表Ｐｉｙｂ的定义ｃｔｔ
ＪｖＳｒｔａａｃｐ，并发送至客户端．最后，客户端浏览器ｉ将这一段ＨＭＬ显示出来．Ｔ随后，用户在该Ａａｊｘ页面上的后续操作将和传
统Ｗｅ页面完全不同— — 用户的这些操作将不会ｂ引发浏览器的另一次ＨＨ＇求，取而代之的是将＇Ｐ请
２０年第３期０１
重庆三峡学院掌报
Ｎｏ３２０．．０１
誊（２期）１５
ＪＵＮＬＦＨＮＱＮＨＥＯＧＳＮＶＲＩＹＯＲＡＯＧＩＧＴＲＥＧＲＥＩＥＳＴＯＣＵ
Ｖｌ．６Ｎｏ１５ｏ２．２１
用户选择省份后，城市选项列表自动更新为和所选省份相关联的城市．在此实现中，界面不会刷新，
用户感觉不到后台所做的改变．
４１主选列表的实现．
３Ａａｊｘ的实现原理

Ajax实现城市二级联动（一）

Ajax实现城市⼆级联动（⼀）前⼀篇是把省份和城市都写在JS⾥，这⾥把城市放在PHP⾥，通过发送Ajax请求城市数据渲染到页⾯。

1、html<select id="province"><option>请选择</option><option>⼭东省</option><option>辽宁省</option><option>吉林省</option></select><select id="city"><option>请选择</option></select>2、javascript<script>/** 需要思考哪些事情?* * 在什么时候执⾏Ajax的异步请求?* * 当⽤户选择具体的省份信息时*/// 1. 为id为province元素绑定onchange事件var provinceEle = document.getElementById("province");provinceEle.onchange = function(){// 清空var city = document.getElementById("city");var opts = city.getElementsByTagName("option");for(var z=opts.length-1;z>0;z--){city.removeChild(opts[z]);}if(provinceEle.value != "请选择"){// 2. 执⾏Ajax异步请求var xhr = getXhr();xhr.open("post","06.php");xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");xhr.send("province="+provinceEle.value);xhr.onreadystatechange = function(){if(xhr.readyState==4&&xhr.status==200){// 接收服务器端的数据内容var data = xhr.responseText;// data是字符串,转换为数组var cities = data.split(",");for(var i=0;i<cities.length;i++){var option = document.createElement("option");var textNode = document.createTextNode(cities[i]);option.appendChild(textNode);city.appendChild(option);}}}}};// 定义获取ajax核⼼对象的函数XMLHttpRequest对象的函数function getXhr(){var xhr = null;if(window.XMLHttpRequest){xhr = new XMLHttpRequest();}else{xhr = new ActiveXObject("Microsoft.XMLHttp");}return xhr;}</script>3、06.php<?php// ⽤于处理客户端请求⼆级联动的数据// 1. 接收客户端发送的省份信息$province = $_POST['province'];// 2. 判断当前的省份信息,提供不同的城市信息switch ($province){case '⼭东省':echo '青岛市,济南市,威海市,⽇照市,德州市';break;case '辽宁省':echo '沈阳市,⼤连市,铁岭市,丹东市,锦州市';break;case '吉林省':echo '长春市,松原市,吉林市,通化市,四平市';break;}// 服务器端响应的是字符串>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

fastadmin 二级联动开发实例使用

fastadmin 二级联动开发实例使用
以下是一个二级联动的快速管理系统开发实例：
1. 前端界面设计：
- 建立一个表单页面，包含两个下拉框，一个用于选择一级菜单，一个用于选择对应的二级菜单。

- 通过ajax请求获取一级菜单的数据，并将其填充到第一个下拉框中。

- 当第一个下拉框的选项改变时，触发事件，通过ajax请求获取对应的二级菜
单数据，并将其填充到第二个下拉框中。

2. 后端数据处理：
- 在后端建立一个接口，用于获取一级菜单的数据。

- 当接口被请求时，从数据库中获取一级菜单的数据，并返回给前端。

3. 前端事件处理：
- 使用JavaScript编写事件处理函数，当第一个下拉框的选项改变时，触发事件。

- 在事件处理函数中，通过ajax请求发送选中的一级菜单的值到后端接口，获
取对应的二级菜单数据。

- 将获取到的二级菜单数据填充到第二个下拉框中。

4. 后端数据查询：
- 在后端建立一个接口，用于获取对应一级菜单的二级菜单数据。

- 当接口被请求时，从数据库中查询对应一级菜单的二级菜单数据，并返回给前端。

5. 数据库设计：
- 设计一张菜单表，包括菜单id、菜单名称和上级菜单id等字段。

- 将一级菜单数据存储到菜单表中，并在二级菜单数据中记录对应的上级菜单id。

通过以上步骤，你就可以实现一个简单的二级联动的快速管理系统。

当用户在第
一个下拉框中选择了一级菜单后，会动态展示对应的二级菜单。

你可以根据实际
需求，对界面设计和代码逻辑进行修改和完善。

城市二级联动ajax与PHP操作要有城市的数据库

城市⼆级联动ajax与PHP操作要有城市的数据库连接数据库<?php//var_dump($_GET);//准备dsn$dsn = 'mysql:host=localhost;dbname=数据库名;charset=utf8';//连接数据库try {$pdo = new PDO($dsn,'root','');} catch (PDOException $e) {echo $e->getMessage();}//设置错误模式$pdo->setAttribute(3,1);//基本操作$sql="SELECT * FROM district WHERE upid={$_GET['upid']}";//返回预处理$stmt = $pdo->prepare($sql);//执⾏$stmt->execute();//获取结果内容//$list = $stmt->fetchAll(PDO::FETCH_ASSOC);$list = $stmt->fetchAll(2);//var_dump($list);echo json_encode($list);正⽂ ajax<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="./jquery-1.7.2.min.js"></script></head><body><form action="action.php" method="post"><select id="sid"><option value="" class="ss">--请选择--</option></select><input type="hidden" name="data"><button type="submit">提交</button></form></body><script>//第⼀级别获取$.get('./address.php',{upid:0},function(result){//禁⽌请选择选中$('.ss').attr('disabled',true);//console.log(result);//console.log(result[0]);//得到数据数组内容我们要遍历得到每⼀个对象for(var i = 0;i<result.length;i++){//console.log(result[i].name);//遍历得到option标签var info = $('<option value="'+result[i].id+'" >'+result[i].name+'</option>');//将得到的ootion对象添加到select对象中$('#sid').append(info);}},'json');//其他级别$('select').live('change',function(){//alert($(this).val());obj = $(this);//通过id来查找下⼀个级别id = obj.val();//清除所有其他selectobj.nextAll('select').remove();$.getJSON('./address.php',{upid:id},function(result){//console.log(result);//创建⼀个select标签对象var select=$('<select></select>');//防⽌当前城市没有办法选择所以添加请选择option标签var op = $('<option class="mm">--请选择--</option>');select.append(op);//循环将得到的数组表⾥⾯的option标签添加到select标签中for(var i = 0;i<result.length;i++){var info = $('<option value="'+result[i].id+'">'+result[i].name+'</option>'); //将option添加到select标签对象中select.append(info);}//将select添加到当前标签后⾯obj.after(select);//把其他级别的请选择禁⽤$('.mm').attr('disabled',true);})})//获取选中的数据提交到操作页⾯$('button').click(function(){arr=[];console.log($('select'));//遍历select$('select').each(function(){//获取当前select被选中的option标签中的⽂本值sedata = $(this).find('option:selected').html();//获取到⽂本值添加到对应的数组中arr.push(sedata);})//删除最后⼀个数组请选择arr.pop();//把数据直接给隐藏域的value值即可$('input[name=data]').val(arr);//先不让他跳转//return false;})</script></html>在跳转的⽂件输出即可。

双层ajax嵌套（可多层）用法实例

双层ajax嵌套（可多层）⽤法实例本⽂实例讲述了双层ajax嵌套（可多层）⽤法。

分享给⼤家供⼤家参考。

具体如下：function addbus(){//清除a标签中的所有元素// $("#s1").remove();var chooseIdTypeOne =$("#chooseIdTypeOne2").find("option:selected").val();$.ajax({url : "/ftcms/changeProject.do?getOriginal&OriginalName="+chooseIdTypeOne,data : null, // 参数type : "post",cache : false,dataType : "json", //返回json数据error: function(){//document.getElementById("chooseIdTypeOnechdranone").options.length = 0;alert('error');},success:onchangecal});}function onchangecal(data){var chooseIdTypeOne =$("#chooseIdTypeOne2").find("option:selected").val();document.getElementById("chooseIdTypeOnechdranone2").options.length = 0; //清空原有的optionvar str="<option value='00000'>请选择</option>";if(chooseIdTypeOne==1){$.ajax({url : "/ftcms/changeProject.do?getOriginal&OriginalName="+chooseIdTypeOne,data : null, // 参数type : "post",cache : false,dataType : "json", //返回json数据error: function(){//document.getElementById("chooseIdTypeOnechdranone").options.length = 0;alert('error');},success:onchangecal});}}}if(chooseIdTypeOne==2){for(var i=0;i<data.length;i++){str+="<option value='"+data[i].UID+"'>"+data[i].NAME+"</option>"}}if(chooseIdTypeOne==3){for(var i=0;i<data.length;i++){str+="<option value='"+data[i].UID+"'>"+data[i].NAME+"</option>"}}if(chooseIdTypeOne==4){for(var i=0;i<data.length;i++){str+="<option value='"+data[i].UID+"'>"+data[i].NAME+"</option>"}}if(chooseIdTypeOne==5){for(var i=0;i<data.length;i++){str+="<option value='"+data[i].UID+"'>"+data[i].NAME+"</option>"}}if(chooseIdTypeOne==6){for(var i=0;i<data.length;i++){str+="<option value='"+data[i].UID+"'>"+data[i].NAME+"</option>"}}if(chooseIdTypeOne==7){for(var i=0;i<data.length;i++){str+="<option value='"+data[i].UID+"'>"+data[i].NAME+"</option>"}}if(chooseIdTypeOne==8){for(var i=0;i<data.length;i++){str+="<option value='"+data[i].UID+"'>"+data[i].NAME+"</option>"}}if(chooseIdTypeOne==9){for(var i=0;i<data.length;i++){str+="<option value='"+data[i].UID+"'>"+data[i].NAME+"</option>" }}if(chooseIdTypeOne==10){for(var i=0;i<data.length;i++){str+="<option value='"+data[i].UID+"'>"+data[i].NAME+"</option>" }}if(chooseIdTypeOne==11){for(var i=0;i<data.length;i++){str+="<option value='"+data[i].UID+"'>"+data[i].NAME+"</option>" }}if(chooseIdTypeOne==12){for(var i=0;i<data.length;i++){str+="<option value='"+data[i].UID+"'>"+data[i].NAME+"</option>" }}if(chooseIdTypeOne==13){for(var i=0;i<data.length;i++){str+="<option value='"+data[i].UID+"'>"+data[i].NAME+"</option>" }}$("#chooseIdTypeOnechdranone2").html(str);}希望本⽂所述对⼤家的Ajax程序设计有所帮助。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

1.<html>
2. <head>
3. <script type="text/javascript">
4.
5.
6. //Ajax实现下拉框二级级联，根据第一个下拉框的值改变第二个下拉
框内的列表
7.
8. //根据浏览器的类型，创建xmlHttpRequest对象
9. function createXmlHttpRequest()
10. {
11. if(window.ActiveXObject)
12. {
13. return new ActiveXObject("Microsoft.XMLHTTP");
14. }
15. else if( window.XMLHttpRequest())
16. {
17. return new XMLHttpRequest();
18. }
19. }
20. var xmlHttpRequest;
21.
22. //异步响应函数
23. function search(para)
24. {
25. var url="/search?para="+para; //后台请求的路径
26.
27. xmlHttpRequest=createXmlHttpRequest();
28.
29. xmlHttpRequest.onreadystatechange=callback; //将回调
函数注册给状态改变事件
30.
31. xmlHttpRequest.open("GET",url,true);
32.
33. xmlHttpRequest.send(null);
34.
35. }
36.
37. //回调函数
38. function callback()
39. {
40. var dlCity=document.getElementById("city");
41.
42.
43.
44. //请求被成功响应，已接收到结果
45. if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status
==200)
46. {
47. var result=xmlHttpRequest.responseText; /
/返回的结果字符串
48. //var result = "哈尔滨|大庆||鹤岗|佳木斯|牡丹江
";
49.
50. var cityArray= result.split("|"); //返回的结果字
符串中，值之间是以|分隔的，所以先拆分成数组
51. var count = cityArray.length;
52. dlCity.length=0; //先将下拉列表框清空
53. for (var i = 0; i <count; i++)
54. {
55. dlCity.options.add(new Option(cityArray[i], cit
yArray[i])); //将结果循环添加到下拉列表中
56. }
57.
58. }
59. else
60. {
61. dlCity.length=0;
62. dlCity.options.add(new Option("请等
待...","-1"));
63. }
64.
65. }
66.
67. //下拉框改变事件
68. function changeCityOptions()
69. {
70. var dlProvince=document.getElementById("province");
71. var dlCity=document.getElementById("city");
72. dlCity.length=0;
73. if(dlProvince.value==-1)
74. {
75. dlCity.options.add(new Option("城市列表","-1"));
76. }
77. else
78. {
79. search(dlProvince.value);
80. }
81. return;
82. }
83. </script>
84.</head>
85.<body>
86. <select name="province" id="province" onchange="changeCityOpt
ions()">
87. <option value="-1">选择省份</option>
88.
89. <option value="1">黑龙江</option>
90.
91. <option value="2">吉林</option>
92. </select>
93. <select name="city" id="city">
94. <option value="-1">城市列表</option>
95. </select>
96.</body>
97.</html>。

ajax二联动

两天时间用AJAX写了个无限级的多级联动菜单(ajax+PHP构架)

实验.Ajax二级联动

ajax两级联动下拉列表和显示相应数据

ajax+java+jsp做的二级菜单联动（全）

PHPAJAX2级联动下拉列表（...

第18章 Ajax动态联动菜单.

ajax嵌套ajax方法

ajax原理和实现步骤

Ajax二级联动简单实例

使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例

ajax接收二进制流 简书

Ajax与XML在二级联动列表菜单中的协同应用

ajax嵌套ajax方法

ajax获取json格式二级联动下拉菜单

JS简单实现二级联动菜单

Ajax在两级级联列表中的应用

Ajax实现城市二级联动（一）

fastadmin 二级联动 开发实例使用

城市二级联动ajax与PHP操作要有城市的数据库

双层ajax嵌套（可多层）用法实例

ajax接收二进制流简书

fastadmin 二级联动开发实例使用