在另一个HTML中显示JSON响应 [英] Display JSON response in another html
问题描述
我有一个html表单，其中有两个输入字段和一个提交按钮.当我单击Submit按钮时，我使用jQuery调用Restful服务并成功获取JSON数据.现在，我需要在另一个没有输入字段和提交按钮的HTML中显示该JSON数据.另一个html纯粹是为了显示结果. 例子: 现在，用户需要在orderdetails.html上显示数据的Order.html表单，用户在其中输入订单的'id'和'zip'并从RESTful服务获取JSON结果. 到现在为止，我可以像下面一样在html中显示数据. 我的问题是我想将返回的JSON显示给另一个html.我该怎么办? 示例工作代码以相同的html显示返回的JSON –
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>
推荐答案
通常，您希望从呈现它的视图中获取JSON数据.您可以将数据发布到第二个html页面，然后在其上获取JSON数据.该页面并显示它.或将json数据发布到第二页，然后将其发送到视图.
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.
这篇关于在另一个HTML中显示JSON响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
