Javascriptを使用してXMLHttpRequest(https://developer.mozilla.org/en/using_xmlhttprequest)を実行して、入力ボックスのテキストをPOSTし(次の例のようにjQueryを使用するとさらに簡単になります)、サーバー側でDBクエリを実行できます。電子メール(入力ボックスのテキスト)が一意であるかどうかを確認します。したがって、このビューから応答が返されます。ここで、非IEブラウザーのデコレーターは、IEブラウザー用に設定されています。例えば:xhr=True
@view_config()
request.response.content_type='text/html'
@view_config(permission='view', route_name='check_email', renderer='json') ##for IE browsers
@view_config(permission='view', route_name='check_email', renderer='json', xhr=True) ##for non-IE
def check_email(request):
email= request.POST['email']
dbquery = DBSession.query(User).filter(User.email==email).first()
## if the email exists in the DB
if dbquery:
msg = 'used'
## else if the email is available
else:
msg = 'available'
if request.is_xhr:
return {'msg':msg}
else: # for IE browser
request.response.content_type = 'text/html'
return Response(json.dumps({'msg':msg}))
jQueryなどのライブラリを使用してXMLHttpRequestを処理することにより、簡単に(クライアント側で)POSTを実行できます。テンプレートにjQueryライブラリを含めた後、スクリプトに.jsファイルを含めます。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript' src="{{request.static_url('tutorial:static/myscript.js')}}"></script>
そして、myscript.jsで次のことを行います。
$(function() {
$('#email').on('blur', postEmail)
})
// this function POSTs the entered email
function postEmail() {
var email = $(this).val()
$.post('/check_email', email, callback)
}
// this function is used to do something with the response returned from your view
function callback(data) {
if (data['msg'] === 'used') {
alert('used')
}
else if (data['msg'] === 'available') {
alert('available')
}
}