Question

我正在尝试每隔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数据库IF中，只有当我手动按下/点击提交表单但是当我使用上面的自动提交代码时，什么都没有插入数据库！

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

提前致谢。

编辑：

这会将数据插入到数据库中，但它会执行一次然后停止...以下代码也不会阻止表单操作并在新窗口中打开表单的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);
}

Answer 1

只需更改

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

通过

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

如果您要提交的表单的ID存在，它会更好用;）

Answer 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);
});

Answer 3

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

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的新手，我想知道是否可以创建自动提交表单并将字段插入数据库。

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

3 个答案: