轉自：http://www.cnblogs.com/python-study/p/6060530.html
1.使用Ajax在后台傳遞參數的示例
要使用Ajax傳遞參數，需要使用jquery，使用jquery需要注意以下幾點。
1.建立static的目錄，將jquery導入
2.在項目s13day18_django的settings配置中，指定jquery的目錄，同時注釋掉CSRF
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR,'static'),
)
# 'django.middleware.csrf.CsrfViewMiddleware',
3.在app01下面，指定路由關系
urlpatterns = [
# url(r'^index/(\d+)/', views.index),
# url(r'^detail/(\d+)/',views.detail),
# url(r'^template/',views.template),
url(r'^extend/',views.extend),
url(r'^assets/',views.assets),
url(r'^userinfo/',views.userinfo),
url(r'^ajax_demo/',views.ajax_demo),
]
4.在app01下面，定義ajax_demo函數
def ajax_demo(request):
if request.method == 'POST':
user = request.POST.get('user')
pwd = request.POST.get('pwd')
print(user,pwd)
if user == '111' and pwd == '222':
return HttpResponse('1')
else:
return HttpResponse('2')
return render(request,'ajax_demo.html')
5.在templates中，添加關於ajax_demo的HTML信息
<body>
<div>
<p>用戶名: <input type="text" id="username" /></p>
</div>
<div>
<p>密碼: <input type="password" id="pwd" /></p>
</div>
<input type="button" value="提交" onclick="SubmitForm();"/>
<script src="/static/jquery-1.12.4.js"></script>
<script>
function SubmitForm(){
$.ajax({
url:'/web/ajax_demo/',
type:'POST',
data:{'user':$('#username').val(),'pwd':$('#pwd').val()},
success:function(data){
if(data == '1'){
location.href="http://www.baidu.com";
}
else{
alert("用戶名或密碼錯誤")
}
}
})
}
</script>
</body>
整個執行的過程是，ajax傳遞參數給了函數ajax_demo，函數獲取到用戶鍵入的值，然后通過HttpResponse返回給回調函數success，回調函數再執行相應的操作。
==================================================================================================== 但是在實際的使用中，我們要這么定義views.py
import json
def ajax_demo(request):
if request.method == 'POST':
ret = {'status':False,'message':''}
user = request.POST.get('user')
pwd = request.POST.get('pwd')
print(user,pwd)
if user == '111' and pwd == '222':
ret['status'] = True
return HttpResponse(json.dumps(ret))
else:
ret['message'] = '用戶名或密碼錯誤'
return HttpResponse(json.dumps(ret))
return render(request,'ajax_demo.html')
ajax_demo.html
<body>
<div>
<p>用戶名: <input type="text" id="username" /></p>
</div>
<div>
<p>密碼: <input type="password" id="pwd" /></p>
</div>
<input type="button" value="提交" onclick="SubmitForm();"/>
<script src="/static/jquery-1.12.4.js"></script>
<script>
function SubmitForm(){
$.ajax({
url:'/web/ajax_demo/',
type:'POST',
data:{'user':$('#username').val(),'pwd':$('#pwd').val()},
dataType:'json',
success:function(data){
if(data.status){
location.href="http://www.baidu.com";
}
else{
alert(data.message)
}
}
})
}
</script>
</body>
如果不用ajax自帶的dataType類型，也可以自己將json的格式轉化為字典格式：
<script src="/static/jquery-1.12.4.js"></script>
<script>
function SubmitForm(){
$.ajax({
url:'/web/ajax_demo/',
type:'POST',
data:{'user':$('#username').val(),'pwd':$('#pwd').val()},
{# dataType:'json',#}
success:function(data){
var data_dic = JSON.parse(data);
if(data_dic['status']){
location.href="http://www.baidu.com";
}
else{
alert(data_dic['message'])
}
}
})
}
</script>
JQuery中的ajax也是調用了瀏覽器中的XMLHttpRequest對象來執行的。
http://www.cnblogs.com/wupeiqi/articles/5703697.html