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