在后台发送论坛而无需重新加载页面

Question

我有一个 php 论坛，它将信息发送到我的数据库并将其发送回该页面，但我遇到了一个小问题。当我提交论坛页面完全重新加载。我不想要。完成我需要论坛在后台重新加载的内容。我一直在寻找一种方法来做到这一点，但他们都不能帮助我完成这项任务。这是下面的代码。

//this is the php file which runs the fourm

<?php
header("Location: localhost:8888"); 


$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "myDB";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

$value = $_POST['firstname'];

$sql = "INSERT INTO MyGuests (firstname) VALUES ('$value')";


if ($conn->query($sql) === TRUE) {
    echo "<a href=https://twitter.com/angela_bradley>My Twitter</a>";
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}

$conn->close();
?>
//this is the fourm
<form action="demo.php" method="post" />
<p>Input 1: <input type="text" name="firstname" /></p>
<input type="submit" value="Submit" />
</form>

Answer 1

尝试将您的插入查询代码移动到单独的文件中。让我们说示例register.php，它应该返回简单的文本，如成功，否则带有错误消息。这样就可以方便的查看Ajax成功回调中的数据了。

$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "myDB";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

$value = $_POST['firstname'];

$sql = "INSERT INTO MyGuests (firstname) VALUES ('$value')";


if ($conn->query($sql) === TRUE) {
    echo "success";
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}

$conn->close();
?>

如果你想返回 JSON，你可以像下面这样更新你的 PHP 代码。

header('Content-Type: application/json');

if ($conn->query($sql) === TRUE) {
   $message = "success";
} else {
   $message = "Error: " . $sql . "<br>" . $conn->error;
}
$result = '{"message": ' + $message + '}';
echo json_encode($result);

将 Id 添加到您的表单以通过 DOM 轻松识别

<form id="target" action="demo.php" method="post" />
<p>Input 1: <input type="text" name="firstname" /></p>
<input id="submit" type="submit" value="Submit" />
</form>

使用$.submit将在用户提交时触发，使用serialize和$.post生成JSON数据帮助进行ajax发布。

在正文结束之前添加这个并带有包围的脚本标签

   <script type="text/javascript">
    $( "#target" ).submit(function( event ) {
      event.preventDefault();
      var jqxhr = $.post( "register.php", $(this).serialize(), function(data) {
        alert( "success" );
      })
      .done(function() {
        alert( "second success" );
      })
      .fail(function() {
        alert( "error" );
      })
      .always(function() {
        alert( "finished" );
    });
    });
    </script>

参考： http://api.jquery.com/jquery.post/