sencha touch 使用Ajax请求ashx后台

来源：互联网发布：知乎阅读编辑：程序博客网时间：2024/04/30 03:08

sencha touch 使用Ajax请求ashx后台

使用senchatouch 在 js 文件中Ext.Ajax.request 请求（C#）后台的ASHX文件：

index.html
Login.js
Handler.ashx

index.html

起始文件，引入senchatouch的Js库：

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>LoginTest</title>    <link rel="stylesheet" type="text/css" href="touch/resources/css/sencha-touch.css">    <script id="microloader" type="text/javascript" src="touch/sencha-touch-all-debug.js"></script>    <script type="text/javascript" src="Login.js"></script></head><body></body></html>

Login.js

显示登陆界面：

Ext.require('Ext.MessageBox');Ext.application({    name: "StudentSystem",    launch: function () {        var dockedItems = [{            xtype: 'toolbar',            dock: 'top',            items: [            {                text: '退出',                ui: 'back',                handler: function () {                    Ext.Msg.alert("提示", "退出登录！");                }            }, {                xtype: 'spacer'            }, {                text: '注册',                ui: 'action',                handler: function () {                    Ext.Msg.alert("注册", "注册信息！");                }            }]        }];        var mainPanel = Ext.create('Ext.Container', {            fullscreen: true,            layout: 'vbox',            items: [                {                    dockedItems: dockedItems                }, {                    xtype: 'spacer'                }, {                    xtype: 'panel',                    style: 'text-align:center;font-size: 24pt;',                    html: '学生管理系统',                    id: 'form',                    flex: 2                }, {                    xtype: 'panel',                    flex: 4,                    items: [{                        xtype: 'fieldset',                        items: [{                            xtype: 'emailfield',                            labelAlign: 'left',                            name: 'username',                            id: 'username',                            label: '用户名：',                            placeHolder: '输入用户名'                        }, {                            xtype: 'passwordfield',                            labelAlign: 'left',                            name: 'password',                            id: 'password',                            label: '密码：',                            placeHolder: '输入密码'                        }]                    }]                }, {                    layout: 'hbox',                    items: [{                        xtype: 'button',                        name: 'login',                        id: 'login',                        text: '登录',                        style: 'margin-left:10px;',                        ui: 'action',                        width: 150,                        handler: function () {                            var usernameProxy = Ext.getCmp('username').getValue();                            var passwordProxy = Ext.getCmp('password').getValue();                            if (usernameProxy == '') {                                Ext.Msg.alert("错误信息", "用户名不能为空.");                            } else if (passwordProxy == '') {                                Ext.Msg.alert("错误信息", "密码不能为空.");                            } else if (usernameProxy == 'qidunwei' && passwordProxy == 'abcd') {                                Ext.Msg.alert("恭喜", "登陆成功");                            } else {                                Ext.Msg.alert("抱歉", "登录失败");                            }                            console.log("哈哈");                            Ext.Ajax.request({                                url: 'Handler.ashx',                                method: 'POST',                                params: {                                    name: usernameProxy,                                    pwd: passwordProxy                                },                                success: function (response) {                                    console.log("request");                                    var text = response.responseText;                                    console.log("服务端响应" + text);                                    Ext.Msg.alert("服务端响应", text);                                },                                failure: function (response, opts) {                                    console.log('server-side failure with status code ' + response.status);                                }                            });                        }                    }]                }, {                    xtype: 'spacer'                }]        });        Ext.Viewport.add(mainPanel);    }});

Handler.ashx

ASHX的后台代码：

using System;using System.Collections.Generic;using System.Linq;using System.Web;namespace App.www.handler{    /// <summary>    /// Handler 的摘要说明    /// </summary>    public class Handler : IHttpHandler    {        public void ProcessRequest(HttpContext context)        {            context.Response.ContentType = "text/plain";            string name = context.Request.Form["name"];            string pwd = context.Request.Form["pwd"];            string res = string.Format("姓名：{0},密码：{1}",name,pwd);            context.Response.Write(res);        }        public bool IsReusable        {            get            {                return false;            }        }    }}

示例

点击登录
显示响应

0 0