Question

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

<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>

Answer 1

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

在另一个html中显示JSON响应

1 个答案: