小贝子编程

未捕获的引用错误:在HTMLButtonElement.onclick中未定义ajaxPost



在运行ajax方法时，我在控制台中收到了这个错误

这是我的ajax类

$(document).ready(
function() {

$("#dndform").submit(function(event) 
{

event.preventDefault();
ajaxPost();
});

function ajaxPost() {
var x = document.getElementById("monumber").value;
console.log("url:" + "http://localhost:8080/dnd?monumber=" + x);

$.ajax({
type: "POST",
url: "http://localhost:8080/dnd?monumber=" + x,
success: function(result) {
if (result.status == "success") {
$("#postResultDiv")
.html(
"<p style='background-color:#7FA7B0; color:white; padding:20px 20px 20px 20px'>"
+ "Post Successfully! <br>"
+ "---> Congrats !!"
+ result.object.name
+ "</p>");
} else {
$("#postResultDiv").html(
"<strong>Error</strong>");
}
console.log(result);
},
error: function(e) {
alert("Error!")
console.log("ERROR: ", e);

}
});
}
});

这是我的视图类

<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous">
<link rel="stylesheet" th:href="@{/css/style.css}" />
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="/js/dnd.js"></script>
</head>
<body>
<div class="col-sm-3">
<img src="/image/logo.jpg" style="width: 150px; height: 150px;">
</div>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
</a> <a class="navbar-brand" href="#">Robi</a>

<button class="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto text-uppercase">
<li class="nav-item"><a th:href="@{/home}"
class="nav-link active" aria-current="page" href="#">Home</a></li>
<li class="nav-item dropdown"><a
class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
role="button" data-bs-toggle="dropdown" aria-expanded="false">
Charging </a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Calling Details</a></li>
<li><a class="dropdown-item" href="#">Charging Details</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" th:href="@{/freeminutes}">Free
Minutes</a></li>
</ul></li>
<li class="nav-item"><a th:href="@{/userdetails}"
class="nav-link" href="#">User Detail</a></li>

<li class="nav-item"><a th:href="@{/sms}" class="nav-link"
href="#">SMS Send</a></li>
<li class="nav-item"><a class="nav-link" th:href="@{/dnd}"
href="#">DND</a></li>
<li class="nav-item"><a th:href="@{/blockunblock}"
class="nav-link" href="#">Block/Unblock</a></li>
<li class="nav-item"><a th:href="@{/activate}"
class="nav-link" href="#">Activate</a></li>
<li class="nav-item"><a th:href="@{/deactivate}"
class="nav-link" href="#">Deactivate</a></li>
<li class="nav-item dropdown"><a
class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
role="button" data-bs-toggle="dropdown" aria-expanded="false">
MIS </a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Date Wise</a></li>
<li><a class="dropdown-item" href="#">Monthly</a></li>
<li><hr class="dropdown-divider"></li>
</ul></li>
<li class="nav-item"><a th:href="@{/logout}" class="nav-link"
href="#">Logout</a></li>
</ul>
</div>
</div>
</nav>
<form id="dndform" action="" th:action="@{/dnd}" method="get">
<!-- number -->
<div class="mb-3">
<label for="number_field" class="form-label"> Enter ANI </label> <input
name="monumber" type="tel" class="form-control" id="monumber"
aria-describedby="emailHelp" placeholder="Enter Here" />
</div>
<div class="col-sm-7" style="margin: 20px 0px 20px 0px">
<button type="button" onclick="ajaxPost()" class="btn btn-primary">Check</button>
<div id="getResultDiv" style="padding: 20px 10px 20px 50px">
<ul class="list-group">
</ul>
</div>
</div>
</form>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"></script>
<script th:src="@{/js/script.js}"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
-->
</body>
</html>

我对ajax很熟悉，我还在学习，但当我点击保存按钮时，我得到了这个错误我认为我的ajax很好，但为什么我会出现这个错误。

未捕获引用错误：未定义ajaxPost在HTMLButtonElement.onclick(dnd:107(

您正在执行按钮单击，它没有提交表单

在表单提交上，按钮类型必须为submit

$( document ).ready(function() {
function ajaxPostRequest() {
var x = document.getElementById("monumber").value;
console.log("url:" + "http://localhost:8080/dnd?monumber=" + x);
$.ajax({
type: "POST",
url: "http://localhost:8080/dnd?monumber=" + x,
success: function(result) {
if (result.status == "success") {
$("#postResultDiv")
.html(
"<p style='background-color:#7FA7B0; color:white; padding:20px 20px 20px 20px'>"
+ "Post Successfully! <br>"
+ "---> Congrats !!"
+ result.object.name
+ "</p>");
} else {
$("#postResultDiv").html(
"<strong>Error</strong>");
}
console.log(result);
},
error: function(e) {
alert("Error!")
console.log("ERROR: ", e);
}
});
}
$("#dndform").submit(function(event){
event.preventDefault();
ajaxPostRequest();
});


});
<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous">
<link rel="stylesheet" th:href="@{/css/style.css}" />
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="/js/dnd.js"></script>
</head>
<body>
<div class="col-sm-3">
<img src="/image/logo.jpg" style="width: 150px; height: 150px;">
</div>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
</a> <a class="navbar-brand" href="#">Robi</a>

<button class="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto text-uppercase">
<li class="nav-item"><a th:href="@{/home}"
class="nav-link active" aria-current="page" href="#">Home</a></li>
<li class="nav-item dropdown"><a
class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
role="button" data-bs-toggle="dropdown" aria-expanded="false">
Charging </a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Calling Details</a></li>
<li><a class="dropdown-item" href="#">Charging Details</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" th:href="@{/freeminutes}">Free
Minutes</a></li>
</ul></li>
<li class="nav-item"><a th:href="@{/userdetails}"
class="nav-link" href="#">User Detail</a></li>

<li class="nav-item"><a th:href="@{/sms}" class="nav-link"
href="#">SMS Send</a></li>
<li class="nav-item"><a class="nav-link" th:href="@{/dnd}"
href="#">DND</a></li>
<li class="nav-item"><a th:href="@{/blockunblock}"
class="nav-link" href="#">Block/Unblock</a></li>
<li class="nav-item"><a th:href="@{/activate}"
class="nav-link" href="#">Activate</a></li>
<li class="nav-item"><a th:href="@{/deactivate}"
class="nav-link" href="#">Deactivate</a></li>
<li class="nav-item dropdown"><a
class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
role="button" data-bs-toggle="dropdown" aria-expanded="false">
MIS </a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Date Wise</a></li>
<li><a class="dropdown-item" href="#">Monthly</a></li>
<li><hr class="dropdown-divider"></li>
</ul></li>
<li class="nav-item"><a th:href="@{/logout}" class="nav-link"
href="#">Logout</a></li>
</ul>
</div>
</div>
</nav>
<form id="dndform" action="" th:action="@{/dnd}" method="get">
<!-- number -->
<div class="mb-3">
<label for="number_field" class="form-label"> Enter ANI </label> <input
name="monumber" type="tel" class="form-control" id="monumber"
aria-describedby="emailHelp" placeholder="Enter Here" />
</div>
<div class="col-sm-7" style="margin: 20px 0px 20px 0px">
<button type="submit"  class="btn btn-primary">Check</button>
<div id="getResultDiv" style="padding: 20px 10px 20px 50px">
<ul class="list-group">
</ul>
</div>
</div>
</form>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"></script>
<script th:src="@{/js/script.js}"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
-->
</body>
</html>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium