Ajax configuration details, Ajax invocation explanations, Ajax Chinese garbled and Ajax form submissions (with examples)

This article mainly describes the use of Ajax summary, and AJAX configuration, call, Chinese garbled, form submission, and so on in detail, now let's look at this article

use of jquery
0. You must first introduce jquery.js or you cannot invoke the jquery framework
1, JS case-sensitive, from the name of the time to pay attention to
2. jquery Gets the value of the page text based on the ID property of P: $ ("#demoID"). Val (), gets the value of the page text according to the class property $ (". DemoCLASS"). Val () If it is an assignment of $ ("#demoID"). Val (" Parameters of the assignment ")
3, $ (document). Ready (function () {code}), $ (). Ready (function () {code}), $ (function () {code}).
4, more than $ (function () {code}) can coexist, that is, as long as the name is not repeated can play a role
5, $ (function () {code}) means that the page is loaded and run, such as auto-click, Auto-frame, or tap or other listening
6. The difference between the click and click Monitoring (very useful for reference)
For example, there is now a JS method, function demofunction () {alert ("This method runs");};
When you are finished loading, click: $ ("#demoid"). Click (Demofunction ());
After loading the listener, this method can only be in the button has click this action, or through jquery has the Click () Action: $ ("#demoid"). Click (function () {demofunction ()});
7, if the automatic loading is running, or need to be monitored to be placed into the $ (document). Ready (function () {code}) in the code
8. The difference between window.onload=function () {code} and $ (function () {code})
• The calling function is used differently:
Window.onload = function () {code};
$ (function () {code})
• Different times for calling functions
Window.load=function () {code}: You must wait for all content in the Web page to be loaded (including pictures) to perform, such as uploading features.
$ (function () {code}) until all the DOM structures in the Web page have been drawn and executed.
9. Ajax topics
• Required jar Packages: Commons-lang-2.5.jar, Commons-lang3-3.1.jar, Javassist-3.11.0.ga.jar
• The front desk JS writing: In order to simplify the process, written page loading is run
$ (document). Ready (function () {
$.ajax ({

URL: "Testajax.do",//Request address//timeout:600000,//time-out setting, per millisecond async:false,//asynchronous cache:false,//Cache type: ' Post ',//Request mode data : {"name": "123"},//data: $ (' #formid '). Serialize (),//serialization form-When a form form is triggered to submit an AJAX event, This serialization method automatically converts the data into JSON format to the backend datatype: ' JSON ',///The server returns the data type Success:function (msg) {/////request succeeded after the call of alert ("Return JSON experiment succeeded" + " Msg.resultcode= "+msg.resultcode+" msg.name= "+msg.name";},error:function () {Alert ("Exception");});});      

How to struts.xml a file

      <?xml version= "1.0" encoding= "UTF-8"?> <!      DOCTYPE struts public    "-//apache software foundation//dtd struts Configuration 2.3//en"    "/http Struts.apache.org/dtds/struts-2.3.dtd ">    <struts>    <!--omit some struts2 configuration information--><package name = "Myajax" extends= "Json-default" namespace= "/" ><global-results><result name= "message" type= "JSON" > <param name= "root" >message</param></result></global-results><action name= "*" class= " Demo.action.AjaxTest "method=" {1} ">        <result name=" list ">/index.jsp</result>       </action ></package> <!--Other profiles included--><include file= "Struts-method.xml" ></include>    </ Struts>

• Background Java code: Only the distance is called Ajax, so the database operation is not involved

 import java.io.IOException;    Import Java.io.PrintWriter;    Import Java.util.HashMap;    Import Java.util.Map;    Import Javax.servlet.http.HttpServletResponse;    Import Org.apache.struts2.ServletActionContext; public class Ajaxtest {protected map<string, object> message = new hashmap<string, object> ();/** Ajax request Return ResU LT's name constant */protected final static String message = "MESSAGE";p ublic map<string, object> getMessage () {return MESSAG e;} public void Setmessage (map<string, object> message) {this.message = message;} -The path of the form form submission in the login page public String Testajax () throws Ioexception{system.out.println ("Get parameter Name=" + Servletactioncontext.getrequest (). GetParameter ("name")), Message.put ("ResultCode", "0000"), Message.put ("     ResultCode "," 0001 "); Message.put (" Name "," Zhong CE test "); return message; }

Ajax Application Submission form data-automatic JSON format for form data
Scenario Description: When the specific commit information is a form form and passed through Ajax to the background, we usually use a method called serialization to convert the form form into JSON format and pass it to the background. (Want to see more on the Topic.alibabacloud.comAJAX Development Manual section of the study)

form form format, form label has id,input label has name

     <form  id= "Formid" > Name: <input type= "text" name= "name" value= "Zhang San"/><br> Age: <input type= "Text" Name= "Age" value= "/><br><input" type= "Submit" value= "commit" id= "Submitid"/>     </form>

JS part of the code-can be written separately in a JS file, note that the need to first introduce the Jquery.js file

   $ (document). Ready (function () {$ ("#submitid"). Click (function () {ajaxhere ()});});     The AJAX function for submitting the form    Ajaxhere () {$.ajax ({url: "testajax3.do",//Request address//timeout:600000,//time-out setting, unit milliseconds Async:false, Asynchronous cache:false,//Cache Type: ' Post ',//Request by Data: $ (' #formid '). Serialize (),//Serialize form datatype: ' JSON ',//The data type returned by the server//conte Nttype: "application/x-www-form-urlencoded; Charset=utf-8 ", Success:function (msg) {//request succeeded after the call of alert (" form form triggered by experiment succeeded "+" Msg.resultcode "+msg.resultcode+"  Msg.name= "+msg.name);},error:function () {Alert (" Exception ");}});             The traditional way of Ajax return, that is, the Java part of the return write in the stream-especially to note here the handling of Chinese garbled solution httpservletresponse response = Servletactioncontext.getresponse (); Response.setcharacterencoding ("Utf-8"); PrintWriter writer = Response.getwriter (); String a = "{\" resultcode\ ": \" 0000\ ", \" name\ ": \" text Test \ "}"; Writer.write (a); Writer.flush (); Writer.close ();

This is the end of this article (want to see more on the Topic.alibabacloud.comAJAX User manual section of the study), there are questions can be in the message below the question.