Question

我已经使用Jquery，ajax和json编写了前端简单登录应用程序，我想将json信息发送到php并且它必须检索json的数据，如果成功则必须重定向到另一个页面，这里很简单我正在使用的前端代码。

!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="login.css">
        <script src="jquery.js"></script>
        <script>
            $(document).ready(function(){
                $("#submit").on('click',function(){
                    var person={
                    user:$("#user").val(),
                    pass:$("#pass").val(),
                    }
                    $.ajax
                    ({
                        type: "POST",
                        url: '/test/login.php',
                        dataType: 'json',
                        async: false,
                        data: person,
                        success: function () {

                        }
                     })
            });
            });
</script>
    </head>
<body>
    <div id="loginstyle">
<form action="login.php" method="post">
<table>
<tr>
<td>
Email:</td><td><input type="email" name="email" id="user" ></td>
<tr><td>Password:</td><td><input type="password" name="password" id="pass"><td></tr>
</table>
<input type="submit" value="submit" id="submit">
</div>
</form>
</body>
</html>

有人可以建议我如何解码json数据并打印用户并传入login.php

Answer 1

你必须这样做

$.ajax
({
     type: "POST",
     url: '/test/login.php',
     dataType: 'json',
     async: false,
     data: person,
     success: function (data) {
           var res = $.parseJSON(data);
           //DO SOMETHING WITH res
           //IF res is some value, redirect, otherwise not.
     }
});

Answer 2

第一名：您可以在提交时使用e.preventDefault()以防止重新加载页面

$("#submit").on('click',function(e){
    e.preventDefault();

第二名，当您使用type: "POST",并在php中传递user: and pass:时

<?php
   echo($_POST['user']);
   echo($_POST['pass']);
?>

和ajax成功回调函数

success: function (data) {
           alert(data);
        }

在这种情况下，
可能不需要使用json作为dataType

第3名：最好看一下

What does "async: false" do in jQuery.ajax()?

$.ajax - dataType

encode json using php?

How to get JSON data on ajax call

how to parse json data with jquery / javascript?

Answer 3

当你调用$.ajax函数时，你定义了一个名为successful的参数，你通常会给它一个函数，一旦调用successful就执行它意味着：服务器已被调用使用给定的参数并收到响应。响应可能（或不能）包含在调用data函数时将使用的successful变量中传递的其他数据。

这是一个棘手的部分：虽然参数被称为successful，但在您的上下文中，提供的凭据可能无效，因此，在您的PHP代码中，您将通知ajax调用未接受登录尝试，您可能希望在data变量中传递信息。上面的场景描述了一次失败的登录尝试，但是成功的ajax调用。您需要在javascript代码中执行以下操作，以区分是否应将用户转发到下一页：

$.ajax({
 type: "POST",
     url: '/test/login.php',
     dataType: 'json',
     async: false,
     data: person,
     success: function (data) {
           // your php code should populate the (data) variable
           // in this example I used the variable as a string,
           // but you could use json notation and have a more 
           // complex structure (like data.valid = true)
           if (data == "valid_credentials") {
                window.location.href = 'nextpage.php';
           }
           else
           {
               alert('the provided credentials were not accepted.');
           }
     }
});

从jquery ajax获取Json数据到php并重定向页面

3 个答案: