XingXingMVC Ajax与JSON

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

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

还是使用FirstDemo工程,这个工程相对比较简洁,除了XingXingMVC之外,没有再引入其他依赖包.web.xml文件还是按照第一个例子的配置,没有变化.作为一个懒人作品,xingxingmvc当然希望配置越少越好.配置少,不代表硬编码写死,xingxingmvc也提供扩展的可能,只是如果开发人员不想变更,xingxingmvc将使用默认值和默认类来完成工作.xingxingmvc的扩展开发,后续将一一介绍.

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

扫描二维码关注公众号，回复： 759098 查看本文章

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

<%@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:

<%=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数据.如何返回呢,请看代码.

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为[email protected],那么本文例子实际返回就是:json:{'姓名':'hicen','邮箱':'[email protected]'};

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

XingXingMVC Ajax与JSON

猜你喜欢