每x秒自动提交表单而不刷新页面并将数据插入MYSQL？答案

【问题标题】：Auto submit form every x seconds without page refresh and insert data into MYSQL?每x秒自动提交表单而不刷新页面并将数据插入MYSQL？
【发布时间】：2015-02-12 16:11:11
【问题描述】：

我正在尝试每隔 x 秒自动提交一个表单，而不刷新页面并将数据插入到 MYSQL 数据库的输入中。

问题是如果我手动单击提交按钮，我可以使用提交按钮将表单的输入值插入数据库...但是如果我使用我的自动提交 JavaScript 代码，它不会将任何数据提交到数据库！

我正在使用此 AJAX 代码来防止表单刷新（工作正常并将数据插入 mysql 数据库而不刷新页面，如果我点击提交按钮）：

jQuery(document).ready(function() {

$(function(){
    $('#locForm').on('submit', function(e){
        // prevent native form submission here
        e.preventDefault();

        // now do whatever you want here
        $.ajax({
            type: $(this).attr('method'), // <-- get method of form
            url: $(this).attr('action'), // <-- get action of form
            data: $(this).serialize(), // <-- serialize all fields into a string that is ready to be posted to your PHP file
            beforeSend: function(){

            },
            success: function(data){
            }
        });
    });
});
});

这是我的 HTML 表单：

  <form id="locForm" name="locForm" target="_myFrame" action="location.php" method="post" >
  <input type="text" id="curLat" name="curLat"  value=""/>
  <input type="text" id="curLon" name="curLon"  value=""/>


  <input type="submit" value="submit" />
  </form>

这是每隔 X 秒自动提交表单的代码：

      window.onload = function() {

        var auto = setTimeout(function(){ autoRefresh(); }, 100);

        function submitform(){
          alert('test');
          document.forms["myForm"].submit();
        }

        function autoRefresh(){
           clearTimeout(auto);
           auto = setTimeout(function(){ submitform(); autoRefresh(); }, 10000);
        }

}

所以，基本上，在没有页面刷新的情况下，一切都可以正常工作，并且在没有页面刷新的情况下提交表单，并且如果我手动按下/单击提交表单，但是当我使用上面的自动提交代码时，数据被插入到 mysql 数据库中，没有任何东西被插入到数据库中！

有人可以就此提出建议吗？

提前致谢。

编辑：

这会将数据插入数据库，但它会执行一次然后停止...以下代码也不会阻止表单操作并在新窗口中打开表单的 action=""：

var auto = setTimeout(function(){ autoRefresh(); }, 100);

function submitform(e){
  alert('test');
  document.forms["locForm"].submit();

  e.preventDefault();
}

function autoRefresh(){
   clearTimeout(auto);
   auto = setTimeout(function(){ submitform(); autoRefresh(); }, 10000);
}

【问题讨论】：

使用setInterval 定期运行一些东西。
你为什么要这样做？您可以很容易地知道您的表单何时填写并在修改时发送您的 ajax 调用...
@Freez，我需要自动执行此操作并定期更新数据库，因为它是一个简单的网络地理定位应用程序！我不能要求用户一直点击提交按钮！
@user3806613 好的，但不是您的代码更改了表单中的值？
你指的是哪个代码？输入值是自动字段，它们正确且始终存在......所以表单的值没有任何问题！

标签： javascript php jquery mysql forms

【解决方案1】：

我使用此代码创建了一个示例。

html代码

<!DOCTYPE html>
<html>
<head>

<script>
$(function() {
function ajaxSubmit(form) {
    $.ajax({
        type: form.attr('method'), // <-- get method of form
        url: form.attr('action'), // <-- get action of form
        data: form.serialize(), // <-- serialize all fields into a string that is 
ready to be posted to your PHP file
        beforeSend: function(){

        },
        success: function(data){
        }
    });
}

$("#locForm").submit(function(e) {
    e.preventDefault();
    ajaxSubmit($(this));
});

setInterval(function() {
    ajaxSubmit($("#locForm"));
}, 10000);
});
</script>


<script>

  window.onload = function() {

var auto = setTimeout(function(){ autoRefresh(); }, 100);

function submitform(e){
alert('test');
document.forms["locForm"].submit();

e.preventDefault();
}

function autoRefresh(){
clearTimeout(auto);
auto = setTimeout(function(){ submitform(); autoRefresh(); }, 10000);
}

</script>

</head>

html代码

<body>

<form id="locForm" name="locForm" target="" action="testingadd.php" method="post" >


<input type="text"  name="curLat"  value="" required>
<input type="text" name="curLon"  value="" required>


<input name="submit" type="submit" value="submit" />
</form>

</body>
</html>

testingadd.php 表单

<?php

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "testing_db" ;
$conn = mysqli_connect($servername, $username, $password, $dbname);

if (isset($_POST['submit'])){

$curLat =$_POST['curLat'];
$curLon =$_POST['curLon'];

$query = mysqli_query($conn, "INSERT INTO testing_table (curLat, curLon ) 
values ('$curLat', '$curLon' )");

}

else{
echo" ";
}

mysqli_close($conn); 

?>

<html>
<link rel="icon" href="ghsfavicon.png" type="image/gif" sizes="16x16">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="ghsfavicon.png" type="image/gif" sizes="16x16">

</head>
<body>

<center><h1> Submited!</h1></center>

</body>
</html>

这是我需要做的正确设置吗？我是 javascript 和 ajax 的新手，我想知道这是否可以用于创建自动提交表单并将字段插入数据库。

【讨论】：

【解决方案2】：

将 AJAX 代码放在单独的函数中，并定期调用：

$(function() {
    function ajaxSubmit(form) {
        $.ajax({
            type: form.attr('method'), // <-- get method of form
            url: form.attr('action'), // <-- get action of form
            data: form.serialize(), // <-- serialize all fields into a string that is ready to be posted to your PHP file
            beforeSend: function(){

            },
            success: function(data){
            }
        });
    }

    $("#locForm").submit(function(e) {
        e.preventDefault();
        ajaxSubmit($(this));
    });

    setInterval(function() {
        ajaxSubmit($("#locForm"));
    }, 10000);
});

【讨论】：

由于某种原因，除非我单击提交按钮，否则它不会向数据库中插入任何内容！
@Barmar 您的ajaxSubmit 函数需要一个参数。 setInterval(ajaxSubmit, 10000); 会在没有参数的情况下调用它，即form 将是undefined。

【解决方案3】：

只是改变

document.forms["myForm"].submit();

通过

document.forms["locForm"].submit();

如果你要提交的表单的id存在会更好;)

【讨论】：

好地方，但这将执行表单操作并在新窗口中打开php页面！
即使你设置了preventDefault ?
是的，我使用了 e.preventDefault();并且仍然这样做！
@user3806613 试试@Freez 的建议，但是用$(function () { ... }) 替换你的window.onload = function() { ... }。
@0x2D9A3，我已经这样做了，数据被插入到数据库中，但它只插入一次。我会更新我的问题....