使用JQuery發送表單數據並解析返回的JSON數據
[英]Sending form data using JQuery and parsing the returned JSON data
問題描述
這可能是一個相對簡單的任務，但我不知道為什么過去三天一直在為此苦苦掙扎。
我必須創建一個將電子郵件和密碼發送到php文件的登錄表單。 php文件驗證用戶並返回JSON數據。 如果登錄成功，則返回JSON：
enter{"error":0,"message":"User successfully logged in!","api_key":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJzdHJlZXRlYXRfdXNlcmhhbmRsZXIiLCJleHAiOjE0NDA0Mjg5NDEsImlhdCI6MTQzOTUyODk0MX0.OcDRN4tiQrZPJnpA3Iw2tF4kogYxX-DuDhFqd8vqQts"}
如果登錄不成功：
enter{"error":1,"message":"User doesn't exist!"}
如果登錄成功，則表單需要將用戶重定向到另一個html頁面。 我已經嘗試了幾乎所有的jQuery方法（$ .post，$。ajax）來發送表單數據並接收JSON數據，但到目前為止仍未成功。 我試過的代碼：
HTML：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="img.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" class="ui-content">Login</div>
<div data-role="content" class="ui-content">
<form method="post" action="#" id="loginform">
<div class="ui-field-contain">
<br>
<div>
<label for="email">Email:</label>
<input type="email" name="email" id="email" data-clear-btn="true">
</div>
<div>
<label for="password">Password:</label>
<input type="password" name="password" id="password" data-clear-btn="true">
</div>
<input type="button" value="Login" id="login">
</div>
</form>
</div>
JavaScript代碼：
$(document).ready(function(){
$("#login").click(function(){
var email = $("#email").val();
var password = $("#password").val();
// Checking for blank fields.
if (email =='' || password =='') {
alert("Please fill all fields...!!!!!!");
}
else {
$.post("http://streetdict.esy.es/v1/login",{ email: email, password:password},
function(data) {
var json_response=data;
alert(json_response);
});
}
});
});
這段代碼基本上應該只將JSON響應顯示為警報，對嗎？ 除了它什么都不顯示。 我需要做的是，如果登錄成功，它應該使用ajax異步重定向到另一個名為untitled.html的頁面。 有人請幫助我！
3 個解決方案
解決方案1
1 已采納 2015-08-14 05:37:22
使用下面的代碼發送發布請求，然后檢查響應
$(document).ready(function(){
$("#login").click(function(){
var email = $("#email").val();
var password = $("#password").val();
// Checking for blank fields.
if( email =='' || password ==''){
alert("Please fill all fields...!!!!!!");
}
else {
$.ajax({
url:'http://streetdict.esy.es/v1/login',
type:'POST',
data:{ email: email, password:password},
success:function(data){
if(data['error'] == '0'){
window.location.href = 'untitled.html';
}
},
error:function(e){
alert("error in request");
},
});
}
});
});
解決方案2
1 2015-08-14 07:00:05
$(document).ready(function(){
$("#login").click(function(){
var email = $("#email").val();
var password = $("#password").val();
// Checking for blank fields.
if (email =='' || password =='') {
alert("Please fill all fields...!!!!!!");
}
else {
$.getJSON("http://streetdict.esy.es/v1/login",{ email: email, password:password}).done(function(data) {
$.each(data, function(key, value) {
//you can do your logic here
});
}
});
});
解決方案3
0 2015-08-14 05:52:25
您可以檢查響應的字符串是否為json。
使用jQuery解析JSON數據
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.