ext使用Ajax示例

来源：互联网发布：卓智网络工作怎么样编辑：程序博客网时间：2024/04/29 00:16

var ThePageUrl = "../Tools/PropAjax.aspx";
    Ext.Ajax.request({
                //请求地址
                url: ThePageUrl,
                method: 'GET',
                //提交参数组
                params: {
                    Type: 2,//Ext.get('LoginName').dom.value,
                    PageNum:PageNum //Ext.get('LoginPassword').dom.value
                },
                //成功时回调
                success: CallBackFun,
                failure: ErrCallBackFun
            });

function CallBackFun(response, options)
{
alert(response.responseText);
BuildInfo( response.responseText );
}
function ErrCallBackFun(response, options)
{

}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" type="text/css" href="../lib/ext/resources/css/ext-all.css" />
        <script type="text/javascript" src="../lib/ext/adapter/ext/ext-base.js">
        </script>
        <script type="text/javascript" src="../lib/ext/ext-all.js">
        </script>
        
        <script type="text/javascript" src="../ex_lib/examples.js">
        </script>
        <link rel="stylesheet" type="text/css" href="../ex_css/menus.css" />
        
    </head>
    <script>
        var menuUrl = 'http://localhost:8080/Linkey_BPM_JSP/sysMenus.bpm';

        function a1(){

            Ext.Ajax.request({
                //请求地址
                url: menuUrl,
                method: 'POST',
                //提交参数组
                params: {
                    LoginName: Ext.get('LoginName').dom.value,
                    LoginPassword: Ext.get('LoginPassword').dom.value
                },
                //成功时回调
                success: function(response, options){
                    //获取响应的json字符串
                    var responseArray = Ext.util.JSON.decode(response.responseText);
                    if (responseArray.success == true) {
                        var name = Ext.get('LoginName').dom.value;
                        Ext.Msg.alert('恭喜', '您已成功登录！');
                        Ext.Msg.alert('恭喜' + name, '您是' + responseArray.data);
                    }
                    else {
                        Ext.Msg.alert('失败', '登录失败，请重新登录');
                    }
                }
            });


        }

        function b1(){
            var name = Ext.get('LoginName').dom.value;
            Ext.Msg.alert(name, '加载中');
        }
    </script>
    <body>
        <form method="POST" name="frmTest">
            <table>
                <input type="text" id="LoginName">
                </input><input type="text" id="LoginPassword"">
                </input><input type="button" value="按钮A" name="A1" onclick="a1();">
                </input><input type="button" value="按钮B" name="B1" onclick="b1();">
                </input>
                </table>
            </form>
            </body>
        </html>

-------------------------------------------------------------------------------------------------

public ActionForward execute(ActionMapping mapping, ActionForm form,
            HttpServletRequest request, HttpServletResponse response) {

        // 初始化编码方式和输出流
        response.setContentType("text/json; charset=utf-8");
        PrintWriter out = null;
        try {
            out = response.getWriter();
        } catch (IOException e) {
            e.printStackTrace();
        }

        //

        // 得到页面传过来的参数
        String username = request.getParameter("LoginName");
        String password = request.getParameter("LoginPassword");
        System.out.println("a的用户名：" + username);
        System.out.println("a的密码：" + password);
        try {
            username = java.net.URLDecoder.decode(username, "UTF-8");
            password = java.net.URLDecoder.decode(password, "UTF-8");
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
        System.out.println("b的用户名：" + username);
        System.out.println("b的密码：" + password);
        boolean success = false;
        if (username.equals("熊熊"))
            success = true;
        // 初始化
        Map map = new HashMap();

        map.put("success", success);
        map.put("data", "民工");
        // 转换成对象，不要转换成数组
        JSONObject obj = JSONObject.fromObject(map);
        // 输出到列表
        out.print(obj);
        return null;
    }

--------------------------------------------------------------------------------------

那么要想添加一个loading应该这么做，

   var ThePageUrl = "../Tools/PropAjax.aspx";
   var msg = Ext.get("PropContList");
   msg.load({
       url: [ThePageUrl], // <-- replace with your url
       method: 'GET',
       //params: "Type=2&PageNum="+PageNum,
       //"name=" + Ext.get('name').dom.value,
       params: {
                    Type: 2,
                    PageNum:PageNum
                },
       success: CallBackFun,
       failure: ErrCallBackFun,
       text: "Loading..."
    });
   /msg.show();