javascript - How to make an AJAX call with jQuery?

Question

I'm dealing with the project where I need to collect data from user and display on the same page. I've successfully completed the Ajax call using JavaScript, but now I want using Jquery.

This is my JavaScript Code:

var output1 = document.getElementById("output1");

function saveUserInfo() {
  var userName = document.getElementById('username').value;
  var password = document.getElementById('password').value;
  var firstName = document.getElementById('firstname').value;
  var lastName = document.getElementById('lastname').value;
  var email = document.getElementById('email').value;
  var dob = document.getElementById('datepicker').value;
  var vars = "username=" + userName + "&password=" + password + "&firstname=" + firstName + "&lastname=" + lastName + "&email=" + email + "&datepicker=" + dob;

  var ajax = new XMLHttpRequest();
  var url = 'register.jsp';
  ajax.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      output1.innerHTML = (ajax.responseText);
    }
  }
  ajax.open("POST", url, true);
  ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  ajax.send(vars);
}

This is my register.jsp :

<%@ page import ="java.sql.*" %>
<%@ page import ="javax.sql.*" %>


<%
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("dob");

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

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

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

//int i=st.executeUpdate("insert into user_info value('"+user+"','"+pwd+"','"+fname+"','"+lname+"','"+email+"')");

int i=st.executeUpdate("INSERT INTO `users`(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 %>,

Answer 1

This is a generalized view of a jQuery ajax request.

$.ajax({
    url: 'register.jsp',
    type: 'POST',
    data : {userName : userName,password: password,....},
    contentType: 'yourConentType', // ConentType that your are sending. No contentType needed if you just posting as query string parameters.
    success: function(response){
        // do whatever you want with response
     },
    error: function(error){
      console.log(error)
    }
});

If you want to pass your values as object then as follows:

var formData = {userName : userName, password: password,...};
$.ajax({
    url: 'register.jsp',
    type: 'POST',
    data : JSON.stringify(formData),
    contentType: 'application/json',
    success: function(response){
        // do whatever you want with response
     },
    error: function(error){
      console.log(error)
    }
});

For more details: jQuery.ajax()