Display JSON response in another html

问题

I have a html form which has two input fields and one submit button. When I click on submit button I call restful service using jQuery and get the JSON data successfully. Now I need to display that JSON data in another HTML which doesn't have input fields and submit button. The other html is purely for display of results. Example: Order.html form where user enters 'id' and 'zip’ of the order and gets the result in JSON from restful service, now that data needs to be shown on orderdetails.html. Till now, I can display the data in same html like below. My problem is that I want to show the returned JSON to another html. How should I do this ? Sample Working code which shows the returned JSON in same html –

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

回答1:

You generally want to fetch the JSON data from the view it is being presented in. You could post data to the second html page and then fetch the JSON data on that page and display it. Or Post the json data to the second page and then emit that to the view.

来源：https://stackoverflow.com/questions/17685254/display-json-response-in-another-html

标签

jquery

html

json