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

想来有利有弊,不知怎么权衡,求有经验的大侠指导
2024年11月09日 15:07
有5个网友回答
网友(1):

一般都是后台直接拼接好JSON格式返回,页面解析。
给你看个例子:
<%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%>




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

<裤握局script type="text/javascript" src="js/jquery-1.4.4.min.js">



省:
市:
县:
镇:





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

}

网友(2):

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

网友(3):

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

网友(4):

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

网友(5):

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