XingXingMVC Ajax与JSON
周末好时光啊,啥时候咱有钱了,天天都周末.
今天介绍如何在xingxingmvc中使用ajax和json.
还是使用FirstDemo工程,这个工程相对比较简洁,除了XingXingMVC之外,没有再引入其他依赖包.web.xml文件还是按照第一个例子的配置,没有变化.作为一个懒人作品,xingxingmvc当然希望配置越少越好.配置少,不代表硬编码写死,xingxingmvc也提供扩展的可能,只是如果开发人员不想变更,xingxingmvc将使用默认值和默认类来完成工作.xingxingmvc的扩展开发,后续将一一介绍.
xingxingmvc没有实现ajax所需要的javascript.这里采用jquery来实现ajax.
第一步,建立页面,页面名称叫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，那开发人员又没选择了，这样会不会霸道了点呢？
相关推荐
结束数据方法的参数，该如何定义？-- 集合为自定义实体类中的结合属性，有几个实体类，改变下标就行了。<input id="add" type="button" value="新增visitor&quo