Axaj Позвонить, не переместив страницу?

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

По умолчанию, если вы не указываете type элемента button, он имеет значение type submit.Вам, вероятно, просто нужно обновить свой HTML следующим образом:

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

Это предотвратит перезагрузку страницы.

Answer 3

Попробуйте добавить e.preventDefault (), это решит вашу проблему.Как показано ниже, для вашего метода

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

или еще Добавьте тип кнопки и вызовите свой метод публикации ajax