备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

使用struts2+JQuery实现的简单的ajax例子

2017-11-23 978
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
也为简单的业务需要，所以使用了Struts配合JQuery制作的一个简单的AJAX的例子，希望有兴趣的朋友可以看看。
Js代码   收藏代码
  1. <script type="text/javascript">  
  2.         <!--  
  3.             //注：每个嵌入页必须定义该方法，供父窗口调用，并且返回true或false来告之父窗口是否关闭  
  4.             function Ok(){    
  5.                 clickButton();  
  6.             }  
  7.   
  8.             function clickButton()  
  9.             {      
  10.                 var url = 'ajaxRequest.action';  
  11.                 var params = {  
  12.                         name:$('#name').attr('value')  
  13.                 };  
  14.                 jQuery.post(url, params, callbackFun, 'json');  
  15.             }  
  16.             function callbackFun(data)  
  17.             {  
  18.                 if(data.result=="success"){  
  19.                   
  20.                     //获取数据后渲染页面  
  21.                     alert(data.result);//对应HelloWorld类的message属性  
  22.                     window.parent.JqueryDialog.SubmitCompleted(null, true, true);  
  23.                 }else{  
  24.                   
  25.                     $('#nameerror').attr('value',data.result);  
  26.                 }  
  27.             }         
  28.         </SCRIPT>  
 
Html代码   收藏代码
  1. <body>  
  2.         <input name="username" type="text" id="name"/><input type="text" id="nameerror"></label>  
  3.         <br />  
  4.         <input name="password" type="password">  
  5.         <br />  
  6.         <input type="button" value="ok">  
  7.         This is my JSP page. 你好  
  8.         <br>  
  9.     </body>  
 上述是弹出框的页面代码
 
一下是引导页面
 
Html代码   收藏代码
  1. <html>  
  2.   <head>  
  3.     <base href="<%=basePath%>">  
  4.     <link type="text/css" rel="stylesheet" href="css/jquery_dialog.css" />  
  5.     <title>My JSP 'index.jsp' starting page</title>  
  6.     <meta http-equiv="pragma" content="no-cache">  
  7.     <meta http-equiv="cache-control" content="no-cache">  
  8.     <meta http-equiv="expires" content="0">      
  9.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  10.     <meta http-equiv="description" content="This is my page">  
  11.     <!-- 
  12.     <link rel="stylesheet" type="text/css" href="styles.css"> 
  13.     --><script type="text/javascript" src="js/jquery_dialog.js"></script>  
  14.     <SCRIPT type="text/javascript" src="js/jquery-1.5.2.min.js"></script>  
  15.         
  16.   </head>  
  17.     
  18.   <body>  
  19.       
  20.       <input id="name" type="text">  
  21.         <input type="button" value="ok" onclick="JqueryDialog.Open('编辑', 'hello.action', 350, 160);">  
  22.   </body>  
  23. </html>  
 
一下为action
Java代码   收藏代码
  1. public class HelloWorld extends ActionSupport {  
  2.       /** 
  3.      *  
  4.      */  
  5.     private static final long serialVersionUID = 7897303483903148263L;  
  6.     private String name;  
  7.         private String result;  
  8.   
  9.         // ajax请求参数赋值  
  10.         public void setName(String name) {  
  11.             this.name = name;  
  12.         }  
  13.   
  14.         // ajax返回结果  
  15.         public String getResult() {  
  16.             return result;  
  17.         }  
  18.   
  19.         public String execute() {  
  20.             this.result = "success"+name;  
  21.             return "success";  
  22.         }  
  23. }  
 触发也面代码
 
Java代码   收藏代码
  1. package test;  
  2.   
  3. import com.opensymphony.xwork2.ActionSupport;  
  4.   
  5. public class HelloAction extends ActionSupport {  
  6.   
  7.     /** 
  8.      *  
  9.      */  
  10.     private static final long serialVersionUID = 3035672864398320366L;  
  11.   
  12.     @Override  
  13.     public String execute() throws Exception {  
  14.         // TODO Auto-generated method stub  
  15.         System.out.println("hahahahhaha");  
  16.           
  17.         return "success";  
  18.     }  
  19.       
  20.       
  21.   
  22. }  
 
一下是struts.xml配置文件
这里需要引入struts2-json-plugin.jar包 很囧的一点是我悲剧的在action中写了方法返回值为void，居然神奇的调用执行了，就因为这个我调试了N久，一直觉得奇怪，怎么就没有返回值呢？
 
Xml代码   收藏代码
  1. <struts>  
  2.     <package name="ajax" extends="json-default">  
  3.         <action name="ajaxRequest" class="test.HelloWorld">  
  4.             <result type="json"></result>  
  5.         </action>  
  6.         <action name="hello" class="test.HelloAction">  
  7.             <result name="success">hello.jsp</result>  
  8.           
  9.         </action>  
  10.     </package>  
  11. </struts>    

 



















本文转自yunlielai51CTO博客，原文链接：http://blog.51cto.com/4925054/1148419，如需转载请自行联系原作者



文章标签：
前端开发
关键词：
jQuery ajax
ajax jquery
ajax.js jQuery
jQuery实现
ajax.js实现
技术小美
目录
相关文章
N..
|
2月前
|
XML JSON 前端开发
jQuery实现Ajax
jQuery实现Ajax
N..
19 1
热烈的马
|
5月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery，html，ajax）附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery，html，ajax）附源码 超详细
热烈的马
61 0
左边的天堂
|
3月前
|
JavaScript 前端开发 Java
jquery ajax+spring mvc上传文件
jquery ajax+spring mvc上传文件
左边的天堂
18 0
亚丁号
|
4月前
|
前端开发 JavaScript
Jquery ajax捕获错误信息
Jquery ajax捕获错误信息
亚丁号
16 0
zrblue
|
4月前
|
JSON 缓存 前端开发
Jquery中AJAX的应用
Jquery中AJAX的应用
zrblue
43 0
多加点香菜85
|
5月前
|
JSON 前端开发 JavaScript
jQuery中ajax的使用
jQuery中ajax的使用
多加点香菜85
32 0
热烈的马
|
5月前
|
XML JavaScript 前端开发
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例（超详细必看 附源码）
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例（超详细必看 附源码）
热烈的马
54 0
天飞
|
前端开发 Ruby
RAILS 4 ON RUBY的AJAX实现过程
天飞
1606 0
风与烈酒
|
6月前
|
XML 前端开发 JavaScript
什么是Ajax和jquery
什么是Ajax和jquery
风与烈酒
45 0
你挚爱的强哥
|
5月前
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
你挚爱的强哥
41 0