我想在jsp页面中显示来自servlet的json响应。下面是代码。但是当我包含json2.js时,浏览器会报告语法错误。我在liferay门户网站上工作。如果我做错了,请建议。
<html>
<head><script type="text/javascript"> var AJAX_SERVLET="<%=renderResponse.encodeURL(renderRequest.getContextPath())%>/ajaxServlet";
</script>
<script type="text/javascript" src="json2.js">
/**
* This file contains the base Ajax call to Servlet
*/
function getXMLObject() //XML OBJECT
{
//alert("loading...");
var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP") // For Old Microsoft Browsers
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") // For Microsoft IE 6.0+
} catch (e2) {
xmlHttp = false // No Browser accepts the XMLHTTP Object then false
}
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest(); //For Mozilla, Opera Browsers
}
return xmlHttp; // Mandatory Statement returning the ajax object created
}
var xmlhttp = new getXMLObject(); //xmlhttp holds the ajax object
function ajaxFunction() {
if (xmlhttp) {
xmlhttp.open("GET", AJAX_SERVLET, true); //AJAX_SERVLET has the servlet path
xmlhttp.onreadystatechange = handleServerResponse;
//xmlhttp.setRequestHeader('Content-Type',
//'application/x-www-form-urlencoded');
xmlhttp.send(null);
}
}
function handleServerResponse() {
alert(xmlhttp.readyState);
if (xmlhttp.readyState == 4) {
alert(xmlhttp.status);
if (xmlhttp.status == 200) {
alert(xmlhttp.responseText);
var json = JSON.parse(xmlhttp.responseText);
alert (json);
// json now contains an array of objects, eg:
//
// [
// {
// "productNumber" : "001",
// "productType" : "User Manual",
// "funcDesignation": "Operator"
// }
// ]
// grab the first (and only) object in the array
var firstRecord = json[0];
// update the UI by selecting DOM elements and rewriting their contents
document.getElementById('product-number').innerHTML = firstRecord.productNumber;
document.getElementById('product-type').innerHTML = firstRecord.productType;
document.getElementById('func-designation').innerHTML = firstRecord.funcDesignation;
} else {
alert("Error during AJAX call. Please try again");
}
}
}</script>
</head>
<body>
<form name="myForm">
<h4>
<b>Hello</b>,
</h4>
<h5><%=renderRequest.getAttribute("userName")%></h5>
<div id="maincontent">
<div class="innertube">
<h4>Search Criteria</h4>
<table style="border: 1px solid #9f9f9f; float: left"
cellspacing="1">
<table style="border: 1px solid #9f9f9f; float: right;">
<tr><td><label for="status">Search Status</label></td>
<td><input type="text" id="status" name="status" dojoType="dijit.form.TextBox" size="40"
value="Please enter search criteria" /></td>
</tr>
<tr>
<td><label for="push">Push to start</label></td>
<td><button dojoType="dijit.form.Button" style="width: 4em" type="button" name="submitButton" value="Submit" onclick="ajaxFunction()"></button></td>
</tr>
</table>
</div>
</div>
<div id="framecontent">
<div class="innertube">
<div>Number: <span id="product-number"></span></div>
<div>Type: <span id="product-type"></span></div>
<div>Function: <span id="func-designation"></span></div>
</div>
</div>
</form>
</body>
</html>
答案 0 :(得分:3)
似乎/json2.js指向非JavaScript文件。你可以验证服务器上是否存在此文件,并且/json2.js已解析为所需文件?否则,使用JSON解析器实现的绝对路径:
<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
答案 1 :(得分:0)
您可以使用<script>
标记在页面或中包含脚本以加载外部文件。所以:
<script type="text/javascript" src="json2.js" />
<script type="text/javascript">
/**
* This file contains the base Ajax call to Servlet
*/
function getXMLObject() //XML OBJECT
{}
</script>