Axaj Call 无需重新加载页面？

Question

我有一个表格

id="form" action="register.jsp" method="post".

并且该表单有一些输入字段。

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

以下 ajax 代码成功将数据发送到服务器 register.jsp。

$(function() {
        $("#form").submit(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!"); 
            }
        });
      });
    }); 

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。

Answer 1

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

 $("#form").submit(function(e) {
 e.preventDefault();
 }

或者添加按钮类型并调用你的 ajax post 方法

Answer 2

将按钮type 添加到button 并执行您的ajax，这将防止页面重新加载。还要将此行 $("#form").submit(function() { 更改为 $("#submit").on('click', function() { 以便在单击按钮时触发 ajax，并且不会提交表单，因为您将按钮类型更改为 button

所以 HTML 改变了：

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

Javascript 更改：

$(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!"); 
            }
        });
      });
    }); 

Answer 3

默认情况下，如果您不指定button 元素的type，则它是type submit。您可能只需要像这样更新您的 HTML

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

这将阻止页面重新加载。