Jquery 在不重新编辑页面的情况下调用Axaj？

我有一张表格

id=“form”action=“register.jsp”method=“post”。

这个表单有一些输入字段

<button id="submit" class="k-button">Submit</button>

Register.jsp

<%
String user = request.getParameter("username");
session.putValue("userName",user);
String pwd = request.getParameter("password");
String fname = request.getParameter("firstname");
String lname = request.getParameter("lastname");
String email = request.getParameter("email");
String dob = request.getParameter("datepicker");

Class.forName("com.mysql.jdbc.Driver");

Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/user_info3","root","root");

Statement st = con.createStatement();
ResultSet rs;

int i=st.executeUpdate("INSERT INTO `new table`(user,pwd,fname,lname,email,dob) VALUE ('"+user+"','"+pwd+"','"+fname+"','"+lname+"','"+email+"','"+dob+"')");
 %>

 Registration is Successfull. Welcome <%=user %>,
 Your Password is : <%=pwd %>, 
 FirstName : <%=fname %>, 
 LastName : <%=lname %>, 
 Email : <%=email %>, 
 and Date Of Birth is :  <%=dob %>,

注册成功。欢迎
您的密码是：，
名字：，
姓氏：，
电邮：，
出生日期为：，

---

我的问题是，我想在同一页面上显示用户输入数据的时间，而不需要重新编辑。但是，在用户单击提交按钮后，上面的代码重定向到register.jsp。

尝试添加e.preventDefault（），它将解决您的问题。如下所示的方法

$（“#表单”）.submit（函数（e）{
e、 预防默认值（）；
}

将按钮

类型
添加到
按钮
并执行
ajax
，这将阻止页面重新加载。同时更改此行
$（“#表单”）.submit（function（）{/code>到
$（“#submit”）。on（'click'，function（）{
这样，当您将按钮类型更改为
button

因此，HTML更改：

<button type="button" id="submit" class="k-button">Submit</button>

默认情况下，如果未指定
按钮
元素的
类型
，则该元素属于
类型
提交
。您可能只需要像这样更新HTML

提交

这将防止页面重新加载。
只需不使用
表单
或使用
事件。preventDefault（）
提交事件。我尝试了这个，但它也没有将数据保存到MySQL。它没有提供成功的连接。错误。@Mayurkandalkar我怀疑这与您显示的.jsp文件有关。您的问题是如何在不刷新页面的情况下提交数据服务器端。这与您的问题无关ds，就好像你有一个坏的连接字符串或其他一些与数据库相关的问题。如果问题仍然存在，请用你的数据库问题发表新的帖子。非常感谢你。但是我在问题中发布的上述代码对数据库工作得很好。更改后，它会运行错误函数，即连接不成功。
<button type="button" id="submit" class="k-button">Submit</button>

$(function() {
        //Add on click event to the submit button instead of posting the form
        //You could safely remove the form element from the DOM altogether
        $("#submit").on('click', function() {
            var userName = $("#username").val();
            var passWord = $("#password").val();
            var firstName = $("#firstname").val();
            var lastName = $("#lastName").val();
            var email = $("#email").val();
            var dob = $("#datepicker").val();

            //var vars = "Username="+userName+"Password="+passWord+"Firstname="+firstName+"Lastname="+las tName+"Email="+email+"Date="+dob;

            var vars = {userName, passWord, firstName, lastName, email, dob};

        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "register.jsp",   // your api or url for fetching data
            data: vars,   // your data coming from front end in json
            dataType: "json",
            success: function (data) {
                $("#output1").html(data);
            },
            error: function (result) {
                $("#output1").html("Not a successful connection!"); 
            }
        });
      });
    });