ExtJs 4.2.1、Django 1.5.2、DB Postgresql 9.1 を使用しています。
Web サイトにログイン フォームがあり、ユーザーがツールバーのボタンをクリックすると表示されます。資格情報 (ユーザー名とパスワード) を入力して [送信] ボタンをクリックすると、この情報がサーバーに送信されます。
サーバー側では、view.py スクリプトが呼び出されます。具体的には、ログインの 1 つのメソッド (def request_login(request)) で、ログインとユーザー認証のチェックが行われます。これらの制御の後、テキスト「成功」または「エラー」を含む httpResponse がクライアントに送信されます。残念ながら、クライアントはメッセージを受け取りませんが、代わりに index.html ページを受け取ります。取引所のメッセージのタイプをjsonで変更しようとしましたが、結果は同じです...エラー/成功メッセージはなく、代わりにindex.htmlページが返されます。
一般的な状況を説明するDjangoのドキュメントを見ました：古典的な形式のクライアント（index.html）->送信をクリックして、メソッドPOSTでメッセージを送信->この情報を受信するメソッドを含むview.pyがあります->サーバーメッセージで応答を送信します。通常、ログインに失敗した場合は同じページにリダイレクトされ、ログインに成功した場合は別のページにリダイレクトされます。私の場合、ログインが同じページ (index.html) に戻るようにします。
ログインフォームコード:
var winLogin;
Ext.onReady(function(){
Ext.tip.QuickTipManager.init(); //init tooltip
//create a panel to login
var loginFormPanel = Ext.create('Ext.form.Panel', {
bodyPadding: 15,
defaults: { //applying default settings to all added items
anchor: '100%',
xtype: 'textfield',
vtype: 'alphanum',
allowBlank: false,
},
fieldDefaults: {
labelWidth: 80,
labelAlign: 'left',
msgTarget: 'side',
},
items: [{
name: 'username',
fieldLabel: 'User Name',
minLength: 3,
maxLength: 20,
},{
name: 'password',
fieldLabel: 'Password',
inputType: 'password',
minLength: 4,
maxLength: 16,
},
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
items: [
{ xtype: 'tbfill' },
{
xtype: 'button',
itemId: 'cancel',
text: 'Cancel',
listeners: {
click: function() {
this.up('form').getForm().reset(); //reset all textfiled
}
}
},
{
xtype: 'button',
itemId: 'submit',
formBind: true,
text: "Submit",
listeners: {
click: function() {
var formPanel = this.up('form');
var user = formPanel.down('textfield[name=username]').getValue();
var pass = formPanel.down('textfield[name=password]').getValue();
if (formPanel.getForm().isValid()) {
Ext.Ajax.request({
url: 'editor/request_login',// call method in the django's view
method: 'POST',
params: {
username: user,
password: pass,
},
success: function (response, opts) {
var text = response.responseText;
Ext.Msg.alert('Success', text);
},
failure: function (response, opts) {
var text = response.responseText;
Ext.Msg.alert('Failure', text);
},
});
}
}
}
}
]
}
]
});
//create window to contain panel
winLogin = Ext.create('Ext.window.Window', {
title: 'Login',
closeAction: 'hide',
height: 170,
width: 360,
layout: 'fit',
iconCls: 'imgToolBarButtonLogin',
resizable: false,
draggable: false,
modal: true,
items: [
loginFormPanel,
],
});
winLogin.center();
});
view.py (サーバー):
# Create your views here.
from django.contrib.auth import authenticate, login
from django.http import HttpResponse
def request_login(request):
if request.method == 'POST':
requser = request.POST['username']
reqpass = request.POST['password']
user = authenticate(username=requser, password=reqpass)
if user is not None:
if user.is_active:
login(request, user)
# Return a success message
return HttpResponse("Success", content_type="text/plain")
else:
# Return a 'disabled account' error message
return HttpResponse("Error: this account is disabled!", content_type="text/plain")
else:
# Return an 'invalid login' error message.
return HttpResponse("Error: invalid login. Try again!", content_type="text/plain")
ログイン (JSON で変更):
...
{
xtype: 'button',
itemId: 'submit',
formBind: true,
text: "Submit",
listeners: {
click: function() {
var formPanel = this.up('form');
var user = formPanel.down('textfield[name=username]').getValue();
var pass = formPanel.down('textfield[name=password]').getValue();
if (formPanel.getForm().isValid()) {
Ext.Ajax.request({
url: 'editor/request_login',// call method in the django's view
method: 'POST',
params: {
username: user,
password: pass,
},
success: function (response, opts) {
var json = Ext.JSON.decode(response.responseText);
Ext.Msg.alert('Success', json['message']);
},
failure: function (response, opts) {
var json = Ext.JSON.decode(response.responseText);
Ext.Msg.alert('Failure', json['message']);
},
});
}
}
}
}
...
View.py (JSON で変更):
# Create your views here.
from django.contrib.auth import authenticate, login
from django.http import HttpResponse
import json
def request_login(request):
if request.method == 'POST':
requser = request.POST['username']
reqpass = request.POST['password']
user = authenticate(username=requser, password=reqpass)
response_data = {}
if user is not None:
if user.is_active:
login(request, user)
# Return a success message
response_data['result'] = 'success'
response_data['message'] = 'Has loged in'
response_data['fullname'] = user.get_full_name()
return HttpResponse(json.dumps(response_data), content_type="application/json")
else:
# Return a 'disabled account' error message
response_data['result'] = 'disabled'
response_data['message'] = 'this user is disabled'
return HttpResponse(json.dumps(response_data), content_type="application/json")
else:
# Return an 'invalid login' error message.
response_data['result'] = 'failed'
response_data['message'] = 'invalid login'
return HttpResponse(json.dumps(response_data), content_type="application/json")