求:用Ajax 做的动态下拉列表 (jsp) 及连问题.

lining86yc 2008-08-02 11:24:04
小弟求助

本人正在做jsp 项目
有两个下拉列表
点前一个 后面的变化

前台调用Servlet ,Servlet连库查询返回结果集,
然后返回给前台的下拉列表

那怎么用Ajax 做到只有下拉列表刷新那(局部刷新)

谢谢各位了
...全文
862 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
汪小熊 2012-03-04
  • 打赏
  • 举报
 回复
顶顶顶···看了各种资料最后发现这个最有用 谢谢了
snowxue8320 2009-10-19
  • 打赏
  • 举报
 回复
学习了
sd5816690 2008-08-07
  • 打赏
  • 举报
 回复
[Quote=引用 6 楼 yxlsd 的回复:]
3楼，你的程序有点小问题：
// 清空select2
while(select2.options[0] != null){
select2.options[0] = null;
}
你这样做并不能把select2的options清空，只清了第一个。可以用下面的语句来清：
for(var i=0;i <select.options.length;i++){
select.options[i]=null;
}
或者下面这句也行：
select.innerHTML="";
[/Quote]
看清楚我用的 while ，不是 if
麻烦试了后再发表评论
yxlsd 2008-08-07
  • 打赏
  • 举报
 回复
select2，嘿嘿
yxlsd 2008-08-07
  • 打赏
  • 举报
 回复
3楼，你的程序有点小问题：
// 清空select2
while(select2.options[0] != null){
select2.options[0] = null;
}
你这样做并不能把select2的options清空，只清了第一个。可以用下面的语句来清：
for(var i=0;i<select.options.length;i++){
select.options[i]=null;
}
或者下面这句也行：
select.innerHTML="";
cuilupeng999 2008-08-07
  • 打赏
  • 举报
 回复
使用prototype框架 list使用json对象传输：
<html>
<head>
<title>Insert title here</title>
<script src="js/prototype.js"></script>
<script language="javascript">
function searchSales2(){
var country=$F('country');
var url='http://localhost:8080/HelloWorld/AjaxServlet';
var pars=country='+country;
var myAjax=new Ajax.Request(url,{
method:'post',parameters:pars,onComplete:showResponse
});
}
function showResponse(originalRequest)
{
var jsonRaw = originalRequest.responseText.evalJSON(true);
$('language1').options.length=0;
jsonRaw.each(function(myobj1){
$('language1').add(new Option(myobj1.language,myobj1.language));
});
}
</script>
</head>
<body>
<form name="form1" method="post" onload="onloadHandler()">
<select id="country" name="country" onchange="searchSales2()">
<option value="ABW">Aruba</option>
<option value="AFG">Afghanistan</option>
<option value="AGO">Angola</option>
</select>
<select id="language1" name="language1">
<option value="0">select one</option>
</select>
</form>
</body>
</html>
servlet：
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
String country= request.getParameter("country"); //请求国家
Object obj = ctx.getBean(reqClass);
Class c2 = obj.getClass();
try {
CountryService service = new CountryService();
List list = service.getCountryLanguageList(country);
String outobj = json2(list);
response.getWriter().print(outobj);//把json数组返回前台
} catch (SecurityException e) {
e.printStackTrace();
} catch (NoSuchMethodException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IllegalArgumentException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IllegalAccessException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (InvocationTargetException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (JSONException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
//把查询的list列表放入json数组
private String json2(List list) throws JSONException {
JSONArray resultArray = new JSONArray();
JSONObject jsonObject = new JSONObject();
for (int i = 0; i < list.size(); i++) {
Countrylanguage cl = (Countrylanguage) list.get(i);
jsonObject = this.getDomainJSON(cl);
resultArray.put(jsonObject);
}

return resultArray.toString();
}
//把国家代号和语言放入json对象
private JSONObject getDomainJSON(Countrylanguage cl) throws JSONException {
JSONObject jsonObject = new JSONObject();
jsonObject.put("countryCode", cl.getCountryCode());
jsonObject.put("language", cl.getLanguage());
return jsonObject;
}
wangwenjun69 2008-08-05
  • 打赏
  • 举报
 回复
写的不错！很能说明问题~
leosming 2008-08-04
  • 打赏
  • 举报
 回复
ding
sd5816690 2008-08-02
  • 打赏
  • 举报
 回复 


package duyongyao;



import java.io.IOException;

import java.io.PrintWriter;



import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;



public class AjaxServlet extends HttpServlet {

	private static final long serialVersionUID = 200808021921120001L;



	/**

	 * Constructor of the object.

	 */

	public AjaxServlet() {

		super();

	}



	/**

	 * Destruction of the servlet. <br>

	 */

	public void destroy() {

		super.destroy(); // Just puts "destroy" string in log

		// Put your code here

	}



	/**

	 * The doGet method of the servlet. <br>

	 * 

	 * This method is called when a form has its tag value method equals to get.

	 * 

	 * @param request

	 *            the request send by the client to the server

	 * @param response

	 *            the response send by the server to the client

	 * @throws ServletException

	 *             if an error occurred

	 * @throws IOException

	 *             if an error occurred

	 */

	public void doGet(HttpServletRequest request, HttpServletResponse response)

			throws ServletException, IOException {

		request.setCharacterEncoding("GBK");



		String valueFromSelect = request.getParameter("valueFromSelect");



		StringBuffer sb = new StringBuffer();

		sb.append("<?xml version=\"1.0\" encoding=\"gb2312\"?>\n");

		sb.append("<resultFromDB>\n");

		sb.append(fromDB(valueFromSelect));

		sb.append("</resultFromDB>\n");



		response.setHeader("content-type", "text/xml;charset=GBK");

		PrintWriter out = response.getWriter();

		out.println(sb.toString());

		out.flush();

		out.close();

	}



	/**

	 * The doPost method of the servlet. <br>

	 * 

	 * This method is called when a form has its tag value method equals to

	 * post.

	 * 

	 * @param request

	 *            the request send by the client to the server

	 * @param response

	 *            the response send by the server to the client

	 * @throws ServletException

	 *             if an error occurred

	 * @throws IOException

	 *             if an error occurred

	 */

	public void doPost(HttpServletRequest request, HttpServletResponse response)

			throws ServletException, IOException {

		doGet(request, response);

	}



	/**

	 * Initialization of the servlet. <br>

	 * 

	 * @throws ServletException

	 *             if an error occure

	 */

	public void init() throws ServletException {

		// Put your code here

	}



	/**

	 * 模拟访问数据库

	 */

	private String fromDB(String valueFromSelect) {

		StringBuffer sb = new StringBuffer();



		if (valueFromSelect.equals("1")) {

			sb.append("	<labelValueBean>\n");

			sb.append("		<value>haha</value>\n");

			sb.append("		<label>哈哈</label>\n");

			sb.append("	</labelValueBean>\n");

			sb.append("	<labelValueBean>\n");

			sb.append("		<value>hehe</value>\n");

			sb.append("		<label>呵呵</label>\n");

			sb.append("	</labelValueBean>\n");

		} else if (valueFromSelect.equals("2")) {

			sb.append("	<labelValueBean>\n");

			sb.append("		<value>heihei</value>\n");

			sb.append("		<label>嘿嘿</label>\n");

			sb.append("	</labelValueBean>\n");

			sb.append("	<labelValueBean>\n");

			sb.append("		<value>gaga</value>\n");

			sb.append("		<label>嘎嘎</label>\n");

			sb.append("	</labelValueBean>\n");

			sb.append("	<labelValueBean>\n");

			sb.append("		<value>woyun</value>\n");

			sb.append("		<label>我晕</label>\n");

			sb.append("	</labelValueBean>\n");

			sb.append("	<labelValueBean>\n");

			sb.append("		<value>123</value>\n");

			sb.append("		<label>456</label>\n");

			sb.append("	</labelValueBean>\n");

		}

		return sb.toString();

	}



}








<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>

		<title>index.html</title>



		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

		<meta http-equiv="description" content="this is my page">

		<meta http-equiv="content-type" content="text/html; charset=GBK">

		<script type="text/javascript">

		var xmlhttp;

		function loadXMLDoc(valueFromSelect1){

			var url = "AjaxServlet?valueFromSelect=" + valueFromSelect1 + "&" + Math.random();

			xmlhttp=null;

			if (window.XMLHttpRequest){

			  xmlhttp=new XMLHttpRequest();

			}

			else if (window.ActiveXObject){

			  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

			}

			if (xmlhttp!=null){

			  xmlhttp.onreadystatechange=updatePage;

			  xmlhttp.open("GET",url,true);

			  xmlhttp.send(null);

			}

			else{

			  alert("Your browser does not support XMLHTTP.");

			}

		}

		

		function state_Change(){

			if (xmlhttp.readyState==4){

				if (xmlhttp.status==200){

					updatePage();

				}

				else{

					alert("Problem retrieving XML data");

				}

			}

		}

		

		function updatePage(){			

			// 清空select2

			while(select2.options[0] != null){

				select2.options[0] = null;

			}

			

			// 设置select2

			var xmlDoc = xmlhttp.responseXML;

			var labelValueBeanElements = xmlDoc.getElementsByTagName("labelValueBean");

			for (var i = 0; i < labelValueBeanElements.length; i++){

				var entityValue = xmlDoc.getElementsByTagName("value")[i].childNodes[0].nodeValue;

				var entityLabel = xmlDoc.getElementsByTagName("label")[i].childNodes[0].nodeValue;

				select2.options[i] = new Option(entityLabel,entityValue,false,false);

			}

		}

		</script>

	</head>



	<body>

		select1:

		<select id="select1" onchange="loadXMLDoc(this.value)">

			<option value="1">1</option>

			<option value="2">2</option>

		</select>

		<br/>

		select2:

		<select id="select2">

		</select>

		<input type="button" value="显示select2的值" onclick="alert(select2.value)">

	</body>

</html>
feng8008 2008-08-02
  • 打赏
  • 举报
 回复
搜索
ajax实现动态下拉列表
自己jsp写的小实例，就两个jsp文件，一看就明白
ajax+struts2.0+jsp下拉列表级联
使用ajax+struts2.0+jsp做的一个多下拉列表级联
JSP中Ajax+Servlet极简实操入门
JSP中Ajax+Servlet极简实操入门，内容包括：IDEA环境下Servlet完整示例步骤一、IDEA环境下Servlet完整示例步骤二、IDEA环境下Servlet完整示例步骤三、IDEA环境下Servlet完整示例步骤四、ajax应用举例步骤一（实体类...
用ajax实现的jsp二级联动下拉列表
用ajax实现的jsp二级联动下拉列表，使用异步交互的二级联动堪称jsp革命性变动。以前的联动大都是把所有的数据取出来放在javascript中，就一个字------烦
分别用四种Ajax工具实现下拉菜单动态刷新的DEMO
该DEMO用四种目前流行Ajax工具实现下拉菜单的动态刷新 所设置的选择有三个，依次是学院，班级和学生姓名。 通过四种Ajax工具JQuery、JSON、DWR、Prototype分别实现页面与后台（类文件）的数据交互，从而使得在不刷新页面的情况下取得数据，改变Select框中的值。 进入主页后可以点击不同链接访问你想查看的DEMO http://localhost:8080/ajaxtools/index.jsp
Ajax

52,797

社区成员

25,305

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 Ajax
社区管理员
  • Ajax
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章