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

你几乎已经通过在帖子中分离这些来完成所有必要的工作。

分隔文件：

只需将它们保存在这样的分隔文件中：

＆＃34; form.php的＆＃34;包含html。别忘了把必要的标签放在身边（如标题，身体等......）
＆＃34; form.js＆＃34;包含你的js代码
＆＃34; formaction.php＆＃34;用于表格处理和bdd逻辑。

将表单操作更改为指向＆＃34; formaction.php＆＃34; ：

<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发送表单。这些帖子有很好的例子说明如何做到这一点：
- jQuery AJAX submit form
- jquery ajax form submit
在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表单应包含＆＃34;提交＆＃34;按钮提交表单。在结束表格之前请添加提交按钮。

Answer 4

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

使用ajax和jquery

4 个答案: