ajax获取数据，应该返回json用js拼接还是在后台拼接HTML完再返回

想来有利有弊，不知怎么权衡，求有经验的大侠指导... 想来有利有弊，不知怎么权衡，求有经验的大侠指导展开

 我来答

5个回答

#合辑# 机票是越早买越便宜吗？

冰火两重天
推荐于2017-10-07 · TA获得超过1425个赞

知道小有建树答主

回答量：1489

采纳率：0%

帮助的人：988万

我也去答题访问个人页

关注

展开全部

一般都是后台直接拼接好JSON格式返回，页面解析。
给你看个例子：
<%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%>
<!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=GB18030">
<title>四级联动下拉列表选中值保持不变</title>
<style type="text/css">
div #tip {
font:consolas normal 20px;
color:blue;
}
</style>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(function() {
$("#province").change(function() {
if ($("#province").val() == '0') {
$("#city").html('');
$("#county").html('');
$("#town").html('');
return;
}
$("#tip").append("<span>请求Ajax获取城市...<br></span>");
$.get("ajax.do",
{type:'1',
value:$("#province").val(),
time:new Date()
},function(data) {
$("#tip").append("<span>"+$("#province").val()+"下城市信息获取成功<br></span>");
$("#city").html('<option value="0" selected="selected">请选择一个市</option>');
var pros = eval(data);
for (var i=0;i<pros.length;i++) {
var cityName = pros[i].name;
var cityValue = pros[i].value;
var opt = $("<option value='" + cityValue + "'>"+cityName+"</option>");
$("#city").append(opt);
}
});
});
$("#city").change(function() {
$("#tip").append("<span>请求Ajax获取县...<br></span>");
if ($("#city").val() == '0') {
$("#county").html('');
$("#town").html('');
return;
}
$.get("ajax.do",
{type:'2',
value:$("#city").val(),
time:new Date()
},function(data) {
$("#tip").append("<span>"+$("#city").val()+"下县的信息获取成功<br></span>");
$("#county").html('<option value="0" selected="selected">请选择一个县</option>');
var pros = eval(data);
for (var i=0;i<pros.length;i++) {
var countyName = pros[i].name;
var countyValue = pros[i].value;
var opt = $("<option value='" + countyValue + "'>"+countyName+"</option>");
$("#county").append(opt);
}
});
});
$("#county").change(function() {
$("#tip").append("<span>请求Ajax获取镇...<br></span>");
if ($("#county").val() == '0') {
$("#town").html('');
return;
}
$.get("ajax.do",
{type:'3',
value:$("#county").val(),
time:new Date()
},function(data) {
$("#tip").append("<span>"+$("#county").val()+"下镇的信息获取成功<br></span>");
$("#town").html('');
var pros = eval(data);
for (var i=0;i<pros.length;i++) {
var townName = pros[i].name;
var townValue = pros[i].value;
var opt = $("<option value='" + townValue + "'>"+townName+"</option>");
$("#town").append(opt);
}
});
});
});
</script>
</head>
<body>
省：<select id="province">
<option value="0" selected="selected">请选择一个省</option>
<option value="hubei">湖北</option>
</select>
市：<select id="city"></select>
县：<select id="county"></select>
镇：<select id="town"></select>

<div id="tip"></div>
</body>
</html>

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());
}
}

}

更多追问追答

追问

若是个留言页面，打开显示第一页，随后用Ajax翻页。
在js里拼接，那不是得一开始在后台拼接第一页，翻页时又换在js里拼接，同个方法前台后台写两次吗？

追答

第一次的时候会把总页数，一次显示多少页，当前是第几页，还有你要显示的第一页的数据拼接成json格式，然后前台js解析显示。翻页时，将当前页还有查询条件带回使用Ajax获取数据，然后显示。一直都是在后台拼接，JS里只是解析并显示了而已。

已赞过 已踩过<

评论收起

百度网友4769606
2013-03-05 · TA获得超过237个赞

知道小有建树答主

回答量：203

采纳率：0%

帮助的人：121万

我也去答题访问个人页

关注

展开全部

返回JSON数据吧,然后用JS进行拼接字符串到Document中

追问

若是个留言页面，打开显示第一页，随后用Ajax翻页。
在js里拼接，那不是得一开始在后台拼接第一页，翻页时又换在js里拼接，同个方法前台后台写两次吗？

追答

这个看你做不做SEO之类的,如果不做SEO那直接第一页也可以考虑用JS加载
如果要做SEO,建议你不要用Ajax实现

已赞过 已踩过<

评论收起

术士2010
2015-12-17 · 超过45用户采纳过TA的回答

知道小有建树答主

回答量：137

采纳率：0%

帮助的人：91万

我也去答题访问个人页

关注

展开全部

建议json用来传输数据，然后在前台进行拼接显示

已赞过 已踩过<

评论收起

sunjinfu1987
推荐于2017-10-13 · TA获得超过3151个赞

知道大有可为答主

回答量：1218

采纳率：72%

帮助的人：405万

我也去答题访问个人页

关注

展开全部

1、后台程序生成json数据，不用拼接直接返回
2、ajax接收数据后，调用js解析json数据，可以利用jquery.parseJSON()方法解析
3、解析之后得到obj对象，然后可以直接obj.name这样获取对象属性
4、用html代码拼接
示例：
var obj = jQuery.parseJSON('{"name":"John","age":"20"}');
比如拼接为表格的tr
html = "<tr><td>" + obj.name + "</td><td>" + obj.age + "</td></tr>";

已赞过 已踩过<

评论收起

rkc009
2013-03-05 · TA获得超过1499个赞

知道大有可为答主

回答量：2098

采纳率：60%

帮助的人：1685万

我也去答题访问个人页

关注

展开全部

建议后台！js兼容性不好！

已赞过 已踩过<

评论收起

更多回答（3）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

ajax获取数据，应该返回json用js拼接 还是在后台拼接HTML完再返回

其他类似问题

为你推荐：

ajax获取数据，应该返回json用js拼接还是在后台拼接HTML完再返回