Question

长期读者，第一次海报。我对jQuery和JSON这个世界很陌生，并且已经看到了我正在运行的登录脚本的问题。

最终目标是从表单中捕获数据，将该数据传递给PHP文件以通过jQuery.ajax（）发布进行处理，将数据与MySQL数据库进行比较以进行身份验证并返回数据以确保成功失败

我的问题是我无法将JSON格式的数据从PHP脚本传递回jQuery。在使用Chrome的开发人员工具查看处理时，我看到了“登录失败”。我通过将它扔到我的error_log文件中来仔细检查数组$ rows，并返回格式正确的JSON，但我不能在我的生命中让它返回到jQuery文件。任何帮助表示赞赏。

我的表单输入：

<!-- BEGIN: Login Page -->
    <section data-role="page" id="login">
        <header data-role="header" data-theme="b">
            <a href="#landing" class="ui-btn-left">Back</a>
        <h1>Please Log In</h1>
        </header>
        <div data-role="content" class="content" data-theme="b">
            <form id="loginForm" action="services.php" method="post">
                <div data-role="fieldcontain">
                    <label for="schoolID">School ID</label>
                    <input type="text" name="schoolID" id="schoolID" value=""  />

                    <label for="userName">Username</label>
                    <input type="text" name="userName" id="userName" value=""  />

                    <label for="password">Password</label>
                    <input type="password" name="password" id="password" value=""  />

                    <h3 id="notification"></h3>
                    <button data-theme="b" id="submit" type="submit">Submit</button>
            <input type="hidden" name="action" value="loginForm" id="action">
                </div>
            </form>
        </div>
        <footer data-role="footer" data-position="fixed" data-theme="b">
            <h1>Footer</h1>
        </div>
    </section>
    <!-- END: Login Page -->

我的jQuery处理程序：

// Listen for the the submit button is clicked, serialize the data and send it off
    $('#submit').click(function(){
        var data = $("#loginForm :input").serializeArray();
    var url = $("#loginForm").attr('action');

    $.ajax({
        type: 'POST',
        url: url,
        cache: false,
        data: data,
        dataType: 'json',
            success: function(data){
            $.ajax({
                type: 'GET',
                url: "services.php",
                success: function(json){
                alert(json);
                $('#notification').append(json);
                }
            });
            }
        });
    });

这是我的PHP处理：

if (isset($_POST['action'])) {
    $schoolID = $_POST['schoolID'];
    $userName = $_POST['userName'];
    $password = $_POST['password'];

    $sql = "SELECT FirstName, LastName, FamilyID, StudentID, UserID ";
    $sql .= "FROM Users ";
    $sql .= "WHERE SchoolID = '$schoolID' ";
    $sql .= "AND Username = '$userName' ";
    $sql .= "AND Password = '$password'";
    $rs = mysql_query($sql);

    $rows = array();
    while($row = mysql_fetch_array($rs, MYSQL_ASSOC)) {
        $row_array['firstName'] = $row['FirstName'];
        $row_array['lastName'] = $row['LastName'];
        $row_array['familyID'] = $row['FamilyID'];
        $row_array['studentID'] = $row['StudentID'];
        $row_array['userID'] = $row['UserID'];
        array_push($rows, $row_array);
    }

    header("Content-type: application/json", true);
    echo json_encode(array('rows'=>$rows));
    exit;

    }else{

    echo "Login Failure";
    }

Answer 1

看看你在这里犯了什么错误很简单

 $.ajax({
    type: 'POST',
    url: 'services.php',
    cache: false,
    data: $('#loginForm').serialize(),
    dataType: 'json',
        success: function(data){
            alert(data);
            $('#notification').append(data);
        }
    });
});

使用jquery的serialize函数。当你有一个成功函数参数时，它不是你在这个指令中的'数据'

data : data,

从php结束返回它是成功返回的新数据。为避免冲突，请使用new_data

之类的其他内容

    success: function(new_data){
        alert(new_data);
        $('#notification').append(new_data);
    }

新数据采用json格式检查。如果你使用的是firefox，请使用console.log查看firebug。

    success: function(new_data){
        console.log(new_data);
        alert(new_data);
        $('#notification').append(new_data);
    }

Answer 2

尝试更改：

var data = $("#loginForm :input").serializeArray();

为：

var data = $("#loginForm").serialize();

这应该可行，因为我非常确定.ajax请求中的“数据”应该是序列化字符串，serializeArray返回一个对象数组。

http://api.jquery.com/serialize/

http://api.jquery.com/serializeArray/

编辑1：

这看起来像是一个事件冒泡问题。请尝试以下方法：

将您的javascript更改为：

function processForm(formObj) {
    var $form = $(formObj);
    var data = $form.serializeArray();
    var url = $form).attr('action');

    $.ajax({
        type: 'POST',
        url: url,
        cache: false,
        data: data,
        dataType: 'json',
        success: function(data){
            $('#notification').append(data);
        }
    });

    return false;
}

你的表格：

<form id="loginForm" action="services.php" method="post" onsubmit="return processForm(this)">
    <div data-role="fieldcontain">
        <label for="schoolID">School ID</label>
        <input type="text" name="schoolID" id="schoolID" value=""  />

        <label for="userName">Username</label>
        <input type="text" name="userName" id="userName" value=""  />

        <label for="password">Password</label>
        <input type="password" name="password" id="password" value=""  />

        <h3 id="notification"></h3>
        <button data-theme="b" id="submit" type="submit">Submit</button>
        <input type="hidden" name="action" value="loginForm" id="action">
    </div>
</form>

Answer 3

简单回答：用户错误。我没有真正理解getJSON（）函数的概念。它旨在将数据发送到PHP脚本，并在成功时处理返回数据。我假设它需要一个函数来发送信息和一个函数来检索信息。

感谢您的帮助！

使用jQuery从PHP文件返回JSON数据

3 个答案: