Requirements: Click the dropdown box, select a data type, and automatically display the name of all data items under that type in the form, that is, all the non-repeating ddlname of the same keyword in the database.
1. Add in dictionaryindex.jsp:
<script type= "Text/javascript" src= "${pagecontext.request.contextpath}/script/pub.js" ></script>
2. Call the JS code:
functionchangetype () {if(document. form1.keyword.value== "Jerrynew"){ varTextstr= "<input type=\" text\ "name=\" keywordname\ "maxlength=\" 50\ "size=\" 24\ ">"; document.getElementById ("Newtypename"). Innerhtml= "type name:"; document.getElementById ("Newddltext"). innerhtml=Textstr; Pub.submitactionwithform (' Form2 ', ' ${pagecontext.request.contextpath}/system/elecsystemddlaction_edit.do ', ' Form1 '); }Else{ varTextstr= ""; document.getElementById ("Newtypename"). Innerhtml= ""; document.getElementById ("Newddltext"). innerhtml=Textstr; /** parameter one: Pass dictionaryindex.jsp's From2 form * parameter two: Pass URL path address * parameter three: Delivery dictionary Index.jsp's From1 form principle: Use AJAX * To pass all the elements in the form Form1 in the dictionaryindex.jsp as parameters, passed to the service Processing the processed results into dictionaryedit.jsp * Place the entire contents of the dictionaryedit.jsp page into the DICTIONARYINDEX.J SP form Form2*/Pub.submitactionwithform (' Form2 ', ' ${pagecontext.request.contextpath}/system/elecsystemddlaction_edit.do ', ' Form1 '); } }
View Code
Where the Submitactionwithform method is defined in the pub.js.
3. Define 5 methods in Pub.js: (1)Pub.submitactionwithform Method
/** * domid: Name of form Form2 * Action: Indicates URL connection * sform: Name of form Form1*/Pub.submitactionwithform=function(domid,action,sform) {/** First step: Create an Ajax engine object*/ varreq =pub.newxmlhttprequest (); /** Step Two: Req.onreadystatechange represents an event handler (equivalent to a listener) that listens to the client-server connection state*/ varHandlerfunction =Pub.getreadystatehandler (req, domid,pub.handleresponse); Req.onreadystatechange=handlerfunction; /** Step three: Open a connection, ask: If it is a POST request, you need to set a header information, otherwise you can not use the Req.send () method to send data to the server*/Req.open ("POST", Action,true); Req.setrequestheader ("Content-type", "application/x-www-form-urlencoded"); /** Fourth step: Send data to the server, format: Name= Zhang San &age=28*/ varstr =pub.getparams2str (sform); //passing elements in form Form1 as parameters to the serverreq.send (str);}
(2) pub.newxmlhttprequest method
/** * for creating AJAX engines*/pub.newxmlhttprequest=functionnewxmlhttprequest () {varXMLreq =false; if(window. XMLHttpRequest) { xmlreq = new XMLHttpRequest (); } Else if(window. ActiveXObject) {Try{xmlreq=NewActiveXObject ("Msxml2.xmlhttp"); } Catch(E1) {Try{xmlreq=NewActiveXObject ("Microsoft.XMLHTTP"); } Catch(E2) {alert (E2); } } } returnXMLreq;}
XMLreq = new XMLHttpRequest () is the core object of AJAX operations
(3)Pub.getparams2strMethod
/** * @Description: Pass elements in form Form1 as parameters * @param sform: Pass the name of the form Form1 * @returns {String}: Use Ajax to return server-side parameters, The parameters of the elements in the form Form1 are passed*/Pub.getparams2str=functionGetparams2str (sform) {varStrdiv= ""; Try { varobjform=Document.forms[sform]; if(!objform)returnStrdiv; varElt,sname,svalue; for(varFLD = 0; FLD < ObjForm.elements.length; fld++) {ELT=OBJFORM.ELEMENTS[FLD]; SName=Elt.name; Svalue=""+Elt.value; if(fld==objform.elements.length-1) Strdiv=strdiv + sname+ "=" +svalue+ ""; ElseStrdiv=strdiv + sname+ "=" +svalue+ "&"; } } Catch(ex) {returnStrdiv; } returnStrdiv;}
(4)Pub.getreadystatehandlerMethod
/** * @Description: Receive server-side results returned * @param req: Engine Object * @param eleid: Name of form Form2 * @param responseXmlHandler:Pub.handleRespon SE (functional body) * @returns {function}*/Pub.getreadystatehandler=functionGetreadystatehandler (req, eleid,responsexmlhandler) {return function () { /** req.readystate: Used to listen to the client and server connection status * 0: This time the client does not call the open () method * 1: Indicates that the client executes the open method, but the Send method does not execute the * 2:open method Execute, the Send method also executes * 3: The server starts processing data and returns data * 4: Returns data successfully, only 4 this state, to get the results returned by the server side*/ if(Req.readystate = = 4) { /** * Req.status: Indicates Java status code * 404: Path Error * 500: Server Exception * 200: Indicates no exception, normal access to data, only 200 this state, to obtain the server side The returned result*/ if(Req.status = = 200) { /** * Req.responsetext: Gets the result returned by the server side, returns the result of the text (including: string, JSON data) * Req.responsexml: Gets the result returned by the server side, returns the XML data Results*/Responsexmlhandler (Req.responsetext,eleid); } Else{alert ("HTTP Error:" +req.status); return false; } } }
(5)Pub.handleresponseMethod
/**/pub.handleresponsefunction handleresponse (data,eleid) { // Get the Form2 object of the form var ele =document.getElementById (eleid) ; // Place the returned results in the elements of the form Form2 ele.innerhtml = data; }
Next is the action class operation, need to the database according to keyword query the corresponding ddlname. Operation:
4. Add the edit () method to the Elecsystemddlaction
/** * @Name: Edit * @Description: Jump to data Dictionary edit page * @Parameters: No * @Return: String: Jump to system/ dictionaryedit.jsp * /Public String edit () {//1. Gets the data type String keyword = elecsystemddl.getkeyword () ; // 2. Query data dictionary Using data type, return list<elecsystemddl> List<elecsystemddl> list=elecsystemddlservice.findsystemddllistbykeyword (keyword); Request.setattribute ("list", list); return "Edit"; }
Declaration in 5.IElecSystemDDLService
list<elecsystemddl> findsystemddllistbykeyword (String keyword);
overriding methods in 6.ElecSystemDDLServiceImpl
/*** @Name: Findsystemddllistbykeyword * @Description: Querying data dictionary by data type name * @Parameters: Keyword: data type name * @Ret Urn:list: Storing Elecsystemddl object Collections*/@Override PublicList<elecsystemddl>findsystemddllistbykeyword (String keyword) {//Query CriteriaString condition= ""; //parameters corresponding to the query criteriaList<object> paramslist =NewArraylist<object>(); if(Stringutils.isnotblank (keyword)) {condition= "and o.keyword=?"; Paramslist.add (keyword); } //Passing variable parametersObject[] params =Paramslist.toarray (); //Sortmap<string, string> =NewLinkedhashmap<string, string>(); Orderby.put ("O.ddlcode", "ASC"); List<ElecSystemDDL> list =Elecsystemddldao.findcollectionbyconditionnopage (condition, params, by-and-by); returnlist; }
where the findcollectionbyconditionnopage (condition, params, by way) method is the Commondao implementation of a method that returns a query result set (without paging) according to the specified criteria
7.dictionaryedit.jsp traversing the value of an object
<% @taglib uri= "/struts-tags" prefix= "s"%>
<s:if Test= "#request. List!=null && #request. List.size () >0" > <s:iterator value= "#request. Lis T "> <tr> <td class=" ta_01 "align=" center "width=" 20% ">< ; S:property value= "Ddlcode"/></td> <td class= "ta_01" align= "center" width= "60%" > <input id= "<s:property value=" Ddlcode "/>" name= "ItemName" type= "text" value= "& Lt;s:property value= "Ddlname"/> "size=" "maxlength=" ></td> <td class= "ta_01 "align=" center "width=" 20% "> <a href=" # "onclick=" Deltablerow (' <s:property VA Lue= "Ddlcode"/> ') "> </a> </td> </tr> </s:iterator> </s:if> <s: Else> <tr> <td class= "ta_01" align= "center" width= "20%" >1</td> <TD class= "ta_01" align= "center" width= "60%" > <input name= "I Temname "type=" text "size=" maxlength= "> </td> <td class=" t a_01 "align=" center "width=" 20% "></td> </tr> </s:else>
Effect Show:
Complete the selection type list to implement the content substitution for the Form2 form.
The design of the data dictionary is--4. Ajax applications for DOM objects