2

我有一个 html 表单，它有两个输入字段和一个提交按钮。当我单击提交按钮时，我使用 jQuery 调用 restful 服务并成功获取 JSON 数据。现在我需要在另一个没有输入字段和提交按钮的 HTML 中显示该 JSON 数据。另一个 html 纯粹是为了显示结果。示例：Order.html 表单，用户输入订单的 'id' 和 'zip' 并从 restful 服务获取 JSON 格式的结果，现在需要在 orderdetails.html 上显示数据。到现在为止，我可以像下面一样以相同的 html 显示数据。我的问题是我想将返回的 JSON 显示到另一个 html。我该怎么做？以相同的 html 显示返回的 JSON 的示例工作代码 -</p> 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="/resources/themes/master.css" rel="stylesheet" type="text/css">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script src="/resources/scripts/mysamplecode.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function() {

 //Stops the submit request
 $("#myAjaxRequestForm").submit(function(e){
        e.preventDefault();
 });

 //checks for the button click event
 $("#myButton").click(function(e){

   //get the form data and then serialize that
         dataString = $("#myAjaxRequestForm").serialize();

   //getJSON request to the Java Servlet
   $.getJSON("../../retail/rest/ordersDetails/?orderId=" + $('#orderId').val() +
        "&zipCode=" + $('#zipCode').val(), dataString, function( data, textStatus, jqXHR) { 
           //our country code was correct so we have some information to display            

            $("#myExample").hide();

                    $("#ajaxResponse").html("");
            $("#ajaxResponse").append("<h1> Order tracking Information -</h1> "+ "<br/> ");
                    $("#ajaxResponse").append("<b>Order No :</b> " + data.orderID + "<br/> ");
            $("#ajaxResponse").append("<b>Order No in item:</b> " + data.items[1].description + "<br/> ");
            $("#ajaxResponse").append("<b>Date :</b> "      + data.orderDate + "<br/> ");
            $("#ajaxResponse").append("<b>Order Status :</b> " + data.statusDescription + "<br/> ");

          })

  });

});  
</script>
<div id="allContent">
  <div id="myExample">
 <form id="myAjaxRequestForm">  
   <h1> Please enter the Order Information -</h1>
    <label for="orderId">Order Id:</label>
    <input id="orderId" name="orderId" type="text"><br/>
    <br/>
    <label for="zipCode">ZIP Code:</label>
    <input id="zipCode" name="zipCode" type="text"><br/>
    <br/>
    <input id="myButton" type="button" value="Submit">
</form>
</div>
 <div id="ajaxResponse">

</div>
</div>
</head></html>
4

1 回答 1

0

您通常希望从正在呈现的视图中获取 JSON 数据。您可以将数据发布到第二个 html 页面，然后在该页面上获取 JSON 数据并显示它。或者将 json 数据发布到第二页，然后将其发送到视图。

于 2013-07-16T19:32:06.623 回答