使用ajax和jquery提交表单后，不要重新加载页面

Question

项目：购物清单目的：将商品添加到无序列表中。 用户以表单的形式添加项目，表单不应重新加载，并且网页会无缝地将添加的项目显示在列表中。 添加的项目应传递到MySQL数据库中。

截至目前，我的MySQL中只有一个表，只有一行

HTML：

<form id="inputItem" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" >
    <div>
        <ul>
            <div id="list"></div>
            <li>
                <input type="text" name="itemIn" id="itemIn"></input>
                <button onclick="addList(document.getElementById('itemIn').value)">ADD</button>
            </li>
        </ul>
    </div>
</form>

JavaScript代码：

function addList(item){
    document.getElementById('list').innerHTML += "<li><input type='checkbox'>" + item + "</input></li>";
}

我需要在项目旁边有一个复选框，以删除项目。

PHP脚本：

<?php 
       define('DB_SERVER', 'localhost');
       define('DB_USERNAME', 'root');
       define('DB_PASSWORD', '');
       define('DB_DATABASE', 'list');
       $conn = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);

    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }

    $itemIn = $_POST['itemIn'];

    $sql = "INSERT INTO item (name) VALUES ('$itemIn')";                        
?>

所有这些都在一页中，如果有人知道如何将它们放入单独的文件中，将不胜感激

谢谢

Answer 1

通过在帖子中分离这些内容，您几乎已经完成了所有必要的工作。

分离文件：

只需将它们保存在单独的文件中，如下所示：

• 包含html的“ form.php”。 别忘了在必要的标签周围放置（例如标题，正文等）。

• 包含您的js代码的“ form.js”

• “ formaction.php”用于表单处理和bdd逻辑。

将您的表单操作更改为指向“ formaction.php”：

<form id="inputItem" method="post" action="formaction.php" >

在您的html中包含form.js，并在html的头部添加一个script标签：

<script src='form.js'></script>

编辑：正如评论者所说，您的代码容易受到sql注入的攻击，您应该在插入表单之前清除表单发布中的值。

消毒输入：

这样做有两种可能性：

• 使用转义函数将您插入的每个值括在引号中，转义特殊字符等。您可以使用mysqli_escape_string函数： http ://php.net/manual/fr/mysqli.real-escape-string.php

• 使用准备好的语句（最佳选择） ： http : //php.net/manual/en/mysqli.quickstart.prepared-statements.php

提交表单而无需重新加载：

至于防止页面重新加载，正如其他人所说，您可以：

• 添加一个提交按钮以允许提交表单。 然后，您必须捕获表单提交事件并通过ajax发送表单。 这些帖子提供了有关如何执行此操作的漂亮示例：

  • jQuery AJAX提交表单

  • jQuery ajax表单提交

• 在addList函数的末尾触发ajax调用（如果您希望自动提交表单），该调用会将数据发布到formaction.php。 您可以查看提供示例的@ umair-khan答案。

插入表单数据的php文件还应该将一些数据发送回html页面，以指示操作成功或失败和/或验证后希望显示的任何值。

Answer 2

$.ajax({
  method: "POST",
  url: "some.php",
  data: { name: "John", location: "Boston" }
})
  .done(function( msg ) {
    alert( "Data Saved: " + msg );
  });

Answer 3

HTML表单应包含一个“提交”按钮以提交表单。 在结束表格之前，请添加一个提交按钮。

Answer 4

您必须使用ajax。 如果您不想/可以使用外部文件，则可以用ajax调用“操作”属性形式的url，但是您不能通过php打印确认信息，因为数据响应是所有网页。 分割文件更好，因为您可以在查询后打印反馈并检查是否一切正常，然后使innetHtml或对该错误发出警报。