The design of the data dictionary is--4. Ajax applications for DOM objects

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% ">&lt                                    ; 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> &LT;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