sencha touch 使用Ajax请求ashx后台_ext.ajax.request ashx-优快云博客

本文链接：https://blog.youkuaiyun.com/qidunwei/article/details/46559679

本文介绍如何在Sencha Touch应用中通过Ajax请求C#编写的ASHX后台处理程序。示例包括index.html的启动文件设置，Login.js中的登陆界面展示，以及Handler.ashx的后台处理代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
            }
        }
    }
}

示例

点击登录
显示响应