由于篇幅的问题:js跟html写在一直页面上
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %> <%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %> <%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %> <%@ page language="java" pageEncoding="GB2312" %> <html:html locale="true"> <head> <title><bean:message key="strutsAjax.project.name"/></title>
<html:base/> </head>
<body>
<!-- New - Make the Ajax javascript available --> <script type="text/javascript"> /** * Ajax.js * * Collection of Scripts to allow in page communication from browser to (struts) server * ie can reload part instead of full page * * How to use * ========== * 1) Call retrieveURL from the relevant event on the HTML page (e.g. onclick) * 2) Pass the url to contact (e.g. Struts Action) and the name of the HTML form to post * 3) When the server responds ... * - the script loops through the response , looking for <span id="name">newContent</span> * - each <span> tag in the *existing* document will be replaced with newContent * * NOTE: <span id="name"> is case sensitive. Name *must* follow the first quote mark and end in a quote * Everything after the first ‘>‘ mark until </span> is considered content. * Empty Sections should be in the format <span id="name"></span> */
//global variables var xmlHttp; var which;
/** * Get the contents of the URL via an Ajax call * url - to get content from (e.g. /struts-ajax/sampleajax.do?ask=COMMAND_NAME_1) * nodeToOverWrite - when callback is made * nameOfFormToPost - which form values will be posted up to the server as part * of the request (can be null) */ function createXMLHttRequest() { //Do the Ajax call if (window.XMLHttpRequest) { // Non-IE browsers xmlHttp = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } } function startXmlRequest(url, formname) { createXMLHttRequest(); try { xmlHttp.open("POST", url, true); xmlHttp.onreadystatechange = processStateChange; xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlHttp.send(getFormAsString(formname)); } catch (e) { alert("Problem Communicating with Server\n" + e); } } function processStateChange() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { parseResults(); } else { alert("Problem with server response:\n " + xmlHttp.statusText); } } } function getFormAsString(formName) { returnString = ""; formElements = document.forms[formName].elements; for (var i = formElements.length - 1; i >= 0; --i) { returnString = returnString + "&" + formElements[i].name + "=" + formElements[i].value; } return returnString; } function parseResults() { clearSelectOptions(); var customer = xmlHttp.responseXML.getElementsByTagName("customer"); var resultSelect = document.getElementById("results"); var option = null; var id = ""; var name = ""; var optionNode = null; for (var i = 0; i < customer.length; i++) { option = document.createElement("option"); optionNode = customer[i]; name = optionNode.getElementsByTagName("name")[0].firstChild.nodeValue; id = optionNode.getElementsByTagName("id")[0].firstChild.nodeValue; option.appendChild(document.createTextNode(name)); option.setAttribute("value", id); resultSelect.onchange = function() { findResultsById(‘/findcustomer.do‘); }; resultSelect.appendChild(option); } parseResult(); } function parseResult() { var results = xmlHttp.responseXML; var property = null; var hid = ""; var name = ""; var age = ""; var address = ""; var postcode = ""; var customer = results.getElementsByTagName("customer"); if (customer.length > 0) { hid = results.documentElement.childNodes[0].childNodes[0].baseName; //alert(hid); hname = results.documentElement.childNodes[0].childNodes[1].baseName; //alert(hname); hage = results.documentElement.childNodes[0].childNodes[2].baseName; //alert(hage); haddress = results.documentElement.childNodes[0].childNodes[3].baseName; //alert(haddress); hpostcode = results.documentElement.childNodes[0].childNodes[4].baseName; //alert(hpostcode); //表头 // addTableRow(hid, hname, hage, haddress, hpostcode); for (var i = 0; i < customer.length; i++) { property = customer[i]; //表内容 id = property.getElementsByTagName("id")[0].firstChild.nodeValue; name = property.getElementsByTagName("name")[0].firstChild.nodeValue; age = property.getElementsByTagName("age")[0].firstChild.nodeValue; telephone = property.getElementsByTagName("telephone")[0].firstChild.nodeValue; address = property.getElementsByTagName("address")[0].firstChild.nodeValue; postcode = property.getElementsByTagName("postcode")[0].firstChild.nodeValue; addTableRow(id, name, age, telephone, address, postcode); } } } function clearSelectOptions() { var results = document.getElementById("results"); while (results.childNodes.length > 0) { results.removeChild(results.childNodes[0]); } clearResoults(); } function clearResoults() { var tableBody = document.getElementById("resultBody"); while (tableBody.childNodes.length > 0) { tableBody.removeChild(tableBody.childNodes[0]); } } function findResultsById(url) { createXMLHttRequest(); var id = "id=" + document.getElementById("results").value; //alert(id); try { xmlHttp.open("POST", url, true); xmlHttp.onreadystatechange = parseCustomerResult; xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlHttp.send(id); } catch (e) { alert("Problem Communicating with Server\n" + e); } } function parseCustomerResult() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { clearResoults(); var customer = xmlHttp.responseXML.getElementsByTagName("customer"); parseResult(customer); } else { alert("Problem with server response:\n " + xmlHttp.statusText); } } } setTimeout("startXmlRequest(‘/customer.do?ask=COMMAND_NAME_1‘,‘customerForm‘);", 500);
function addTableRow(id, name, age, telephone, address, postcode) { var row = document.createElement("tr");
var cell = createCellWithText(id); row.appendChild(cell);
var cell = createCellWithText(name); row.appendChild(cell);
var cell = createCellWithText(age); row.appendChild(cell);
var cell = createCellWithText(telephone); row.appendChild(cell);
var cell = createCellWithText(address); row.appendChild(cell);
var cell = createCellWithText(postcode); row.appendChild(cell);
document.getElementById("resultBody").appendChild(row); } function createCellWithText(text) { var cell = document.createElement("td"); var textNode = document.createTextNode(text); cell.appendChild(textNode); cell.setAttribute("align","left"); return cell; } </script>
<h3><bean:message key="strutsAjax.project.name"/></h3>
<!-- Struts Automatically uses same name as FormBean from struts-config.xml--> <html:form action="/customer.do">
<!-- Sample Form Values --> <table> <tr> <td><bean:message key="strutsAjax.page.label.name"/></td> <!-- New Javascript event attached--> <td><html:text property="name"/></td> </tr> <tr> <td><bean:message key="strutsAjax.page.label.age"/></td> <!-- New Javascript event attached--> <td><html:text property="age"/></td> </tr> <tr> <td><bean:message key="strutsAjax.page.label.telephone"/></td> <!-- New Javascript event attached--> <td><html:text property="telephone"/></td> </tr> <tr> <td><bean:message key="strutsAjax.page.label.address"/></td> <!-- New Javascript event attached--> <td><html:text property="address"/></td> </tr> <tr> <td><bean:message key="strutsAjax.page.label.postcode"/></td> <!-- New Javascript event attached--> <td><html:text property="postcode"/></td> </tr> <tr> <td></td> <!-- New Javascript event attached-->
<td> </td> </tr> </table> <html:button property="buttonName" onclick="startXmlRequest(‘/customer.do?ask=COMMAND_NAME_1‘,‘customerForm‘);"> <bean:message key="strutsAjax.page.button.submit"/></html:button> </html:form> <bean:message key="strutsAjax.page.label.select"/> <select id="results">
</select> <br><br> <span style="font-weight:bold;">Results:</span> <table id="resultsTable" width="75%" border="0"> <tr> <td><bean:message key="strutsAjax.page.label.id"/></td> <td><bean:message key="strutsAjax.page.label.name"/></td> <td><bean:message key="strutsAjax.page.label.age"/></td> <td><bean:message key="strutsAjax.page.label.telephone"/></td> <td><bean:message key="strutsAjax.page.label.address"/></td> <td><bean:message key="strutsAjax.page.label.postcode"/></td> </tr> <tbody id="resultBody">
</tbody> </table> </body> </html:html>
|