您的位置：首页 > Web前端 > JavaScript

ajax&json实现二级下拉框联动，简单示例

2016-03-02 22:52 1186 查看

Test1.jsp(前台显示页面)

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script type="text/javascript">
function createAjax()
{
var ajax = new XMLHttpRequest();
return ajax;
}
function change()
{
//shi.length=0;
//alert(shi.length);
for(var x=0;x<shi.length;)
{
shi.remove(x);
}
//alert(shi.length);
//shi.options.length=0;
var ajax = createAjax();
var province = document.getElementById("province").value;
ajax.open("get","AjaxTest1?province="+province,true);
ajax.send();
ajax.onreadystatechange=function()
{

if(ajax.readyState==4)
{
if(ajax.status==200)
{
//alert(ajax.responseText);
var jsonobj = eval("("+ajax.responseText+")");
//document.getElementById("span").innerHTML = jsonobj.name[0];
//alert(jsonobj.shi);
for(var x=0;x<jsonobj.shi.length;x++)
{
var option = document.createElement('option');
//alert(option);
option.text = jsonobj.shi[x].text;
shi.add(option,null);
}
}
}
}
}

</script>

</head>

<body>
省：
<select id="province" onchange="change()">
<option value="jiangsu">江苏省</option>
<option value="liaoning">辽宁省</option>
<option value="zhejiang">山东省</option>
</select>
市：
<select id="shi">
</select>

</body>

</html>

AjaxTest1.java（后台交互界面）

package ajax;

import java.io.IOException;

import java.io.PrintWriter;

import java.io.Writer;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSON;

import net.sf.json.JSONArray;

import net.sf.json.JSONObject;

@WebServlet("/AjaxTest1")

public class AjaxTest1 extends HttpServlet {

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
PrintWriter pw = response.getWriter();
String province = request.getParameter("province");
JSONObject json = new JSONObject();
JSONArray jsona = new JSONArray();
JSONObject temp=null;
JSONObject temp1=null;
JSONObject temp2=null;
if("jiangsu".equals(province))
{
temp=new JSONObject();
temp.put("id", 1);
temp.put("text", "南京");
jsona.add(temp);
temp1=new JSONObject();
temp1.put("id", 2);
temp1.put("text", "南昌");
jsona.add(temp1);
temp2=new JSONObject();
temp2.put("id", 3);
temp2.put("text", "泰兴");
jsona.add(temp2);

}
else if("liaoning".equals(province))
{
temp=new JSONObject();
temp.put("id", 1);
temp.put("text", "沈阳");
jsona.add(temp);
temp1=new JSONObject();
temp1.put("id", 2);
temp1.put("text", "大连");
jsona.add(temp1);
temp2=new JSONObject();
temp2.put("id", 3);
temp2.put("text", "丹东");
jsona.add(temp2);
}
else
{
temp=new JSONObject();
temp.put("id", 1);
temp.put("text", "日照");
jsona.add(temp);
temp1=new JSONObject();
temp1.put("id", 2);
temp1.put("text", "廊坊");
jsona.add(temp1);
temp2=new JSONObject();
temp2.put("id", 3);
temp2.put("text", "烟台");
jsona.add(temp2);
}
json.put("shi", jsona);
pw.print(json);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

}

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ajax javascript

相关文章推荐

新的分享

章节导航