JAVA实现Ajax三级联动?

JAVA实现Ajax三级联动?,第1张

那就给你说下二级联动吧 ,三级道理也是一样的。

根据第一级下拉框,点击事件后,将id传递给服务器,服务器根据该id,经过数据库查询,获得二级下拉框的内容,这里的内容你可以用xml封装,或者是直接写成dom格式:如dom格式

服务端:

PrintWriter writer = response.getWriter()

writer.println("<select>")

while(rs.next()){

writer.println("<option>"+rs.getString("xxx")+"</option>")

writer.flush()

}

writer.println("</select>")

writer.close()

客户端:

var selectStr=xmlHttp.responseText//二集菜单的内容

找个元素,将二级菜单项利用innerHTML插入到网页中

document.getElementById("xx").innerHTML=selectStr

不知道这样说你明白不?

实现第三级,只需要在第二个下拉框里触发事件后,将id传递给服务器,在经过处理,将结果给第三级下拉框

后台能够打印出来,说明没有问题。问题应在前边的接收端。看代码返回的是json string,对于前端来说应该仅仅是个string,而不是JS对象。

记得JQuery,发送request的时候有参数,可以自动把返回的json string变成js的object的。

以省,市,城联动为例:

此小程序的功能主要是采用异步请求方式从数据库中调取省市区信息显示到下拉列表:

代码如下:

建立数据库中的代码和一些配置文件信息就省略了,主要有JavaScript中的代码为:

$(document).ready(function(){

$.get("getProvince.do", function(result){

$("#showp").html(result)

})

})

var xmlhttp

function mysend(str){

$(document).ready(function(){

$("#show2").html("")

})

var show = document.getElementByIdx_x_x_x_x_x_x_x_x_x("show")

show.innerHTML = ""

var province = document.getElementByIdx_x_x_x_x_x_x_x_x_x("province").value

if(province!=0){

if(window.XMLHttpRequest){

xmlhttp = new XMLHttpRequest()

}else{

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")

}

xmlhttp.onreadystatechange=function(){

if(xmlhttp.readyState==4 &&xmlhttp.status==200){

show.innerHTML = xmlhttp.responseText

}

}

var ss = encodeURIComponent(str)

xmlhttp.open("GET","getCity.do?provinceid="+ss,true)

xmlhttp.send(null)

}

}

function myarea(str){

if(window.XMLHttpRequest){

xmlhttp = new XMLHttpRequest()

}else{

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")

}

xmlhttp.onreadystatechange=function(){

if(xmlhttp.readyState==4 &&xmlhttp.status==200){

var show2 = document.getElementByIdx_x_x_x_x_x_x_x_x_x("show2")

show2.innerHTML = xmlhttp.responseText

}

}

var ss = encodeURIComponent(str)

xmlhttp.open("GET","getArea.do?cityid="+ss,true)

xmlhttp.send(null)

}

html页面中的代码为:

所在地

action中的代码为:

package mobi.zhangsheng.jiejia.action

import java.io.IOException

import java.io.PrintWriter

import java.util.List

import javax.annotation.Resource

import javax.servlet.http.HttpServletRequest

import javax.servlet.http.HttpServletResponse

import org.apache.struts2.ServletActionContext

import org.springframework.stereotype.Controller

import mobi.zhangsheng.jiejia.domain.Areas

import mobi.zhangsheng.jiejia.service.AgentsService

import mobi.zhangsheng.jiejia.service.AreasService

@Controller

public class ProvinceAction {

private int provinceid

private int cityid

@Resource

private AreasService as

@Resource

private AgentsService ags

public int getProvinceid() {

return provinceid

}

public void setProvinceid(int provinceid) {

this.provinceid = provinceid

}

public int getCityid() {

return cityid

}

public void setCityid(int cityid) {

this.cityid = cityid

}

public void getProvince(){

List provinceList = as.getAreasPrvinceList()

HttpServletResponse resp= ServletActionContext.getResponse()

HttpServletRequest request = ServletActionContext.getRequest()

//resp.setContentType("xml")

resp.setContentType("text/html")

resp.setCharacterEncoding("utf-8")

try {

PrintWriter out = resp.getWriter()

out.print("")

//out.print("shanghai")

} catch (IOException e) {

e.printStackTrace()

}

}

public void getCity(){

List cityList = as.getAreasCityList(provinceid)

HttpServletResponse resp= ServletActionContext.getResponse()

//resp.setContentType("xml")

resp.setContentType("text/html")

resp.setCharacterEncoding("utf-8")

try {

PrintWriter out = resp.getWriter()

out.print("")

//out.print("shanghai")

} catch (IOException e) {

e.printStackTrace()

}

}

public void getArea(){

List areaList = as.getAreasCityList(cityid)

if(areaList.size()==0){

}else{

HttpServletResponse resp= ServletActionContext.getResponse()

resp.setContentType("text/html")

resp.setCharacterEncoding("utf-8")

try {

PrintWriter out = resp.getWriter()

out.print("")

} catch (IOException e) {

e.printStackTrace()

}

}

}

}


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/sjk/9991880.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-04
下一篇 2023-05-04

发表评论

登录后才能评论

评论列表(0条)

保存