XingXingMVC Ajax与JSON

时间 2019-11-17

原文原文链接

周末好时光啊,啥时候咱有钱了,每天都周末.html

今天介绍如何在xingxingmvc中使用ajax和json.java

仍是使用FirstDemo工程,这个工程相对比较简洁,除了XingXingMVC以外,没有再引入其余依赖包.web.xml文件仍是按照第一个例子的配置,没有变化.做为一个懒人做品,xingxingmvc固然但愿配置越少越好.配置少,不表明硬编码写死,xingxingmvc也提供扩展的可能,只是若是开发人员不想变动,xingxingmvc将使用默认值和默认类来完成工做.xingxingmvc的扩展开发,后续将一一介绍.jquery

xingxingmvc没有实现ajax所须要的javascript.这里采用jquery来实现ajax.web

第一步,创建页面,页面名称叫ajaxtest,完整路径是:ajax/ajaxtest.jsp,代码以下:ajax

<%@page contentType="text/html" pageEncoding="UTF-8"%>  
    <!DOCTYPE html>  
    <html>  
        <head>  
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
            <%@include file="../public/jquery.jspf" %>  
            <title>Ajax Test</title>  
            <script type="text/javascript">  
                $(document).ready(function(){  
                    $("button").click(function(){  
                       var indata ={txtName:$('#txtName').val(),txtMail:$('#txtMail').val()};  
                       $.get("<%=request.getRequestURL() %>?__METHOD=btnOK", //这里的__METHOD是form类的方法名.  
                        indata,  
                        function(result){  
                            $("div").html(result);  
                        });  
                    });  
                });  
            </script>  
        </head>  
      
        <body>  
              
           <p><label>姓名</label><input type="text" name="txtName" id="txtName"/></p>  
            <p><label>邮箱</label><input type="text" name="txtMail" id="txtMail"/></p>  
      
            <button>改变内容</button>  
            <hr/>  
            <div id="txt"><h2>经过 AJAX 改变文本</h2></div>  
        </body>  
    </html>

jquery的ajax用法,我就不介绍了,各位看官可自行百度.须要指出的是,$.get()方法中的url:json

<%=request.getRequestURL() %>?__METHOD=btnOK  
//当心了,这里__METHOD的__是两个下划线，且要在英文输入状态下输入。

带了一个参数__METHOD,且这个参数的值是btnOK.这个参数是MVC后台处理时候所须要的.mvc能够从页面路经解析出页面对应的form类, 但要执行form类的哪一个方法,则须要这个参数来代表.这里,__METHOD的值是btnOK,说明要执行form类中的btnOK方法.好,这里提一个问题,为何前几篇文章的例子中,不须要开发人员在页面中写这个__METHOD呢.前面的例子,都是传统的submit提交方式,在这个方式下,mvc本身会秘密注入__METHOD参数,并把submit按钮的id名称做为__METHOD的值,传给后台的mvc.这一切怎么发生的?mvc 在输出页面时候,会在页面的head插入本身的js脚本.请在浏览器中查看页面源代码,你就会发现,mvc输出来的页面源代码跟页面原始的源代码相比,多了两行:浏览器

<script type="text/javascript" src="/FirstDemo/$xx/mvc/resource/js/XXMVC.js?20081224-002"></script>  
    <script type="text/javascript" src="/FirstDemo/$xx/mvc/resource/js/validate.js?20090311-002"></script>

秘密就在这里了.后续我会继续解析其中的原因,如今,让咱们回到今天的话题.服务器

页面已经用ajax方式向服务器发出请求了,服务器上的mvc开始行动,调用对应的form类,而后返回json数据给页面.对应的form类,根据xingxingmvc的行为准则,这个form类名称叫ajaxtest.完成路径是:forms.ajax.ajaxtest.java.并且这个 form类有一个方法叫btnOK.这个方法将返回json数据.如何返回呢,请看代码.mvc

package forms.ajax;  
      
    import forms.myBase.DemoBaseForm;  
    import java.util.Map;  
      
    /** 
     * 
     * @author hicen 
     */  
    public class ajaxtest extends DemoBaseForm  
    {  
        public String btnOK(Map mapRequest,Map mapSession)  
        {  
            String strName = this.gstr("txtName", mapRequest);  
            String strMail = gstr("txtMail", mapRequest);  
              
            String strJson = "{'姓名':'" + strName + "','邮箱':'"+ strMail +"'}";  
            return "json:" + strJson; //这个语句只是让看官明白返回值的格式,实际应用中建议使用下一句的写法.          
            //return this.returnJson(strJson); //推荐使用,这样更简洁,有助于代码复用,减小错误,统一写法.  
        }  
    }

好了,咱们能够看到,btnOK方法的返回值是String.格式为:json:+字符串(json格式),加入用户输入的txtName为 hicen,txtMail为hicenwang@hotmail.com,那么本文例子实际返回就是:json:{'姓名':'hicen','邮箱 ':'hicenwang@hotmail.com'};

今天介绍大概如此.美中不足的是,开发人员在写ajax提交的js脚本,须要在url中带上__METHOD及其值.这个跟xingxingmvc 原则不太一致.xingxingmvc一贯都是作好事不留名，不但愿代码中存在xingxingmvc的痕迹。将来解决思路是，mvc提供一个ajax的写法，例如：mvcform.ajax( sucessFuction, errorFuction);成功了就执行sucessFuction，失败了就执行errorFuction，这两个function由开发人员写，mvc调用。这样就屏蔽了__METHOD。但这样也有一个问题，就是mvc包揽了ajax，那开发人员又没选择了，这样会不会霸道了点呢？