struts2 jsp中的ajax怎么写,求个完整的!
因为我想做的是一个联级下拉框,第一个框已经好了,点击后会用AJAX来获取第二个框的值,有列子的麻烦发下,急..........
因为我想做的是一个联级下拉框,第一个框已经好了,点击后会用AJAX来获取第二个框的值,有列子的麻烦发下,急.......
展开
3个回答
展开全部
<script type="text/javascript">
var xmlHttp;
function createXMLHttp(){
if(window.ActiveXObject){
return new ActiveXObject("Microsoft.XMLHttp");
}else if(window.XMLHttpRequest){
return new XMLHttpRequest();
}
}
function doAjax(value){
xmlHttp = createXMLHttp();
if(value == "--") {
document.getElementById("city").length = 1;
return;
}
var url = "/QiaoJie/CityAndProvince?parentid="+value+"&date="+new Date();
xmlHttp.onreadystatechange = dodo;
xmlHttp.open("get",url,true);
xmlHttp.send(null);
}
function dodo(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
var xml = xmlHttp.responseXML;
var citys = xml.getElementsByTagName("city");
document.getElementById("city").length = 1;
for ( var i = 0; i< citys.length; i++) {
document.getElementById("city").options.add(new Option(citys[i].getAttribute("name"),citys[i].getAttribute("id")));
}
}
}
</script>
<body>
<select id="province" name="province" onchange="doAjax(this.value)">
<option value="--">请输入省份</option>
<option value="1">湖南省</option>
<option value="2">广东省</option>
<option value="3">湖北省</option>
</select>
<select id="city" name="city">
<option value="--">请输入市</option>
</select>
<div id = "showMsg"></div>
</body>
这是CityAndProvince的servlet
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String parentId = request.getParameter("parentid");
List<Citys> list = new BaseDao().getAllByClass(Citys.class, "select * from city where parentid = ?", parentId);
response.setCharacterEncoding("UTF-8");
response.setContentType("text/xml; charset=UTF-8");
PrintWriter out = response.getWriter();
out.print(createXML(list));
out.flush();
out.close();
}
private String createXML(List list) {
StringBuffer sb = new StringBuffer();
sb.append("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
sb.append("<citys>");
for (int i = 0; i < list.size(); i++) {
Citys city = (Citys)list.get(i);
sb.append("<city id= \""+city.getId()+"\" name = \""+city.getName()+"\" />");
}
sb.append("</citys>");
return sb.toString();
}
Citys类
private int id;
private String name;
private int parentid;
parentid 对应的是下面的value没有Province表和类，下面的也是一个假设。
<option value="1">湖南省</option>
<option value="2">广东省</option>
<option value="3">湖北省</option>
BaseDao类只是连接数据库的代码。
var xmlHttp;
function createXMLHttp(){
if(window.ActiveXObject){
return new ActiveXObject("Microsoft.XMLHttp");
}else if(window.XMLHttpRequest){
return new XMLHttpRequest();
}
}
function doAjax(value){
xmlHttp = createXMLHttp();
if(value == "--") {
document.getElementById("city").length = 1;
return;
}
var url = "/QiaoJie/CityAndProvince?parentid="+value+"&date="+new Date();
xmlHttp.onreadystatechange = dodo;
xmlHttp.open("get",url,true);
xmlHttp.send(null);
}
function dodo(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
var xml = xmlHttp.responseXML;
var citys = xml.getElementsByTagName("city");
document.getElementById("city").length = 1;
for ( var i = 0; i< citys.length; i++) {
document.getElementById("city").options.add(new Option(citys[i].getAttribute("name"),citys[i].getAttribute("id")));
}
}
}
</script>
<body>
<select id="province" name="province" onchange="doAjax(this.value)">
<option value="--">请输入省份</option>
<option value="1">湖南省</option>
<option value="2">广东省</option>
<option value="3">湖北省</option>
</select>
<select id="city" name="city">
<option value="--">请输入市</option>
</select>
<div id = "showMsg"></div>
</body>
这是CityAndProvince的servlet
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String parentId = request.getParameter("parentid");
List<Citys> list = new BaseDao().getAllByClass(Citys.class, "select * from city where parentid = ?", parentId);
response.setCharacterEncoding("UTF-8");
response.setContentType("text/xml; charset=UTF-8");
PrintWriter out = response.getWriter();
out.print(createXML(list));
out.flush();
out.close();
}
private String createXML(List list) {
StringBuffer sb = new StringBuffer();
sb.append("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
sb.append("<citys>");
for (int i = 0; i < list.size(); i++) {
Citys city = (Citys)list.get(i);
sb.append("<city id= \""+city.getId()+"\" name = \""+city.getName()+"\" />");
}
sb.append("</citys>");
return sb.toString();
}
Citys类
private int id;
private String name;
private int parentid;
parentid 对应的是下面的value没有Province表和类，下面的也是一个假设。
<option value="1">湖南省</option>
<option value="2">广东省</option>
<option value="3">湖北省</option>
BaseDao类只是连接数据库的代码。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用jQuery嘛 ， 封装好了的 ，ajax请求一句代码就搞定了 ，$.get(url,{},function(data){});第一个是请求的路径，第二个是传回的参数{“key”:"value"}，第三个如果有返回数据的话 ，data就是response.getWriter().write();后的内容 。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
让你的 action 方法 输出 数组 用 json处理 然后 页面接收 eval 处理成 js的数组 生成 option 给 select （用jquery 的 $.get 或者 $.post 比较方便 ）
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
