从 AJAX 获取 JSON 响应并放入 HTML 以在另一个 JSP 中呈现答案

【问题标题】：Get JSON response from AJAX and put in HTML to be rendered in another JSP从 AJAX 获取 JSON 响应并放入 HTML 以在另一个 JSP 中呈现
【发布时间】：2013-04-11 05:26:35
【问题描述】：

我的 Web 应用程序中有一个 jsp。这个jsp在网格中显示来自json的数据。：

            <!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=ISO-8859-1" />
            <title>ARGO</title>
            <link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
            <link rel="stylesheet" type="text/css" href="jtable/themes/metro/blue/jtable.min.css"/>
            <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
            <script type="text/javascript" src="js/jquery-ui.js"></script>
            <script type="text/javascript" src="jtable/jquery.jtable.min.js"></script>
            <script type="text/javascript" src="js/argo.js"></script>
<body><div id= "ProductTable"></div>
                    $('#ProductTable').jtable({
                        title: 'Table of people',
                        actions: {
                           listAction: '/bsnet/test.html'
                         },

                        fields: {
                            productid: {
                                title: "Organization",
                                width:"20%"
                            },
                            productname: {
                                title: "Role",
                                width: "10%"
                            },
                            unitcost: {
                                title: "Status",
                                width: "20%"
                            }
                        }
                    });
                    $('#ProductTable').jtable('load');
                });
            </script>
            </html>

我正在使用 jtable 在网格中显示内容。
JTable 只需要 JSON 响应。它期望以这种格式响应：

 {  
             "Result":"OK",
             "Records":[
                {"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"}}]}

我的 Web 服务没有发送“结果”：“确定”作为 json 响应的一部分。

所以我决定在其间嵌入一个 HTML，将其添加到响应中并将其发送到 jtable jsp。

            This is the HTML that I created:

                <html>
                    <head>
                        <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
                    </head>
                    <body>
               <!-- placing this in the body of the HTML  -->       
        {"Result":"OK","Records": 
                        <script type="text/javascript">
                        $(document).ready(function(){
    // json file that contains the server response
    // this will be replaced by a web service URL                     
    $.getJSON("/test/data.json", function(data){
    // adding the response to the body
                            $('body').append("<span>"+JSON.stringify(data)+"</span>}");
                          });
                        });
                        </script>
                    </body>
                </html>
             When I refer to the html in the jsp by adding it as part of the URL, I get the entire HTML content like: <html><head>....
            but I want only the json response or the body content 

            {
             "Result":"OK",
             "Records":[
                {"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"}]}

来自jsp中的HTML。这可能吗？
当我在浏览器中点击 HTML 时，我可以看到所需的响应。
有什么帮助？？？

【问题讨论】：

/test/data.json 中有什么
对不起，你的英语很糟糕，我几乎听不懂你写的任何东西。您能否尝试改写它，或者为了清楚起见，从您的代码中提供更多示例？
@HardikMishra 我已经添加了 data.json 中存在的 json 内容。 /test 是我创建的 Web 应用程序的上下文根。
@Max 很抱歉给您带来不便。我已经编辑了我的问题。你现在可以检查一下吗？我对这个问题感到非常沮丧......
@Shashi，感谢您的更新，现在您的问题很清楚了。然而，制作一个只添加“Result: OK”的 JSP 包装器是一个非常糟糕的主意。我现在会尝试想一个更好的解决方案并提交答案。

标签： html ajax json jsp

【解决方案1】：

好的，这是一个使用 JSP scriptlet 的最简单的解决方案：

把这个放到你的包装 JSP 中（只有这个）：

<%@ page import="java.net.URL" %>
<%@ page import="java.io.InputStream" %>
<%@ page import="java.util.Scanner" %>
{
"Result":"OK",
"Records":
<%
    final String yourServiceURL = "your_FULL_Url_with_http_and_stuff";
    final String yourServiceEncoding = "UTF-8";

    final InputStream stream = new URL(yourServiceURL).openStream();
    final String text = new Scanner(stream, yourServiceEncoding ).useDelimiter("\\A").next();
    out.write(text);
%>
}

<%
    response.setContentType("application/json");
%>

如果从流中读取失败，您还可以向该代码添加一些异常处理以生成“结果：错误”。

【讨论】：

谢谢，我会试一试，然后回复你。