Question

因此，我编写了这段代码，该代码接受用户输入到表单中的内容，并在单击提交时更新SQL数据库（无需刷新页面）。 问题在于它不是将值更新/发送到sql表。

我尝试遵循在几个站点上找到的示例和教程，但是我无法使用其中的任何一个。

我具有用于数据库连接和更新的form（index.html）和php文件（upd.php）。它的代码如下。

我正在尝试将这些值保存到数据库中名为messages的表：-

timestamp（tstamp）：是一个动态值，它是在浏览器中播放的视频文件的时间戳（例如1.935771），
消息（任何评论）
复选框值

index.html

<body>
  <h1>VIDO LABELLING TOOL</h1>

  <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268"
  data-setup='{ "playbackRates": [0.5, 1, 1.5, 2, 4] }'>
    <source src="project.m4v" type='video/mp4'>
    <track src='br.srt' kind="subtitles" srclang="en" label="English" default>
  </video>



<script>
// Get the audio element with id="my_video_1"
var aud = document.getElementById("my_video_1");

// Assign an ontimeupdate event to the audio element, and execute a function if the current playback position has changed
aud.ontimeupdate = function() {myFunction()};


</script> 


<div class="container" style="max-width:800px;margin:0 auto;margin-top:50px;">
    <form name="contact-form" action="" method="post" id="contact-form">
        <label for="email">Comments about the frame</label>
        <textarea name="message" class="form-control" id="message"></textarea>

        <div class="error" id="error_message"></div>

        <label>Vehicle Type:</label>
        <input name="veh_type_1"  id="veh_type_1" type="checkbox" value="lmv">lmv
        <input  name="veh_type_2" id="veh_type_2" type="checkbox" value="2w">2w
        <p>TimeStamp: <span id="tstamp"></span></p>
  </div>
  <p class="submit">
    <button type="submit" class="btn btn-primary" name="submit" value="Submit" id="submit_form">Submit</button>
  </p>

   <div class="display-content">
    <div class="message-wrap dn">  </div>
   </div>
   </form>
</div>


<script>
    function myFunction() {
        document.getElementById("tstamp").innerHTML = aud.currentTime;
    }
</script>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
        $("#contact-form").on("submit",function(e) {
            e.preventDefault();
            $.ajax({
                type: 'post',
                url: "insert.php",
                data: $( this ).serialize(),
                success: function() {
                    alert("form was submitted");
                }
            });
            return false;
        });
    });
</script>
</body>

php文件如下：-

<?php
$servername = "localhost";
$database = "test";
$username = "root";
$password = "";

// Create connection

$conn = mysqli_connect($servername, $username, $password, $database);

// Check connection

if (!$conn) {
      die("Connection failed: " . mysqli_connect_error());
}

echo "Connected successfully";


if(isset($_POST['Submit'])) {
    $tstamp=addslashes($_POST['tstamp']);
    $message=addslashes($_POST['message']);
    $veh_type_1=addslashes($_POST['veh_type_1']);
    $veh_type_2=addslashes($_POST['veh_type_2']);


    mysqli_query($conn, "insert into messages(message,tstamp,veh_type_1, veh_type_2) values ('$message','$tstamp','$veh_type_1', '$veh_type_2')");
    $sql = mysqli_query($conn, "SELECT message,tstamp,veh_type_1,veh_type_2  id FROM messages order by id desc");

    $result = mysqli_fetch_array($sql);
    echo '<div class="message-wrap">' . $result['message'] . '</div>';
}
?>

表结构如下：-

 #database=test, table_name=messages
1   idPrimary   int(11)             No  None        AUTO_INCREMENT      
2   message     text        latin1_swedish_ci       Yes     NULL                
3   tstamp      float           No  None            
4   veh_type_1  varchar(5)  latin1_swedish_ci       No  None            
5   veh_type_2  varchar(5)  latin1_swedish_ci       No  None

编辑：将ajax代码添加到index.html，当我单击“提交”时，仍然显示已提交，但表中没有更新

Answer 1

您的代码存在多个问题。查看有关php表单处理的基础知识。

https://www.w3schools.com/php/php_forms.asp

为您的输入添加一个表单标签
为输入提供名称属性
将类型属性（提交）添加到保存按钮

<form action="[path_to_your.php]" method="post">
  <input type="[input type]" name="[name to submit]" >
  ...
  <input type="submit">
</form>

致谢

Answer 2

您的所有输入字段都必须具有名称，以便$("form").serialize()获得其值。所以

<input id="veh_type_1" type="checkbox" value="lmv">lmv
<input id="veh_type_2" type="checkbox" value="2w">2w

应该是

<input name="veh_type_1" type="checkbox" value="lmv">lmv
<input name="veh_type_2" type="checkbox" value="2w">2w

.serialize()也不会发布<span>的内容，您应该为此添加一个隐藏的输入。

<input name="tstamp" id="hidden-tstamp" type="hidden">

并将您的功能更改为：

function myFunction() {
    $("#tstamp").text(aud.currentTime);
    $("#hidden-tstamp").val(aud.currentTime);
}

无法将数据从表单发送到SQL数据库

3 个答案: