• Struts2实现ajax的两种方式


    基于Struts2框架下实现Ajax有两种方式,第一种是原声的方式,另外一种是struts2自带的一个插件。

    js部分调用方式是一样的:

    JS代码:

     1 function testAjax() {
     2 
     3     var $userNameInput = $("#ajax_username");
     4     var userName = $userNameInput.val();
     5 
     6     $.ajax({
     7         url : "originAjax.action",
     8         type : "GET",
     9         data : "ajaxField=" + userName,
    10         success : function(data, textStatus) {
    11             alert(data);
    12         }
    13     });
    14 }

    第一种原生的实现方式:

    Action中创建一个方法:

        private String username;
    
        public String getUsername() {
            return username;
        }
    
        public void setUsername(String username) {
            this.username = username;
        }
    
        public void checkUserName() throws IOException {
    
            HttpServletResponse response = ServletActionContext.getResponse();
            PrintWriter writer = response.getWriter();
            writer.print("hello " + username);
            writer.flush();
            writer.close();
        }

    struts.xml中配置:

    <action name="originAjax" class="TestAction" method="checkUserName" />  

    这种方式不太推荐使用。

    这里重点讲解下第二种方式:

    1.引入struts2-json-plugin-2.5.2.jar 

    2.Action中添加类似的如下代码:

    private String result;
    public String getResult() {
            return result;
        }
    
        public void setResult(String result) {
            this.result = result;
        }
    /**
         * 
         * AJAX for check MerchantAccount start
         * 
         * */
        private String merchantAccount;
    
        public String getMerchantAccount() {
            return merchantAccount;
        }
    
        public void setMerchantAccount(String merchantAccount) {
            this.merchantAccount = merchantAccount;
        }
    
        // AJAX for check Merchant
        public String checkMerchantAccountMethod() throws IOException {
    
             AppResultJsonBean ajaxResultJsonBean = new AppResultJsonBean();
    
            if (StarCloudStringUtils.isEmpty(merchantAccount)) {
    
                ajaxResultJsonBean.setIsOK(false);
                ajaxResultJsonBean.setData(null);
                ajaxResultJsonBean.setResultCode(-1);
                ajaxResultJsonBean.setResultMessage("商家账号不能为空");
                ajaxResultJsonBean.setOther(null);
    
                JSONObject ajaxResultJsonData = JSONObject
                        .fromObject(ajaxResultJsonBean);
    
                this.result = ajaxResultJsonData.toString();
                
                return SUCCESS;
            }
    
            if (!StarCloudStringUtils.isMobile(merchantAccount)) {
    
                ajaxResultJsonBean.setIsOK(false);
                ajaxResultJsonBean.setData(null);
                ajaxResultJsonBean.setResultCode(-2);
                ajaxResultJsonBean.setResultMessage("商家账号格式不合法");
                ajaxResultJsonBean.setOther(null);
    
                JSONObject ajaxResultJsonData = JSONObject.fromObject(ajaxResultJsonBean);
    
                this.result = ajaxResultJsonData.toString();
                
                return SUCCESS;
            }
    
            。。。
            MerchantBean checkMerchantBean = merchantIService.findMerchantByAccount(merchantAccount);
    
            if (checkMerchantBean != null) {
    
                ajaxResultJsonBean.setIsOK(true);
                ajaxResultJsonBean.setData(null);
                ajaxResultJsonBean.setResultCode(0);
                ajaxResultJsonBean.setResultMessage("商家账号可用");
                ajaxResultJsonBean.setOther(null);
    
                JSONObject ajaxResultJsonData = JSONObject.fromObject(ajaxResultJsonBean);
    
                this.result = ajaxResultJsonData.toString();
    
                return SUCCESS;
            } else {
                ajaxResultJsonBean.setIsOK(false);
                ajaxResultJsonBean.setData(null);
                ajaxResultJsonBean.setResultCode(-3);
                ajaxResultJsonBean.setResultMessage("商家账号不存在");
                ajaxResultJsonBean.setOther(null);
    
                JSONObject ajaxResultJsonData = JSONObject.fromObject(ajaxResultJsonBean);
    
                this.result = ajaxResultJsonData.toString();
                return SUCCESS;
            }
        }
        /**
         * 
         * AJAX for check MerchantAccount start end
         * 
         * */

    Struts.xml中配置如下:

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE struts PUBLIC
            "-//Apache Software Foundation//DTD Struts Configuration 2.5//EN"
            "http://struts.apache.org/dtds/struts-2.5.dtd">
    <struts>
    
        <!-- AJAX 
        1.引入Jar包
        2.所在包必须要继承自JSON-default
        3.resultType是JSON
        4.附加了一个参数excludeNullProperties,目的是不序列化Action里为null的字段。
        5.<result>元素没有name属性,也没有跳转值 
        -->
        <package name="struts_web_product_ajax" extends="json-default">
             <!-- 新增商品信息检查账号 -->
            <action name="checkMerchantAccountAction" class="controllers.actions.web.product.PrepareAddProductAction" method="checkMerchantAccountMethod">
                <result type="json">  
                    <param name="excludeNullProperties">true</param>  
                    <param name="root">result</param>
                </result> 
             </action>     
        </package>  
    </struts>

    JS中接受返回结果:

    返回JSON格式:

    JS解析如下:

    function checkMerchantAccountAjax() {
    
        var $merchantAccount = $("#merchantAccount");
        var merchantAccount = $merchantAccount.val();
    
        $.ajax({
                    url : "checkMerchantAccountAction",
                    type : "GET",
                    data : "merchantAccount=" + merchantAccount,
                    success : function(data, textStatus) {
                        var resultJSONData = JSON.parse(data);//注意这里必须有,因为之前返回的是result="json字符串",但并类型不是JSON
                        if(resultJSONData.isOK){
                                $merchantAccount.css("color", "black");
                                return true;
                        }else{
                            $merchantAccount.css("color", "red");
                            layer.tips(resultJSONData.resultMessage,$merchantAccount, {
                                            tips : [3, '#3595CC'],
                                            time : 4000
                            });//end tips
                            return false;
                        }//end else
                        
                    }//end success
                });//end ajax
    }// end js
  • 相关阅读:
    PS初步学习经验心得记录
    css第四天--复合选择器和样式三大特性
    css第三天--盒子模型
    html第二天--表单控件和表格
    css第二天--字体属性和文本属性
    vue计算属性(computed)
    ant-input的使用
    js-split() 方法
    设计转到前端开发
    $set
  • 原文地址:https://www.cnblogs.com/xingyunblog/p/6220203.html
Copyright © 2020-2023  润新知