我是 Web 开发新手，正在为我的大学开发一个 jsp Web 应用程序。我想使用ajax在表中进行插入、更新和删除操作。但是当执行到ajax脚本时，执行就卡住并且没有显示结果。下面是我的代码:
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="org.h2.tools.Server"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@page import="org.h2.Driver"%>
<link href="BSTemplate/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<link href="Styles/login.css" rel="stylesheet">
<script src="BSTemplate/4.1.3/js/bootstrap.min.js"></script>
<script src="Scripts/JQuery/3.2.1/jquery.min.js"></script>
<script>
function post_(){
$.post("newjsp.ajax.jsp",
{
username: document.getElementById("username").value,
password: document.getElementById("password").value
},
function(data,status){
if(data.trim() ==="success")
window.location="Home.jsp";
else
alert("Data: " + data.trim() + "\nStatus: " + status);
});
}
</script>
<body>
<div id="login">
<div class="container">
<div id="login-row" class="row justify-content-center align-items-center">
<center><img src="Img/Image1.png" alt="Image Cannot Be Displayed"/></center>
<div id="login-column" class="col-md-6">
<div id="login-box" class="col-md-12">
<div id="login-form" class="form">
<h3 class="text-center text-info">Member Login</h3>
<div class="form-group">
<label for="username" class="text-info">Username:</label><br>
<input type="text" name="username" id="username" placeholder="User Name" tabindex="1" class="form-control" required="true" autofocus>
</div>
<div class="form-group">
<label for="password" class="text-info">Password:</label><br>
<input type="password" placeholder="Password" required="true" name="password" id="password" tabindex="2" class="form-control">
</div>
<div class="form-group">
<input type="submit" name="submit" onclick="post_()" tabindex="3" class="btn btn-info btn-md" style="width:100px" value="Login">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
最佳答案
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<link href="BSTemplate/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<link href="Styles/login.css" rel="stylesheet">
<script src="BSTemplate/4.1.3/js/bootstrap.min.js"></script>
<script src="Scripts/JQuery/3.2.1/jquery.min.js"></script>
<script>
function post_(){
$.post("newjsp.ajax.jsp",
{
username: document.getElementById("username").value,
password: document.getElementById("password").value
},
function(data,status){
alert(status);
if(data.trim() ==="success")
window.location="Home.jsp";
else
alert("Data: " + data.trim() + "\nStatus: " + status);
}).fail(function(msg) {
alert( "error"+JSON.stringify(msg) );
});
}
</script>
<body>
<div id="login">
<div class="container">
<div id="login-row" class="row justify-content-center align-items-center">
<center><img src="Img/Image1.png" alt="Image Cannot Be Displayed"/></center>
<div id="login-column" class="col-md-6">
<div id="login-box" class="col-md-12">
<div id="login-form" class="form">
<h3 class="text-center text-info">Member Login</h3>
<div class="form-group">
<label for="username" class="text-info">Username:</label><br>
<input type="text" name="username" id="username" placeholder="User Name" tabindex="1" class="form-control" required="true" autofocus>
</div>
<div class="form-group">
<label for="password" class="text-info">Password:</label><br>
<input type="password" placeholder="Password" required="true" name="password" id="password" tabindex="2" class="form-control">
</div>
<div class="form-group">
<input type="submit" name="submit" onclick="post_()" tabindex="3" class="btn btn-info btn-md" style="width:100px" value="Login">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>这有效。 请检查您的 jquery 库加载是否正确。
关于jquery ajax post 被调用时停止，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52605049/