我搜索了很多来修复我在过去几天遇到的JavaScript错误。我在StackOverFlow上看到了很多问题的答案，但不幸的是，没有人能与我的错误相匹配。
我想要的是使用JavaScript和PHP将一个简单的记录发送到数据库。
但我得到了">jquery.js:8638 Uncaught RangeError：超过了最大调用堆栈大小">控制台中的错误
感谢您的回复。
我的简单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");
}
}
});
})
});您可以在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>从这篇文章中创建了一个问题：为什么表单字段id在点击提交按钮时被填充为JavaScript变量
问题还有一点——为什么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为"的HTML元素；a"；。有人能解释为什么吗？
这就是原始代码中发生的情况——数据JSON中的lname字段被设置为HTML元素的引用，jquery处理得很糟糕，这意味着它会导致无限递归。