Java进阶知识01 Struts2下的 jquery+ajax+struts 技术实现异步刷新功能

1、效果图示

横线上方的部分不动（没有刷新），下方实现刷新（异步刷新）

2、实现步骤

jquery+ajax+struts技术实现异步刷新功能的步骤：
    1、需要用到 jquery+ajax+struts 那么需要用几个包：（commons-logging-1.0.4.jar、freemarker-2.3.13.jar、ognl-2.6.11.jar、struts2-core-2.1.6.jar、xwork-2.1.2.jar、commons-fileupload-1.2.1.jar）
                  说明：需要的包六个基本包外加 json-lib.jar，struts2-json-plugin.jar，ezmorph.jar 这三个包

    2、加入 jquery.js ，调用 jquery里面的 ajax方法，$.get()、$.post()、$.getJSON();

    3、Action中写 JSONObject
                          先将所有的值存入map中，然后将map集合转换为json对象
         JSONObject jo = JSONObject.fromObject(map);

    4、struts.xml中设置result 的type=json 并且指定输入的数据名称
        <result name="success" type="json">
           <param name="root">outinfo</param>
        </result>

3、相关代码

页面端（index.jsp）

 <%@ page language="java" contentType="text/html; charset=UTF-8"   pageEncoding="UTF-8"%>

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

 <html>

     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 

           <script type="text/javascript" src="js/jquery.js" ></script> 

           <script type="text/javascript">

               $( function() {

                 //使用 Ajax 的方式 判断登录

                 $("#btn_login").click( function() {

                     var url = 'ajaxLogin.action';

                     //alert("===");

                     //获取表单值，并以json的数据形式保存到params中

                     var params = {

                         loginName:$("#loginName").val(),

                         password:$("#password").val(),

                     };

                     /* //使用$.post方式          $.post(url,params,function(data){data},'json');

                     $.post(

                         url,  //服务器要接受的url

                         params,  //传递的参数

                         function cbf(data){ //服务器返回后执行的函数 参数 data保存的就是服务器发送到客户端的数据

                             //alert(data);

                             //eval里面的字符串以JavaScript的方式执行     //比如：eval('alert('你好！')');

                             var member = eval("("+data+")");    //包数据解析为json 格式

                             $('#result').html("欢迎您：  "+member.name+" -密码："+member.pwd);

                         },

                         'json'  //数据传递的类型  json

                     );

                     */

                      //上面注释掉的部分，和下面三行代码的效果是一样的

                      $.getJSON(url,params,function(data){

                            var member = eval("("+data+")");

                            $("#result").html("欢迎您哟："+member.name+" -密码："+member.pwd);

                        });

                 });

             });

         </script>

   </head>

   <body>

        <span>用户名：</span>

        <input type="text" id="loginName" name="loginName">

        <br />  

        <span>密&nbsp;&nbsp;&nbsp;码：</span>

        <input type="password" name="password" id="password">

        <br /> 

        <input type="button" id="btn_login" value="登录" /> 

        <br />

        <hr/>

        <p>

           这里显示ajax信息(即：异步刷新显示出下方的信息)：

           <br /><br />

           <span id="result"></span>

        </p>

   </body>

 </html>

struts.xml 配置文件

 <?xml version="1.0" encoding="UTF-8" ?>

 <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">

 <struts>

  <package name="ajax" extends="json-default">

         <action name="ajaxLogin" class="com.shore.ajax.ation.AjaxLoginAction">

             <!-- 返回类型为json 在sjon-default中定义 -->

             <result name="success" type="json">

                 <!-- root表示返回对象的层级为根部 root的值对应要返回的值的属性 -->

                 <!-- 这里的outInfo值即是 对应action中的 outInfo -->

                 <param  name="root">outinfo</param>  <!-- 输出到页面的信息，JavaScript函数中的data参数接收此值 -->

             </result>

         </action>

     </package>

 </struts>

Action层下的 AjaxLoginAction 类

 package com.shore.ajax.ation;

 import java.util.HashMap;

 import java.util.Map;

 import net.sf.json.JSONObject;

 import com.opensymphony.xwork2.ActionSupport;

 /**

  * @author DSHORE/2019-8-1

  *

  */

 public class AjaxLoginAction extends ActionSupport {

     // 用户Ajax返回数据

     private String outinfo;  //输出信息

     // struts的属性驱动模式，自动填充页面的属性到这里  （注入）

     private String loginName;

     private String password;  

     @Override

     public String execute() {

         // 用一个Map做例子

         Map<String, String> map = new HashMap<String, String>();

         // 为map添加一条数据，记录一下页面传过来loginName

         map.put("name", this.loginName);

         map.put("pwd", this.password);

         // 将要返回的map对象进行json处理

         JSONObject jo = JSONObject.fromObject(map); 

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

         this.outinfo = jo.toString();

         //测试一下outInfo的结果

         System.out.println(this.outinfo);  

         return SUCCESS;

     }

     public String getOutinfo() {

         return outinfo;

     }

     public void setOutinfo(String outinfo) {

         this.outinfo = outinfo;

     }

     public String getLoginName() {

         return loginName;

     }

     public void setLoginName(String loginName) {

         this.loginName = loginName;

     }

     public String getPassword() {

         return password;

     }

     public void setPassword(String password) {

         this.password = password;

     }

 }

web.xml 配置文件

 <?xml version="1.0" encoding="UTF-8"?>

 <web-app version="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">

   <welcome-file-list>

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

   </welcome-file-list>

   <filter>

       <filter-name>struts2</filter-name>

       <filter-class>

           org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter

       </filter-class>

   </filter>

   <filter-mapping>

       <filter-name>struts2</filter-name>

       <url-pattern>/*</url-pattern>

   </filter-mapping>

 </web-app>

实例效果图

Java基础96 ajax技术的使用（servlet）

原创作者：DSHORE

作者主页：http://www.cnblogs.com/dshore123/

原文出自：https://www.cnblogs.com/dshore123/p/11284860.html

欢迎转载，转载务必说明出处。（如果本文对您有帮助，可以点击一下右下角的推荐，或评论，谢谢！）