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

首先，您需要做一些额外的事情来阻止页面重新加载。这是通过从您的点击事件处理函数返回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向用户发出警报（）或显示它。此外，如果您使用mysqli进行数据库连接，则可以回显m ysqli_error($dbLink);以警告SQL错误（如果有）。 JS变量必须在客户端设置，但它可以由服务器端的PHP提供。

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

修改

2 个答案: