如何使用 jQuery 从一个页面显示到另一个页面？

Question

这是我目前的代码：

HTML：

<form>
    <label>First Name</label> <input type="text" class="first" /><br />
    <label>Last Name</label> <input type="text" class="last" /><br />
    <label>Age</label> <input type="text" class="age" /><br />
    <input type="button" class="submit" value="Submit" />
</form>

PHP：

$first = mysql_real_escape_string($_POST['first']);
$last = mysql_real_escape_string($last = $_POST['last']);
$age = mysql_real_escape_string($_POST['age']);

$query = mysql_query( "INSERT INTO people(first, last, age) VALUES ('$first', '$last', '$age')" );

if ($query) {
    echo "Success: $first $last has been entered";
} else {
    echo "FAIL!!!";
}

jQuery：

$('.submit').click(function() {

    var first = $('.first').val();
    var last = $('.last').val();
    var age = $('.age').val();

    var dataString = 'first=' + first + '&last=' + last + '&age=' + age;

    $.ajax({
        type: 'post',
        url: 'practise_process.php',
        data: dataString,
        success: function() {
            alert('success');
        }, error: function() {
            alert('error');
        }
    });

});

现在我可以使用上面的代码通过 ajax 函数将表单输入输入到数据库中，而无需刷新页面。但是如何从 PHP 脚本（practice_process.php）显示到表单页面？

这部分：

if ($query) {
    echo "Success: $first $last has been entered";
} else {
    echo "FAIL!!!";
}

编辑

我对我的 PHP 文件进行了此更改：

if ($query) {
    $message = "Success: $first $last has been entered";
} else {
    $message = "FAIL!!!";
}


echo "

<script type='text/javascript'>
var foo = $message;
</script>

";

并将我的表单页面上ajax函数的成功改成这样：

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

但是在 PHP 文件中设置的 var foo 在表单文件中没有被识别。

Answer 1

首先，您需要做一些额外的事情来防止页面重新加载。这是通过从单击事件处理函数返回 false 来完成的。

$('.submit').click(function() {
    $.ajax({
        ... blah blah blah ...
    });

    return false; // this stops page refresh by preventing further event processing
});

接下来，让您的成功函数接收响应参数，以查看从服务器返回的内容。示例：

$.ajax({
    type: 'post',
    url: 'practise_process.php',
    data: dataString,
    success: function(response) {
        alert('Received this from server: ' + response);
    }, error: function() {
        alert('error');
    }

});

有关成功函数的所有详细信息，请参阅 $.ajax 上的 jQuery 文档：http://api.jquery.com/jQuery.ajax/

Answer 2

<?php
//other code here.....

if ($query) {
    $message = "Success: $first $last has been entered";
} else {
    $message = "FAIL!!!";
}

echo $message;
<?

//in jQuery function...


$.ajax({
        type: 'post',
        url: 'practise_process.php',
        data: dataString,
        success: function(foo) {
            alert(foo);
        }, error: function() {
            alert(foo);
        }
    });

如果您将 'foo' 设为函数参数，它将接收从 PHP 文件中回显的任何内容。然后，您可以使用 JS 向用户 alert() 或显示它。此外，如果您将 mysqli 用于您的 db 连接，您可以回显 mysqli_error($dbLink); 以提醒 SQL 错误（如果有）。 JS 变量必须在客户端设置，但它可以由服务器端的 PHP 提供。