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

将按钮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 2

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

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

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

Answer 3

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

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

这将防止页面重新加载。

Axaj呼叫而没有退出页面？

3 个答案: