java html页面解析json_肿么把json返回的数据显示到html页面上?

一般都是后台直接拼接好JSON格式返回，页面解析。

给你看个例子：

pageEncoding="GB18030"%>

四级联动下拉列表选中值保持不变

div #tip {

font:consolas normal 20px;

color:blue;

}

$(function() {

$("#province").change(function() {

if ($("#province").val() == '0') {

$("#city").html('');

$("#county").html('');

$("#town").html('');

return;

}

$("#tip").append("请求Ajax获取城市...");

$.get("ajax.do",

{type:'1',

value:$("#province").val(),

time:new Date()

},function(data) {

$("#tip").append(""+$("#province").val()+"下城市信息获取成功");

$("#city").html('请选择一个市');

var pros = eval(data);

for (var i=0;i

var cityName = pros[i].name;

var cityValue = pros[i].value;

var opt = $(""+cityName+"");

$("#city").append(opt);

}

});

});

$("#city").change(function() {

$("#tip").append("请求Ajax获取县...");

if ($("#city").val() == '0') {

$("#county").html('');

$("#town").html('');

return;

}

$.get("ajax.do",

{type:'2',

value:$("#city").val(),

time:new Date()

},function(data) {

$("#tip").append(""+$("#city").val()+"下县的信息获取成功");

$("#county").html('请选择一个县');

var pros = eval(data);

for (var i=0;i

var countyName = pros[i].name;

var countyValue = pros[i].value;

var opt = $(""+countyName+"");

$("#county").append(opt);

}

});

});

$("#county").change(function() {

$("#tip").append("请求Ajax获取镇...");

if ($("#county").val() == '0') {

$("#town").html('');

return;

}

$.get("ajax.do",

{type:'3',

value:$("#county").val(),

time:new Date()

},function(data) {

$("#tip").append(""+$("#county").val()+"下镇的信息获取成功");

$("#town").html('');

var pros = eval(data);

for (var i=0;i

var townName = pros[i].name;

var townValue = pros[i].value;

var opt = $(""+townName+"");

$("#town").append(opt);

}

});

});

});

省：

请选择一个省

湖北

市：

县：

镇：

package com.servlet.ajax;

import java.io.IOException;import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

/**

* Servlet implementation class AjaxServlet

*/

@WebServlet("/ajax.do")

public class AjaxServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

/**

* Default constructor.

*/

public AjaxServlet() {

// TODO Auto-generated constructor stub

}

/**

* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)

*/

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

this.doPost(request, response);

}

/**

* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)

*/

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

response.setContentType("text/html;charset=utf-8");

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

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

PrintWriter pw = response.getWriter();

System.out.println(type);

if ("1".equals(type) && value != null && !"".equals(value)) { // 根据省获取市

// 这里可以从数据库获取

if ("hubei".equals(value)) {

StringBuilder citys = new StringBuilder();

citys.append("[");

citys.append("{name:'武汉',value:'hubei001'},");

citys.append("{name:'襄阳',value:'hubei002'}");

citys.append("]");

System.out.println(citys.toString());

pw.print(citys.toString());

}

}

else if ("2".equals(type) && value != null && !"".equals(value)) { // 根据省获取县

// 这里可以从数据库获取

StringBuilder countries = new StringBuilder();

if ("hubei001".equals(value)) {

countries.append("[");

countries.append("{name:'AAA县',value:'wuhan001'},");

countries.append("{name:'BBB县',value:'wuhan002'},");

countries.append("{name:'CCC县',value:'wuhan003'}");

countries.append("]");

}

else if ("hubei002".equals(value)) {

countries.append("[");

countries.append("{name:'南漳县',value:'xiangyang001'},");

countries.append("{name:'古城县',value:'xiangyang002'}");

countries.append("]");

}

System.out.println(countries.toString());

pw.print(countries.toString());

}

else if ("3".equals(type) && value != null && !"".equals(value)) {

StringBuilder towns = new StringBuilder();

if ("wuhan001".equals(value)) {

towns.append("[");

towns.append("{name:'AAA镇',value:'wuhan001'},");

towns.append("{name:'BBB镇',value:'wuhan002'},");

towns.append("{name:'CCC镇',value:'wuhan003'}");

towns.append("]");

}

else if ("wuhan002".equals(value)) {

towns.append("[");

towns.append("{name:'CCC镇',value:'wuhan001'},");

towns.append("{name:'DDD镇',value:'wuhan002'},");

towns.append("{name:'EEE镇',value:'wuhan003'}");

towns.append("]");

}

else if ("wuhan003".equals(value)) {

towns.append("[");

towns.append("{name:'FFF镇',value:'wuhan001'},");

towns.append("{name:'GGG镇',value:'wuhan002'}");

towns.append("]");

}

else if ("xiangyang001".equals(value)) {

towns.append("[");

towns.append("{name:'WWW镇',value:'wuhan001'},");

towns.append("{name:'RRR镇',value:'wuhan002'}");

towns.append("]");

}

else if ("xiangyang002".equals(value)) {

towns.append("[");

towns.append("{name:'XXX镇',value:'wuhan001'},");

towns.append("{name:'YYY镇',value:'wuhan002'}");

towns.append("]");

}

System.out.println(towns.toString());

pw.print(towns.toString());

}

}

}

取消

评论