I wanted to use Ajax in the project, so I collected n pieces of information online and made n many mistakes. I have been dealing with this problem since I went to work today and finally solved it.
When I saw the Ajax display on the page, I was excited and excited. to record the Ajax history I learned and to make more people detour, I wrote this article!
For better understanding, I have redone a small project to deepen my impression. Now let's start our Ajax journey with this small project.
Step 1: Create a Java Web project named "ajax.
Step 2: add the jar package of struts2. Four packages are required here: freemarker. jar ognl. jar struts2-core.jar commons-fileupload.jar commons-io.jar xwork-core-2.1.6.jar (this package adds the version number because it is to be mentioned below), these six packages are the jar package struts must depend on, What is well said.
Step 3: modify web. XML to add the struts filter. The Code is as follows:
<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <web-app version = "2.5" <br/> xmlns = "http://java.sun.com/xml/ns/javaee" <br/> xmlns: xsi = "http://www.w3.org/2001/XMLSchema-instance" <br/> xsi: schemalocation = "http://java.sun.com/xml/ns/javaee <br/> http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> </P> <p> <filter> <br/> <filter-Name> struts2 </filter-Name> <br/> <filter-class> Org. apache. struts2.dispatcher. filterdispatcher </filter-class> <br/> </filter> <br/> <filter-mapping> <br/> <filter-Name> struts2 </filter-Name> <br/> <URL-pattern>/* </url-pattern> <br/> </filter-mapping> </P> <p> <welcome-file-list> <br/> <welcome-File> index. JSP </welcome-File> <br/> </welcome-file-List> <br/> </Web-app> <br/>
Step 4: add the JSON package, here two: json-lib.jar jsonplugin. jar, it is important to note that JSON references a large number of Apache commons packages. Therefore, we need to add four commons packages in total, except for commons packages, also need to introduce an ezmorph package, so this step to introduce a total of 7 packages, listed as below: commons-collections.jar commons-lang.jar commons-beanutils.jar
Commons-logging.jar ezmorph. Jar plus two JSON packages a total of seven, one-time addition.
Step 5: Write the background to process ajaxloginaction. Action. The content is as follows:
Package QY. test. action; </P> <p> Import Java. util. hashmap; <br/> Import Java. util. map; </P> <p> Import net. SF. JSON. jsonobject; </P> <p> Import COM. opensymphony. xwork2.actionsupport; </P> <p> public class ajaxloginaction extends actionsupport {</P> <p> // user Ajax returns data <br/> private string result; </P> <p> // attribute driving mode of Struts. the attribute of the page is automatically filled here <br/> private string loginname; <br/> private string password; </P> <p> @ override <br/> Public String execute () {</P> <p> // use a map as an example <br/> Map <string, string> map = new hashmap <string, string> (); </P> <p> // Add a data record for the map, and upload the loginname on the page. <br/> map. put ("name", this. loginname); </P> <p> // JSON processing of the map object to be returned <br/> jsonobject Jo = jsonobject. fromobject (MAP); </P> <p> // call the tostring method of the json object to convert it to a string and assign it to result <br/> This. result = Jo. tostring (); </P> <p> // test result <br/> system. out. println (this. result); </P> <p> return success; </P> <p >}</P> <p> // The getter setter method is omitted. <br/>}< br/>
Step 6: Write the front-end index. jsp. Note that the content of the JS file added to jquery is as follows:
<% @ Page Language = "Java" contenttype = "text/html; charset = UTF-8" <br/> pageencoding = "UTF-8" %> <br/> <! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" "http://www.w3.org/TR/html4/loose.dtd"> <br/> <HTML> <br/> <pead> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "> <br/> <MCE: Script Type =" text/JavaScript "src =" JS/jquery-1.3.2.min.js "mce_src =" JS/jquery-1.3.2.min.js "> </MCE: SCRIPT> <br/> <MCE: Script Type = "text/JavaScript"> <! -- <Br/> $ (document ). ready (function () {</P> <p> // use ajax to determine logon <br/> $ ("# btn_login "). click (function () {</P> <p> var url = 'ajaxlogin. action '; </P> <p> alert ("="); </P> <p> // obtain the form value, save the data in JSON format to Params <br/> var Params = {<br/> loginname: $ ("# loginname "). val (), <br/> password: $ ("# password "). val (), <br/>}< br/> // use $. POST method <br/> $. post (</P> <p> URL, // URL to be accepted by the server </P> <p> Params, // passed parameter </P> <p> function CBF (data) {// The function parameter data executed after the server returns is the data sent from the server to the client </P> <p> // alert (data ); <br/> var member = eval ("(" + Data + ")"); // parse package data into JSON format </P> <p> ('{result'}.html ("Welcome:" + member. name); </P> <p >},</P> <p> 'json' // data transmission type JSON </P> <p> ); </P> <p >}); <br/> // --> </MCE: SCRIPT> <br/> </pead> <br/> <body> <br/> <span> User Name: </span> <br/> <input type = "text" id = "loginname" name = "loginname"> <br/> </P> <p> <span> password: </span> <br/> <input type = "password" name = "password" id = "password"> <br/> </P> <p> <input type = "button" id = "btn_login" value = "login"/> <br/> <p> <br/> Ajax information is displayed here: <br/> <span id = "result"> </span> <br/> </P> <br/> </body> <br/> </ptml>
Step 7: Add struts. XML to the src directory and configure the corresponding XML file to provide data for Ajax requests. The Code is as follows:
<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <! Doctype struts Public <br/> "-// Apache Software Foundation/DTD struts configuration 2.0/EN" <br/> "http://struts.apache.org/dtds/struts-2.0.dtd"> </P> <p> <struts> </P> <p> <package name = "ajax" extends = "JSON-Default"> <br/> <action name = "ajaxlogin" class = "QY. test. action. ajaxloginaction "> </P> <p> <! -- Return type is JSON defined in sjon-default --> <br/> <result type = "JSON"> </P> <p> <! -- The root value corresponds to the attribute of the value to be returned --> <br/> <! -- The result value here is the result in the corresponding action --> <br/> <Param name = "root"> result </param> <br/> </result> <br/> </Action> <br/> </package> </P> <p> </struts> <br/>
Step 8: If Step 4 is not included in the commons-logging.jar package, remember to join here
Step 9: publish and run. Unfortunately, you will find an error,
Java. Lang. classnotfoundexception: COM. opensymphony. xwork2.util. textutils:
This is a struts version error because xwork2.1.6-core is used. jar does not contain the textutils class. Here xwork2.1.2-core. jar is also added to classpath, xwork2.1.2-core. jar contains this object. We use xwork2.1.6 jar. When textutils is used, xwork2.1.2-core is used. jar.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
