使用JQuery發送表單數據並解析返回的JSON數據

這可能是一個相對簡單的任務，但我不知道爲什麼我一直在過去3天一直在掙扎。使用JQuery發送表單數據並解析返回的JSON數據

我必須創建一個登錄表單，將電子郵件和密碼發送到一個php文件。 php文件驗證用戶並返回JSON數據。如果登錄不成功

enter{"error":0,"message":"User successfully logged in!","api_key":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJzdHJlZXRlYXRfdXNlcmhhbmRsZXIiLCJleHAiOjE0NDA0Mjg5NDEsImlhdCI6MTQzOTUyODk0MX0.OcDRN4tiQrZPJnpA3Iw2tF4kogYxX-DuDhFqd8vqQts"}

：

enter{"error":1,"message":"User doesn't exist!"}

形式需要將用戶重定向到另一個HTML頁面，如果登錄成功的JSON返回，如果登錄成功。我已經嘗試幾乎每個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的頁面。有人請幫助我！

來源

2015-08-14 Jay Rungta

您是否檢查控制檯中的網絡選項卡以查看是否發出請求以及響應是否成功返回？ – nancyolson531

使用下面的代碼來發送POST請求，然後檢查響應

$(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"); 
    }, 
    }); 

} 
    }); 
    });

來源

2015-08-14 05:37:22 dom

您可以檢查字符串您迴應JSON。

來源

2015-08-14 05:52:25 gangzi

$(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 
     }); 
    } 
    }); 
});

來源

2015-08-14 07:00:05 Sujithrao

使用JQuery發送表單數據並解析返回的JSON數據

回答

相關問題