【Extjs登陆】表单ajax提交，登录实例 后台为servlet

js代码：

Ext.onReady(function(){

var _window=new Ext.Window({

   title:"登录",
   width:300,
   height:150,
   layout:"form",
   plain:true,
   bodyStyle:"padding:5px",
   labelWidth:45,
   resizable:false,
   defaults:{xtype:"textfield",width:"200"},
   items:[{
    fieldLabel:"用户名",
    name:"username",
    id:"username",
    allowBlank:false,
    blankText:"用户名不能为空"
   },{
    fieldLabel:"密 码",
    inputType:"password",
    name:"userpwd",
    id:"userpwd",
    allowBlank:false,
    blankText:"密码不能为空"
   }],
   buttons:[{
    text:"登录",
    type:"submit",
    handler:function(){
     var _username=Ext.getCmp('username').getValue();
     var _userpwd=Ext.getCmp('userpwd').getValue();
     Ext.MessageBox.buttonText.ok="确定";//换按钮上的字，将ok换为确定
     if(_username=="")
     {
     
      Ext.Msg.alert("提示","用户名不能为空，请输入用户名");
     }else if(_userpwd=="")
     {
      Ext.Msg.alert("提示","密码不能为空，请输入登录密码");
     }
     else{
        Ext.MessageBox.show({
       title:"请稍等",
       msg:"正在加载...",
         progress:true,//渲染进度条，默认是false
         closable:true,
         animEl:"loading"
      });
      var f = function(v) {
              return function(){
                var i = v / 11;
                Ext.MessageBox.updateProgress(i, '');
               }
             }
          
     Ext.Ajax.request({
          url:"http://192.168.0.100:8088/ajaxTest/loginTest",
          method:"post",
          success:function(response,opts){
                var sf=response.responseText;
                if(sf=="success")
                 Ext.Msg.alert("提示","登录成功");

               else{

                   Ext.Msg.alert("提示","登录失败");

                  }
               },
          failure:function(response,opts){
          
          Ext.Msg.alert("提示","登录失败");
          },
          params:{
             username:_username
          }
     })
    }
    }
   
   },{
    text:"取消"
   }]
});
_window.show();
});

　　

web.xml添加：

<servlet>
<servlet-name>login</servlet-name>
<servlet-class>servlet地址</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>login</servlet-name>
<url-pattern>/loginTest</url-pattern>
</servlet-mapping>

 

 

servlet代码：

package com.wjl.test;

import java.io.IOException;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class LoginTest extends HttpServlet {

private static final long serialVersionUID = 1L;
public void doGet(HttpServletRequest request,HttpServletResponse response) throws IOException{
   response.setContentType("text/html");
   response.setCharacterEncoding("utf-8");
   String str=request.getParameter("username");
   if(str.equals("admin"))
   {
    response.getWriter().print("success");
   }
   else{
    response.getWriter().print("failure:ture");
   }
  
}
public void doPost(HttpServletRequest request,HttpServletResponse response) throws IOException{
   doGet(request,response);
}

}

　　

效果如下：

 

 

代码下载