不要在使用 ajax 和 jquery 提交表单后重新加载页面 - Don't reload page after form submission using ajax and jquery

项目：购物清单目的：将项目添加到无序列表中。用户在表单中添加项目，表单不应重新加载，并且网页将添加的项目无缝地显示在列表中。添加的项目应该传递到 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')";                        
?>

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

谢谢

通过在帖子中将它们分开，您几乎已经完成了所有必要的工作。

分离文件：

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

包含 HTML 的"form.php"。不要忘记放置必要的标签（如标题、正文等）
包含您的JS代码的"form.js"
"formaction.php"用于表单处理和BDD逻辑。

将表单操作

更改为指向"表单操作.php"：

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

在 html 中包含 form.js，并在 html 的头部包含一个脚本标签：

<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 发送表单。这些帖子有关于如何做到这一点的很好的例子：
- j查询 AJAX 提交表单
- jquery ajax 表单提交
在 addList 函数结束时触发 ajax 调用（如果您希望自动提交表单），该调用将数据发布到 formaction.php。您可以查看@umair汗答案，其中提供了一个例子。

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

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

HTML表单应包含一个"提交"按钮来提交表单。在结束表单之前，请添加一个提交按钮。

你必须

使用ajax。如果你不想/不能使用外部文件，你可以用ajax调用"action"attr形式的url，但你不能通过php打印确认，因为数据响应都是网页。拆分文件更好，因为您可以在查询后打印反馈并检查是否一切正常，然后制作 innetHtml 或对错误发出警报。