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

时间:2013-04-18 07:40:35

标签: html ajax json jsp

我的网络应用程序中有一个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"}}]}

我的网络服务不会发送“结果”:“确定”作为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时,我可以看到所需的响应             任何帮助???

1 个答案:

答案 0 :(得分: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");
%>

如果从流中读取失败,您还可以向该代码添加一些异常处理以生成“Result:ERROR”。