前言
我想實現一個登錄功能：登錄的接口是另外一個地方提供，頁面上點登錄按鈕的時候，先訪問登錄接口，根據接口返回json信息判斷是否登錄成功，登錄成功頁面跳轉，登錄不成功，在登錄首頁顯示失敗原因
登錄頁
寫個簡單的登錄頁面，頁面上添加一個點擊區域方便調試代碼：<p id="aj">點這里調試ajx</p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登錄</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div style="margin: 15% 40%;">
<h1>歡迎登錄！</h1>
<form action="/login_json/" method="post">
{% csrf_token %}
<p>
<label for="id_username">用戶名：</label>
<input type="text" id="id_username" name="username" placeholder="用戶名" autofocus required />
</p>
<p>
<label for="id_password">密碼：</label>
<input type="password" id="id_password" placeholder="密碼" name="password" required >
</p>
<p style="color:red" id="msg">
{{msg}}
</p>
<input type="submit" id="button" value="確定">
</form>
<p id="aj">點這里調試ajx</p>
<br><br>
</div>
</body>
</html>
登錄接口基本信息如下：
登錄接口地址：/login_json/
請求方式：post
請求body參數("Content-Type","application/x-www-form-urlencoded; charset=UTF-8")：
- "username":從頁面輸入框獲取
- "password":從頁面輸入框獲取
- "csrfmiddlewaretoken": 頁面隨機生成的隱藏參數，從頁面上name="csrfmiddlewaretoken"獲取value值
返回數據（json格式）：
- 成功：{'status': "1", "msg": "success!"}
- 失敗：{'status': "0", "msg": "賬號或密碼不對"}
獲取頁面上請求參數
先把數據從頁面上抓取出來，定義三個變量，后面post請求好傳值
$('#aj').click(function(){
var name = $("#id_username").val();
var psw = $("#id_password").val();
var token = $('[name="csrfmiddlewaretoken"]').attr("value");
alert("name:"+name+"\n"+"psw:"+psw+"\n"+"token:"+token)
});
調試結果
發post請求
// 作者：上海-悠悠
$('#aj').click(function(){
var name = $("#id_username").val();
var psw = $("#id_password").val();
var token = $('[name="csrfmiddlewaretoken"]').attr("value");
$.post("/login_json/",
{
"username":name,
"password":psw,
"csrfmiddlewaretoken": token,
},
function(result){
alert("返回數據: \n" + "status:"+ result.status +"\n"+"msg:"+ result.msg);
});
});
頁面跳轉
jQuery實現頁面跳轉的幾種方法:
- 1.我們可以利用http的重定向來跳轉
window.location.replace("https://www.cnblogs.com/yoyoketang/");
- 2.使用href來跳轉
window.location.href = "https://www.cnblogs.com/yoyoketang/";
- 3.使用jQuery的屬性替換方法
$(location).attr('href', 'https://www.cnblogs.com/yoyoketang/');
$(window).attr('location','https://www.cnblogs.com/yoyoketang/);
$(location).prop('href', 'https://www.cnblogs.com/yoyoketang/')
$('#aj').click(function(){
var name = $("#id_username").val();
var psw = $("#id_password").val();
var token = $('[name="csrfmiddlewaretoken"]').attr("value");
$.post("/login_json/",
{
"username":name,
"password":psw,
"csrfmiddlewaretoken": token,
},
function(result){
if (result.status == "1") {
window.location.href = "/xadmin/"; //頁面成功跳轉
} else {
$("#msg").text(result.msg) //頁面失敗顯示提示語
}
});
});
當登錄失敗的時候，直接在頁面上id="msg"的p標簽寫一個文本： $("#msg").text(result.msg)
最終html
加個if判斷，當頁面上username和password為空的時候不提交請求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登錄</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#button').click(function(){
var name = $("#id_username").val();
var psw = $("#id_password").val();
var token = $('[name="csrfmiddlewaretoken"]').attr("value");
if (name && psw ){
$.post("/login_json/",
{"username":name,
"password":psw,
"csrfmiddlewaretoken": token
},
function(result){
if (result.status == "1") {
window.location.href = "/xadmin/"; //頁面成功跳轉
} else {
$("#msg").text(result.msg) //頁面失敗顯示提示語
}
});
}
});
})
</script>
</head>
<body>
<div style="margin: 15% 40%;">
<h1>歡迎登錄！</h1>
<form action="/login_json/" method="post">
{% csrf_token %}
<p>
<label for="id_username">用戶名：</label>
<input type="text" id="id_username" name="username" placeholder="用戶名" autofocus required />
</p>
<p>
<label for="id_password">密碼：</label>
<input type="password" id="id_password" placeholder="密碼" name="password" required >
</p>
<p style="color:red" id="msg">
{{msg}}
</p>
</form>
<input type="submit" id="button" value="確定">
<p id="aj">點這里調試ajx</p>
<br><br>
</div>
</body>
</html>
最后把“確定”按鈕放到form表單外面了，要不然會重復發請求了
ajax方式
使用 $.ajax()方式
$("#aj").click(function() {
var name = $("#id_username").val();
var psw = $("#id_password").val();
var token = $('[name="csrfmiddlewaretoken"]').attr("value");
if (name && psw ){
$.ajax({
"url" : "/login_json/", //提交URL
"type" : "Post",//處理方式
"data" : {
"username":name,
"password":psw,
"csrfmiddlewaretoken": token,
},//提交的數據
"dataType" : "json", //指定返回的數據格式
"success" : callback, //執行成功后的回調函數
"async" : "false",//是否同步
//錯誤后執行
"error" : function() {
$("#msg").text(result.msg) //頁面失敗顯示提示語
}
});
}
function callback(result) {
if (result.status == "1") {
window.location.href = "/xadmin/"; //頁面成功跳轉
} else {
$("#msg").text(result.msg) //頁面失敗顯示提示語
}
}
})