Question

这可能是一项相对简单的任务，但我不知道为什么我在过去3天内一直在努力解决这个问题。

我必须创建一个登录表单，将电子邮件和密码发送到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的页面。有人请帮助我！

Answer 1

使用下面的代码发送帖子请求，然后检查响应

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

}
   });
  });

Answer 2

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

Answer 3

你可以检查你回复json的字符串。

使用JQuery发送表单数据并解析返回的JSON数据

3 个答案: