使用 JavaScript 将数据插入数据库时在控制台中创建错误“超出最大调用堆栈大小”
我进行了很多搜索以修复我最近几天遇到的 JavaScript 错误。我在StackOverFlow上看到很多问题得到了解答，但不幸的是，没有人与我的错误相符。
我想要的是使用JavaScript和PHP将简单记录发送到数据库。
但我在Console中收到“ 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");
}
}
});
})
});
沧海一幻觉2回答
-
慕沐林林
您可以在您的按钮上使用submit功能form而不是在按钮click上使用功能type="submit"。此外，您在发送 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> -
烙印99
考虑这段代码：<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 处理不当，这意味着它会导致无限递归。
随时随地看视频慕课网APP
相关分类
JavaScript