jquery ajax post在调用时停止答案

【问题标题】：jquery ajax post stops when calledjquery ajax post在调用时停止
【发布时间】：2018-10-02 08:53:26
【问题描述】：

我是 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>

【问题讨论】：

未捕获的 ReferenceError: post_ 未在 HTMLInputElement.onclick (newjsp.jsp:50) 中定义。这是我收到的错误消息Rory。

标签： jquery ajax jsp

【解决方案1】：

<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 文件并离线使用它会起作用吗？
当然可以。在classpath中添加jquery文件
非常感谢您对 Sumesh 的帮助。我在sql查询中犯了一些错误。 Json 错误弹出消息帮我解决了。

【解决方案2】：

以正确的顺序加载js，

您需要先加载 Jquery 库，然后再加载其他内容因为其他库或js代码只有在加载jquery时才能工作，

<script src="Scripts/JQuery/3.2.1/jquery.min.js"></script> 
<script src="BSTemplate/4.1.3/js/bootstrap.min.js"></script>

PS：首先你应该经常检查你收到的错误信息

【讨论】：

我按照你说的做了，但是我在 console.log() 中收到了这个错误消息。未捕获的 ReferenceError: post_ 未在 HTMLInputElement.onclick (newjsp.jsp:50) 中定义。
把你的js代码移到底部，我会更喜欢一个更好的名字，因为你说你是新人所以我建议你正确命名，