EXT2.0中的ajax form提交
看了不少文章，也看了不少代码。始终找不到自己最出错在什么地方了，现在直接上代码吧。然后说一下注意的地方.
<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <%@include file="/common/taglib.jsp" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <%@include file="/common/meta.jsp" %> <mce:script type="text/javascript"><!-- Ext.onReady(function(){ var lform = new Ext.form.FormPanel({ frame: true, width: 250, height: 130, labelWidth: 60, method: 'post', url: 'servlet/ExtServlet', items:[ {fieldLabel: '用户名', xtype: 'textfield', name: 'name', width: 150, allowBlank: true, vtype:'email'}, {fieldLabel: '密码', xtype: 'textfield', name: 'password', width: 150, inputType: 'password'}, {fieldLabel: '出生日期', xtype: 'datefield', name: 'birthday', width: 150} ], buttons:[ {text: '登录', handler: login}, {text: '取消'} ] }); function login() { lform.form.submit({ waitMsg: '请稍候正在登录...', success: function(form, action) { alert(action.result.success); }, failure: function(form, action) { alert('no'); } }); }; lform.render('grid'); }); // --></mce:script> </head> <body> <!-- <input type="button" id="b"/> --> <div id="grid" style="margin-left: 20px; margin-top: 5px" mce_style="margin-left: 20px; margin-top: 5px"></div> </body> </html>
servlet代码：
package com.tsts.sunyanan.ext; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @SuppressWarnings("serial") public class ExtServlet extends HttpServlet { private String getResult() { StringBuffer sb = new StringBuffer(); //{success:true, message: 'ok'} sb.append("{success:true, message:'a'}"); ///sb.append("{/"result/":[{/"r/":/"true/", /"m/":/"a/"}]}"); return sb.toString(); } /** * The doGet method of the servlet. <br> * * This method is called when a form has its tag value method equals to get. * * @param request the request send by the client to the server * @param response the response send by the server to the client * @throws ServletException if an error occurred * @throws IOException if an error occurred */ public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("get"); response.setContentType("text/x-json"); PrintWriter out = response.getWriter(); out.println(getResult()); out.flush(); out.close(); } /** * The doPost method of the servlet. <br> * * This method is called when a form has its tag value method equals to post. * * @param request the request send by the client to the server * @param response the response send by the server to the client * @throws ServletException if an error occurred * @throws IOException if an error occurred */ public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("post"); response.setContentType("text/x-json"); PrintWriter out = response.getWriter(); out.println(getResult()); out.flush(); out.close(); } }
首先是 jsp中，method: 'get', url: 'xxx'， 最开始写成了 action: 'xxx'，总是找不到错误。无奈看了一点源代码忽然看到这个属性。
其次，页面怎么判断你到底是success了还是failure了呢，这个取决于后台的json。
也就是说后台的json也不能乱写 应该按照这个格式来 {success:true} 这样前台才知道你是成功了。
自己可以在{success:true, message:'login ok'}
这样来添加自己的别的代码。
记录一下，欢迎拍砖。
网上的确没有说的这么详细的东西
在前台得到json消息的时候是这样子的。参数2个名字按照顺序为 form,action action为返回的json数据
但是json.result才到了json的开始，如果是success的话 alert(action.result.success) 显示为true。
剩下的以此类推。