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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.