正在为 jsp jquery ajax 更新数据库

Question

我想创建一个简单的脚本来动态存储信息，而无需刷新或重定向到另一个页面。在来这里之前，我已经找到了高低的答案，并且我关注了 this。

但是，我仍然无法让它存储数据，因为我不知道我哪里出错了。另外想问下success: function(msg)

的目的

非常感谢！

更新 1：在遵循 Anoop 的解决方案后让它工作。但是提交数据的时候出现了这样一个popup

StaffReg.jsp

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Staff Registration</title>
</head>
<body>
<%-- HTTP header --%>
<%response.addHeader("Cache-Control","no-cache");
   response.addHeader("Pragma","no-cache");
    response.addHeader("Expires","0");  
 %>
<%-- Javascript --%> 
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
     $('#Register').click(function(e) {
     e.preventDefault();
     $.ajax({
     url: "StaffRegAuth.jsp",
     type: "post",
     data: {
   username: $('#username').val(),
   password: $('#password').val(),
   userGroup: $('#userGroup').val()
  },
     success: function(msg) {
  alert(msg);
     }
     });
});
});
</script>

<%-- Main body --%>
<h1 align="center"> Account Registration: </h1>
  <div align="center">
    <table style="width = 30%" >
      <tr>
        <td> User Name: </td>
        <td><input type="text" id="username"></td>
      </tr>
      <tr>
        <td> Password: </td>
        <td><input type="password" id="password"></td>
      </tr>
      <tr>
      <tr>
        <td> User Group: </td>
        <td><select name = "userGroup" id="userGroup">
            <option value="1">Administrator
            </optin>
            <option value="2">Clerk
            </optin>
            <option value="3">Operations
            </optin>
            <option value="4">Sales
            </optin>
          </select></td>
      </tr>
      <tr>
    </table>
    <input type="submit" value="Register" id="Register">
  </div>
</body>
</html>

StaffRegAuth.jsp

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title></title>
</head>
<body>
<%-- Imports --%>
<%@ page import="java.sql.*"%>
<%@ page import="java.util.*"%>
<%@page import="javax.servlet.*" %>
<%@page import="javax.servlet.http.*" %>
<%-- HTTP header --%>
<%response.addHeader("Cache-Control","no-cache");
   response.addHeader("Pragma","no-cache");
    response.addHeader("Expires","0");  
    
 %>
<%-- Variables that will be written --%>
<% String sUsername = request.getParameter("username");
 String sPassword = request.getParameter("password");
 int sUserGroup = Integer.parseInt(request.getParameter("userGroup"));
 %>
<%-- Creating new staff account - writing --%>
<%
 try{
   Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
   String conURL= "jdbc:odbc:HOD_DATA";
   Connection con = DriverManager.getConnection(conURL);
   Statement st = con.createStatement();
   int status = st.executeUpdate("insert into Staff(username, password, user_group) values('"+sUsername+"','"+sPassword+"',"+sUserGroup+")");
   
   if(status>0){
    //out.println("Update sucessful");
   }
   else{
    //out.println("Update unsuccessful");
   }
   
   st.close();
   con.close();
   }
   
   catch(Exception e){
   out.println(e);
   }
   
  %>
</body>
</html>

Answer 1

删除提交按钮并使用普通的 html 按钮，并将 Id 作为 Register。
修改您的 html 输入类型并将 name 属性替换为 id 属性。例如：使用 id="username" 而不是 name="username"

调试中：使用 firebug 检查传递给服务器的值。确保提交正确的 ajax 请求。

希望对您有所帮助。

正在为 jsp jquery ajax 更新数据库

Updating database with jquery ajax for jsp

javascript

java

ajax

jquery

jsp

更新 1：在遵循 Anoop 的解决方案后让它工作。但是提交数据的时候出现了这样一个popup

StaffReg.jsp

StaffRegAuth.jsp