如何使用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脚本（practise_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

首先，您需要做一些额外的事情来防止页面重新加载。 这是通过从click事件处理函数中返回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 docs： 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作为数据库连接，则可以回显m ysqli_error($dbLink); 警告是否存在SQL错误。 JS变量必须在客户端设置，但是可以由您的PHP在服务器端提供。