javascript - AJAX 和 PHP 响应给出 "SyntaxError: Unexpected end of JSON input"

Question

我正在使用 AJAX 调用验证脚本。在返回 $response 时，我不断收到错误 SyntaxError: Unexpected end of JSON input。如果我没有返回格式正确的 JSON 数据，我不会感到惊讶，但现在我已经在 J​​SON 解析器中运行响应 { "loggedIn": false } 并且它似乎有效。我做错了什么？

ajaxexample.php

<form method="post" name="login">
    <input type="text" name="username" > Email/Username: <br>
    <input type="password" name="password" > Password: <br>
    <input type="submit">
</form>

<div id="content"></div>
</body>
</html>

<script>

$(document).on( 'submit', $("#login"), function(event){

    event.preventDefault();

    var formData = '{"login":[ {'+
                        '"username":"'+$('input[name="username"]').val()+'",'+
                        '"password":"'+$('input[name="password"]').val()+'"'+
                   '}]}';
   var formData = JSON.parse(formData);

    // Using the core $.ajax() method
    $.ajax({

    // The URL for the request
    url: "users/validate.php",

    // The data to send (will be converted to a query string)
    data: formData,

    // Whether this is a POST or GET request
    type: "POST",

    // The type of data we expect back
    dataType : "json",
    })
      // Code to run if the request succeeds (is done);
      // The response is passed to the function
      .done(function( data ) {

         $( "<div class=\"content\">").html( JSON.stringify(data) ).appendTo( "body" );
      })
      // Code to run if the request fails; the raw request and
      // status codes are passed to the function
      .fail(function( xhr, status, errorThrown ) {
        alert( "Sorry, there was a problem!" );
        console.log( "Error: " + errorThrown );
        console.log( "Status: " + status );
        console.dir( xhr.responseText );
      })
      // Code to run regardless of success or failure;
      .always(function( xhr, status ) {

      });
});
</script>

验证.php

<?php require_once '../users/init.php';?>

<?php
    if(isset($_POST))
    {

        $username = $_POST['username'];
        $password = $_POST['password'];

        $validate = new Validate();
        $validation = $validate->check($_POST, array(
          'username' => array('display' => 'Username','required' => true),
          'password' => array('display' => 'Password', 'required' => true)));

        if ($validation->passed()) 
        {
            $user = new User();
            $login = $user->loginEmail($username, $password, $remember);
            $response = array('loggedIn'=>$login);
            echo json_encode($response, JSON_PRETTY_PRINT );
        }
    }
    else
    {
        echo json_encode("No data.");
    }
?>

Answer 1

我在那里看到了几个问题

首先，您发送的数据格式错误，并且创建一个 json 字符串然后将其解析为一个对象是不必要的，因为您可以首先创建对象。

var formData = {
                 "username": $('input[name="username"]').val(), 
                 "password": $('input[name="password"]').val()
               };

其次，由于您的数据格式错误，$validation->passed() 将是错误的，您将不会在请求中返回任何数据，请求中需要 json 并将提供当它没有得到任何时你看到的错误。

    if ($validation->passed()) 
    {
        $user = new User();
        $login = $user->loginEmail($username, $password, $remember);
        $response = array('loggedIn'=>$login);
        echo json_encode($response, JSON_PRETTY_PRINT );
    }
    else{
      echo json_encode(array('loggedIn'=>false), JSON_PRETTY_PRINT );
    }

此外，表单提交处理程序的选择器是错误的，它应该是这样的

$(document).on( 'submit', "[name=login]", function(event){