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

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

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

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

好了，下面开始正文：

  • lib如下：

Struct2+jquery1.7+json的Ajax简单实例_第1张图片

这里小说一下，除了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.  
   
  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.  
   
  3. <filter>
    4.  
   
  4. <filter-name>struts-cleanupfilter-name>
    5.  
   
  5. <filter-class>org.apache.struts2.dispatcher.ActionContextCleanUp filter-class>
    6.  
   
  6. filter>
    7.  
   
  7. <filter-mapping>
    8.  
   
  8. <filter-name>struts-cleanupfilter-name>
    9.  
   
  9. <url-pattern>/*url-pattern>
    10.  
   
  10. filter-mapping>
    11.  
   
  11. <filter>
    12.  
   
  12. <filter-name>struts2filter-name>
    13.  
   
  13. <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilterfilter-class>
    14.  
   
  14. filter>
    15.  
   
  15. <filter-mapping>
    16.  
   
  16. <filter-name>struts2filter-name>
    17.  
   
  17. <url-pattern>/*url-pattern>
    18.  
   
  18. filter-mapping>
    19.  
   
  19. <session-config>
    20.  
   
  20. <session-timeout>
    21.  
   
  21.  6000 
    22.  
   
  22. session-timeout>
    23.  
   
  23. session-config>
    24.  
   
  24. <welcome-file-list>
    25.  
   
  25. <welcome-file>index.jspwelcome-file>
    26.  
   
  26. welcome-file-list>
    27.  
   
  27. web-app>
    28.  
  
 
  
     
   
  • structs.xml
    •  
  
 
  
 
  
     
   
    2.  
   
  2. "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" 
    3.  
   
  3. "http://struts.apache.org/dtds/struts-2.0.dtd">
    4.  
   
  4. <struts>
    5.  
   
  5. <constantname="struts.i18n.encoding"value="utf-8"/>
    6.  
   
  6. <constantname="struts.devMode"value="true"/>
    7.  
   
  7. <packagename="default"extends="struts-default,json-default">
    8.  
   
  8. <actionname="Login_*"class="com.mtf.action.LoginAction"method="{1}">
    9.  
   
  9. <resulttype="json">
    10.  
   
    11.  
   
    12.  
   
  12. <paramname="root">resultparam>
    13.  
   
  13. result>
    14.  
   
  14. action>
    15.  
   
  15. package>
    16.  
   
  16. struts>
    17.  
  
 
  
解释一下：struct.xml和以前的稍微有些不同是
 
  
json-default">
 
  
json"> 
  
  
 result 
 
  
 
 
  
     
   
  • action中的valide方法
    •  
  
 
  
 
  
     
   
  1. public String valide() { 
    2.  
   
  2.  System.out.println(user.getName()); 
    3.  
   
  3.  System.out.println(user.getPassword()); 
    4.  
   
  4. // 将要返回的user实体对象进行json处理 
    5.  
   
  5.  JSONObject jo = JSONObject.fromObject(user); 
    6.  
   
  6. // 打印一下 
    7.  
   
  7.  System.out.println(jo); 
    8.  
   
  8. // 调用json对象的toString方法转换为字符串然后赋值给result 
    9.  
   
  9.  result = jo.toString(); 
    10.  
   
  10. //result = "{name:pxj, password:'登录成功!'}"; 
    11.  
   
  11. return SUCCESS; 
    12.  
   
  12.  } 
    13.  
  
 
  
这里我写的简单了，就是接收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.  
   
  2. pageEncoding="utf-8"%>
    3.  
   
  3. >
    4.  
   
  4. <html>
    5.  
   
  5. <head>
    6.  
   
  6. <metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
    7.  
   
  7. <title>Login jsptitle>
    8.  
   
  8. <scripttype="text/javascript"src="js/jquery-1.7.js">script>
    9.  
   
  9. <scripttype="text/javascript">
    10.  
   
  10. $(function() 
    11.  
   
  11.  { 
    12.  
   
  12.  $("#button1").click(function() 
    13.  
   
  13.  { 
    14.  
   
  14.  $.ajax({ 
    15.  
   
  15.  type: "POST", 
    16.  
   
  16.  url: "Login.action", 
    17.  
   
  17.  dateType: "json", 
    18.  
   
  18.  data: {"user.name": $("#1").val(), "user.password": $("#2").val()}, 
    19.  
   
  19.  success: function(returnedData){ 
    20.  
   
  20.  var json = eval( "("+returnedData+")" ); 
    21.  
   
  21.  var str = "姓名:" + json.name + "<br/>"; str += "密码:" 
    22.  
   
  22.  + json.password + "<br/>"; 
    23.  
   
  23.  $("#3").html(str); 
    24.  
   
  24.  } 
    25.  
   
  25.  }); 
    26.  
   
  26.  }); 
    27.  
   
  27.  }); 
    28.  
   
  28. script>
    29.  
   
  29. head>
    30.  
   
  30. <body>
    31.  
   
  31. <formaction="Login_valid.action"method="post">
    32.  
   
  32. <inputtype="text"id="1"value="">
    33.  
   
  33. <br/>
    34.  
   
  34. <inputtype="password"id="2"value="">
    35.  
   
  35. <br/>
    36.  
   
  36. <divid="3">
    37.  
   
  37. <br/>
    38.  
   
  38. <inputtype="button"value="Login"id="button1">
    39.  
   
  39. form>
    40.  
   
  40. body>
    41.  
   
  41. html>
    42.  
  
 
  
我用$.ajax的原因也是因为我需要json，因为别的post和get方法会默认传输回来text格式的数据，我们还需要自己动手转换，虽然很方便，但是还是很麻烦，还有$.ajax比较原始，好控制，于是我就用这个吧
 
  
     
   
  • 效果图如下
    •  
  
 
  
1.后台打印json格式结果：
 
  
103813287.png
 
  
2.前台输出：
 
  
Struct2+jquery1.7+json的Ajax简单实例_第2张图片
 
  
结束……