Question

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

Answer 1

以正确的顺序加载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：首先，您应该始终检查收到的错误消息

Answer 2

<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发布停止时被调用

2 个答案: