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

【问题标题】：Don't reload page after form submission using ajax and jquery使用 ajax 和 jquery 提交表单后不要重新加载页面
【发布时间】：2016-03-17 13:30:59
【问题描述】：

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

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

谢谢

【问题讨论】：

您需要在 javascript 中捕获表单提交事件，取消它以便页面不会重新加载，并从该提交处理程序向您的 php 脚本发出 ajax 请求。
你在用jquery吗？该 SQL 当前未执行，一旦执行，您将对 SQL 注入开放。您应该使用参数化查询。

标签： javascript php jquery mysql ajax

【解决方案1】：

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

分离文件：

只需像这样将它们保存在单独的文件中：

“form.php”包含 html。不要忘记放置必要的标签（如标题、正文等）
“form.js”包含你的 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 submit form
- jquery ajax form submit
在 addList 函数结束时触发 ajax 调用（如果您希望自动提交表单），它将数据发布到 formaction.php。您可以查看提供示例的@umair-khan 答案。

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

【讨论】：

将代码拆分到不同的文件很好，但它并不能解决 OP 的问题。
你说得对，我认为我的回答只解决了问题的最后一部分：“所有这些都在一页中，如果有人知道如何将它们放入单独的文件中非常感谢”
1/ 如何防止sql注入？ 2/ 我不希望页面在表单提交后重新加载
我更新了我的答案以考虑您的意见，谢谢！
处理 SQL 注入的最佳方法是准备好的语句，虽然转义就足够了，但通常最好只使用准备好的语句;-)

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：

拥有提交按钮并不能解决我的问题......我需要在页面上无缝显示用户输入到列表中的值（在这种情况下：项目名称）跨度>
不，AJAX 不需要提交按钮，这是 OP 想要的。甚至不需要表单。

【解决方案4】：

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

【讨论】：