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

Posted 2023-02-24

【中文标题】在后台发送论坛而无需重新加载页面

【英文标题】：sending forum in background without page reload

【发布时间】：2016-04-27 02:18:43

【问题描述】：

我有一个 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>

【问题讨论】：

jQuery.ajax()

感谢@Darren 我已经尝试寻找如何使用它，但我找不到我能做到的。

检查我的答案。它一步一步地满足你所需要的一切

【参考方案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/

【讨论】：

请你帮忙告诉我最后一节是什么，我是怎么写的

就在您的 标签下方

@Jack，这是不言自明的。无论如何更新了答案，对其他用户更好。