使用JS在MySQL数据库中插入数据

Inserting data in MySQL database using JS

本文关键字：插入 数据 数据库 MySQL JS 使用      更新时间：2023-09-26

我有这个基本的HTML页面，有一个表格上传数据到MySQL数据库。

还有一个JavaScript将数据传递给process.php文件。在这个文件中，我有一个INSERT查询。我使用这个脚本是因为我不想在提交时重新加载页面。

现在我有两个问题:

1)当我发送数据到MySQL表(点击提交按钮)，第一次1数据= 1记录插入，这是正确的。如果我在输入表单字段中插入一个新数据，则1条数据= 2条记录相等。第三次，3条记录，以此类推…

但是如果我用print_r($_POST)打印POST传递的内容，我总是有一个数据数组( [comune] => foo )。

我也尝试使用unset()，但没有成功。

2)当我第一次点击提交按钮时，没有任何动作，我必须点击两次。

这是带有JS脚本的HTML页面: 
<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
      <meta charset="utf-8" />
      <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
      <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
      <script type="text/javascript">
        $(document).ready(function(){
          $(".formValidation").validate({
            debug: false,
            rules: {
              name: "required",
              email: {
                required: true,
                email: true
              }
            },
            messages: {
              name: "Please let us know who you are.",
              email: "A valid email will help us get in touch with you.",
            },
            submitHandler: function(form) {
              // do other stuff for a valid form
              $('.formValidation').on('submit', function () {
                $.post('process.php', $(this).serialize(), function(data){
                  $('#results').html(data);
                });
              })
            }
        });
      }); 
    </script>
 </head>
 <body>
    <div class="row">
      <div class="col-xs-12">
        <form id="myform2" class="formValidation" name="myform2" action="" method="post"></form>
        <div class="col-xs-12 col-sm-4">
          <div class="widget-box">
            <div class="widget-body">
              <div class="widget-main">
                <div>
                  <label for="form-field-select-1">form</label>
                </div>
                <hr>
                <div class="widget-body">
                  <div class="widget-main">
                    <div>
                      <input type="text" name="comune" id="comune" value="" placeholder="Add something" form="myform2">
                      <input type="submit" name="submit" value="Submit" class="btn btn-sm btn-success" form="myform2">
                      <p id="result"></p>
                      <div id="results"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- /.col -->
    </div>
    <!-- /.row -->
  </body>
</html>

和process.php 

foreach( $_POST as $key => $value ) {
  $sql = "INSERT INTO tbl_".$key."(nome_".$key.") VALUES ('$value')";
  $result = dbQuery($sql);
  unset($key);
  unset($value);
}

提交处理程序太多。

只需在插件的submitHandler回调选项中执行ajax即可。

内部它已经在做on('submit')所以你第一次点击它…为ajax编写的处理程序已创建，但尚未发送

下一次它将实际发送表单两次并添加另一个提交处理程序。第三次点击将发送3次，并添加另一个提交处理程序，等等

submitHandler: function(form) { // fires only when valid                      
     $.post('process.php', $(form).serialize(), function(data) {
        $('#results').html(data);
     });
}

您的提交处理程序正在一个接一个地堆叠。而且每次对PHP文件的请求都会增加，导致在数据库中插入不止一次。

使用

submitHandler: function (form) {
                        $.post('process.php', $(this).serialize(), function (data) {
                            $('#results').html(data);
                        });
                        return false;
                }

希望能有所帮助

相关文章：