Struct2+jquery1.7+json的Ajax简单实例

闲来无事,研究了一下Ajax,当然要是想实现ajax无可厚非就是JavaScript,现在比较流行的框架就是jquery,Jquery封装了JavaScript,这样的好处就是解决了不同浏览器的兼容问题。

  • Jquery官网:http://jquery.com/,这里我下载了1.7版本

言归正传,我们接下来的例子是这样的:我们要实现Ajax异步通讯,其实也就是从前台将数据提交到后台并返回执行结果(结果就多了,有可能是个List,有可能只是一些话,这个随便啦)其实这都不重要,关键是我们用于传输数据的介质是json,返回数据是Json格式的,网上找了很多资料,很多例子基本上都跑不通。

  • JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,有很多优点,其实我也不太了解具体它哪好,可能我用的地方太少了。

好了,下面开始正文:

  • lib如下:

095636985.png

这里小说一下,除了struct2必须的几个jar以外,我们还需要引入几个重要的jar,如:

  1. commons的那6个jar,其中io和fileupload如果不引入的话在某些版本会引起一个缺包的错误,具体有点忘了,当时没截图,但是我们还是引入吧,有冲突再去解决;

  2. ezmorph-1.0.5.jar和json-lib-2.1.jar:json转换包

  3. struct2-json-plugin-2.1.8.jar:json插件包

  • web.xml

 
 
  1. <?xmlversion="1.0"encoding="UTF-8"?>

  2. <web-appversion="2.5"xmlns="http://java.sun.com/xml/ns/javaee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

  3. <filter>

  4. <filter-name>struts-cleanup</filter-name>

  5. <filter-class>org.apache.struts2.dispatcher.ActionContextCleanUp </filter-class>

  6. </filter>

  7. <filter-mapping>

  8. <filter-name>struts-cleanup</filter-name>

  9. <url-pattern>/*</url-pattern>

  10. </filter-mapping>

  11. <filter>

  12. <filter-name>struts2</filter-name>

  13. <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>

  14. </filter>

  15. <filter-mapping>

  16. <filter-name>struts2</filter-name>

  17. <url-pattern>/*</url-pattern>

  18. </filter-mapping>

  19. <session-config>

  20. <session-timeout>

  21. 6000

  22. </session-timeout>

  23. </session-config>

  24. <welcome-file-list>

  25. <welcome-file>index.jsp</welcome-file>

  26. </welcome-file-list>

  27. </web-app>

  • structs.xml

 
 
  1. <!DOCTYPE struts PUBLIC

  2. "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"

  3. "http://struts.apache.org/dtds/struts-2.0.dtd">

  4. <struts>

  5. <constantname="struts.i18n.encoding"value="utf-8"/>

  6. <constantname="struts.devMode"value="true"/>

  7. <packagename="default"extends="struts-default,json-default">

  8. <actionname="Login_*"class="com.mtf.action.LoginAction"method="{1}">

  9. <resulttype="json">

  10. <!-- root的值对应要返回的值的属性 -->

  11. <!-- 这里的result值即是 对应action中的 result -->

  12. <paramname="root">result</param>

  13. </result>

  14. </action>

  15. </package>

  16. </struts>

解释一下:struct.xml和以前的稍微有些不同是

<package name="default" extends="struts-default,json-default">

<result type="json">
<!-- root的值对应要返回的值的属性 -->
<!-- 这里的result值即是 对应action中的 result -->
<param name="root">result</param>

</result>

  • action中的valide方法

 
 
  1. public String valide() {

  2. System.out.println(user.getName());

  3. System.out.println(user.getPassword());

  4. // 将要返回的user实体对象进行json处理

  5. JSONObject jo = JSONObject.fromObject(user);

  6. // 打印一下

  7. System.out.println(jo);

  8. // 调用json对象的toString方法转换为字符串然后赋值给result

  9. result = jo.toString();

  10. //result = "{name:pxj, password:'登录成功!'}";

  11. return SUCCESS;

  12. }

这里我写的简单了,就是接收name和password,然后进行json处理,然后给赋值到result对象上面,这样通过前面说的json插件包和其他的一些包,struct2会自动的帮我们提交json数据给前台……

  • Jquery登场,光记录后台了,忘了写前台了,补上

Jquery实现Ajax有很多方法,$.psot,$.getJson,$.ajax……这里我们用最原始的$.ajax


 
 
  1. <%@ page language="java"contentType="text/html; charset=utf-8"

  2. pageEncoding="utf-8"%>

  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

  4. <html>

  5. <head>

  6. <metahttp-equiv="Content-Type"content="text/html; charset=utf-8">

  7. <title>Login jsp</title>

  8. <scripttype="text/javascript"src="js/jquery-1.7.js"></script>

  9. <scripttype="text/javascript">

  10. $(function()

  11. {

  12. $("#button1").click(function()

  13. {

  14. $.ajax({

  15. type: "POST",

  16. url: "Login.action",

  17. dateType: "json",

  18. data: {"user.name": $("#1").val(), "user.password": $("#2").val()},

  19. success: function(returnedData){

  20. var json = eval( "("+returnedData+")" );

  21. var str = "姓名:" + json.name + "<br/>"; str += "密码:"

  22. + json.password + "<br/>";

  23. $("#3").html(str);

  24. }

  25. });

  26. });

  27. });

  28. </script>

  29. </head>

  30. <body>

  31. <formaction="Login_valid.action"method="post">

  32. <inputtype="text"id="1"value="">

  33. <br/>

  34. <inputtype="password"id="2"value="">

  35. <br/>

  36. <divid="3">

  37. <br/>

  38. <inputtype="button"value="Login"id="button1">

  39. </form>

  40. </body>

  41. </html>

我用$.ajax的原因也是因为我需要json,因为别的post和get方法会默认传输回来text格式的数据,我们还需要自己动手转换,虽然很方便,但是还是很麻烦,还有$.ajax比较原始,好控制,于是我就用这个吧

  • 效果图如下

1.后台打印json格式结果:

103813287.png

2.前台输出:

103902720.png

结束……

你可能感兴趣的:(jquery,json,Ajax,struct2)