• 首页

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

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

    推荐答案   推荐于2017-10-07
    一般都是后台直接拼接好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里只是解析并显示了而已。

    追问

    谢谢。那这样用js解析，搜索引擎不是收录不到了么

    追答

    你关心这个干嘛？？

    温馨提示：答案为网友推荐，仅供参考
    其他回答
    第1个回答  2013-03-05
    返回JSON数据吧,然后用JS进行拼接字符串到Document中追问

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

    追答

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

    第2个回答  2015-12-17
    建议json用来传输数据，然后在前台进行拼接显示
    第3个回答  推荐于2017-10-13
    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>";
    第4个回答  2013-03-05
    建议后台！js兼容性不好！

    相关了解……

    你可能感兴趣的内容

    大家正在搜
    ajax获取jsonajax拿json数据怎么拿ajax处理返回的jsonjson与ajax一起用json和ajax结合使用怎么把ajax里的json取出来ajax读取jsonjs处理json数据javascript json
    相关问题
    如何将ajax得来json数据快速展示到html代码中
    用ajax获取后台数据，返回json数据，怎么在前
    ajax得到后台返回的json值以后网页怎么使用
    那个由ajax经后台返回了一个json数据，在sucess那...
    如何在HTML页面获取ajax返回的json
    怎样实现用ajax向服务器发送请求并接收服务器返回的数据，并...
    在项目里我用jquery进行ajax请求服务器 服务器返回的...
    第一个html ajax请求了后台，在后台写了json数据 ...

    本站内容来自于网友发表，不代表本站立场，仅表示其个人看法，不对其真实性、正确性、有效性作任何的担保
    相关事宜请发邮件给我们
    © 非常风气网