ajax响应html格式
坚持每天写博文，记录开发中的点点滴滴
ajax属于客户端的程序,java(php,asp,asp.net)属于服务器的程序.
ajax发送一个请求后,需要接受数据,但是服务器的数据无法直接在客户端使用.
问题:服务器返回的数据应该是客户端能认识的数据. 服务器的数据需要转换为客户端的数据. 客服端只认字符串.
总结:服务器返回的数据只能是字符串文本.
html格式:使用简单,后台直接生成前台需要的html代码,然后前台通过innerHTML直接设置,但是返回的html代码只能为某一个标签使用,还有浏览器兼容问题.
xml格式:使用麻烦,但是xml只负责数据的描述,不负责数据的显示格式,这样这个数据在任何地方都可以使用,而且xml是网络传输标准格式(但是目前不使用它,而使用JSON)
这里以一个例子来说明：省市级联
先写两个bean，并模拟一些数据：
City:
package Ajax.city;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
/**
* 城市对象
*
* @author YaoXin
*/
/**
*
* json对象描述city对象
* {
* "id":1,
* "name":"四川"
* }
*
* json对象描述多个city对象
* [
* {
* "id":1,
* "name":"四川"
* },
* {
* "id":2,
* "name":"云南"
* }
* ]
*/
public class City {
private Long id;
private String name;
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public City() {
}
public City(Long id, String name) {
super();
this.id = id;
this.name = name;
}
/**
* 根据省份id查询省份中的城市!
*
* @return
*/
public static List getCityByProvinceId(Long id) {
List citys = new ArrayList();
if (id == 1) {
citys = Arrays.asList(
new City(1L,"成都"),
new City(2L,"南充"),
new City(3L,"绵阳"),
new City(4L,"遂林"),
new City(5L,"达州"),
new City(6L,"德阳"),
new City(7L,"乐山")
);
} else if (id == 2) {
citys = Arrays.asList(
new City(11L,"广州"),
new City(12L,"佛山"),
new City(13L,"东莞")
);
} else if (id == 3) {
citys = Arrays.asList(
new City(21L,"昆明"),
new City(22L,"玉溪"),
new City(23L,"丽江")
);
}
return citys;
}
}
Province:
package Ajax.city;
import java.util.ArrayList;
import java.util.List;
/**
* 省份
* @author Administrator
*/
/**
* xml 描述一个对象
*
*
* 四川
*
*
* 云南
*
*
*/
public class Province {
private Long id;
private String name;
public Province(Long id, String name) {
super();
this.id = id;
this.name = name;
}
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Province() {
super();
}
public static List getAllProvince() {
List provinces = new ArrayList();
provinces.add(new Province(1L, "四川"));
provinces.add(new Province(2L, "广东"));
provinces.add(new Province(3L, "云南"));
return provinces;
}
}
写一个html:city.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ajax响应格式(HTML)title>
<script type="text/javascript" src="../../jquery.min.js">script>
<script type="text/javascript" src="../../city_html.js">script>
<script type="text/javascript">
script>
head>
<body>
省份:<select id="provinceSelect" onchange="provinceSelectChange()">
<option value="-1">--请选择--option>
select>
城市:<select id="citySelect">
<option value="-1">--请选择--option>
select>
body>
html>引入了Query和一个自己写的city_html.js，city_html.js：
//页面加载完毕事件
window.onload = function(){
//console.debug(document.getElementById("provinceSelect"));
$.get("../../CityHTMLServlet?cmd=listProvince",function(data){
document.getElementById("provinceSelect").innerHTML += data;
});
};
function provinceSelectChange(){
//获取当前选中的id
var provinceId = document.getElementById("provinceSelect").value;
var citySelect = document.getElementById("citySelect");
citySelect.innerHTML = "";
if(provinceId==-1){
return;
}
$.get("../../CityHTMLServlet?cmd=listCity","provinceId="+provinceId,function(data){
citySelect.innerHTML += data;
});
}CityHTMLServlet：
package Ajax.city;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/CityHTMLServlet")
public class CityHTMLServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
/**
* cmd=listProvince 获取所有省份列表
* cmd=listCity 获取某个省份对应的城市列表 provinceId省份的id.
*/
String cmd = request.getParameter("cmd");
if("listProvince".equals(cmd)){
List provinces = Province.getAllProvince();
/*
*/
for (Province province : provinces) {
out.println("+province.getName()+"");
}
}else if("listCity".equals(cmd)){
String id = request.getParameter("provinceId");
List citys = City.getCityByProvinceId(Long.parseLong(id));
for (City city : citys) {
out.println("+city.getName()+"");
}
}
}
}
这些代码都比较简单，这里贴上代码作为记录