使用 JavaScript 将数据插入数据库时，控制台中创建错误“超出最大调用堆栈大小”答案

【问题标题】：When inserting data to database using JavaScript Error creates in console 'Maximum call stack size exceeded'使用 JavaScript 将数据插入数据库时，控制台中创建错误“超出最大调用堆栈大小”
【发布时间】：2020-09-19 11:07:05
【问题描述】：

我搜索了很多内容来修复我在过去几天遇到的 JavaScript 错误。我在 StackOverFlow 上看到了很多问题的答案，但不幸的是，没有人与我的错误相符。

我想要的是使用 JavaScript 和 PHP 将简单记录发送到 数据库。

但我在控制台中收到“jquery.js:8638 Uncaught RangeError: Maximum call stack size exceeded”错误。
感谢您的回复。

我的简单HTML代码

        
<form autocomplete="off">
    <div class="form-group col-sm">
        <label for="fname">First Name</label>
        <input type="text" name="fname" id="fname" class="form-control">
    </div>
    <div class="form-group col-sm">
        <label for="lname">Last Name</label>
        <input type="text" name="lname" id="lname" class="form-control">
    </div>
    <div class="form-group col-sm">
        <button class="btn btn-primary" type="submit" id="submitBtn">Submit</button>
    </div>
</form>

还有javaScript代码

$(document).ready(function(){
$("#submitBtn").on("click",function(e){
e.preventDefault();
var fname = $("#fname").val();
var lanme = $("#lname").val();

$.ajax({
    url : "insertData.php",
    type : "POST",
    data : {fname:fname, lname:lname},
    success : function(data){
        if(data == 1){
            tableData();
        }else{
         alert("Can't save record");   
        }

    }
});
})
});

【问题讨论】：

标签： javascript html jquery

【解决方案1】：

您可以在form 上使用submit 函数，而不是在type="submit" 按钮上使用click 函数。

另外，您在发送 ajax 请求时输入了错误的变量lname，但您将其设置为lanme

现场演示：（代码经过测试且有效）

$(document).ready(function() {
  $("#myForm").on("submit", function(e) {
    e.preventDefault();

    //Values
    var fname = $("#fname").val();
    var lname = $("#lname").val();

    //Ajax
    $.ajax({
      url: "insertData.php",
      type: "POST",
      data: {
        fname: fname,
        lname: lname
      },
      success: function(data) {
        if (data == 1) {
          //tableData();
        } else {
          //alert("Can't save record");   
        }
      }
    });
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<form id="myForm" autocomplete="off">
  <div class="form-group col-sm">
    <label for="fname">First Name</label>
    <input type="text" name="fname" id="fname" class="form-control">
  </div>
  <div class="form-group col-sm">
    <label for="lname">Last Name</label>
    <input type="text" name="lname" id="lname" class="form-control">
  </div>
  <div class="form-group col-sm">
    <button class="btn btn-primary" type="submit" id="submitBtn">Submit</button>
  </div>
</form>

【讨论】：

【解决方案2】：

从这个帖子创建了一个问题：Why the form field ids are populated as JavaScript variables on submit button click?

这个问题还有一点——为什么 jquery 的堆栈溢出异常而不是一些拼写错误的变量的指示。

考虑这段代码：

<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
$(document).ready(function()
{
    $("#submitBtn").on("click", function(e)
    {
        console.log(911, a);
        e.preventDefault();
    })
});
</script>
</head>
<body>
<form>
    <input type="text" id="a" />
    <button type="submit" id="submitBtn">Submit</button>
</form>
</body>
</html>

如您所见，变量a 已定义并引用ID 为“a”的HTML 元素。谁能解释一下为什么？

这就是原始代码中发生的情况——数据 JSON 中的 lname 字段被设置为 HTML 元素的引用，jquery 处理不当，这意味着它会导致无限递归。

【讨论】：