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()

Answer 2

function saveUserInfo() {
    var postData = {
        username: $('#userName').val(),
        password: $('#firstname').val(),
        firstName: $('#ss_unit').val(),
        lastName: $('#lastname').val(),
        email: $('#email').val(),
        dob: $('#datepicker').val()
    };

    $.post(url, postData).done(function(data) {
        output1.innerHTML = data;
    });
}

Answer 3

You can use jQuery's $.post method with .fail and .done . Then you can also use query's selectors to get the values from all your inputs.

Something like the following:

var output1 = $("#output1");

function saveUserInfo() {
  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 data = {userName, passWord, firstName, lastName, email, dob};

  var url = 'register.jsp';
  $.post(url, data)
    .done(function(msg) { /* yay it worked */ });
    .fail(function(xhr, status, err) {
      output1.text(err);
    });
}

I also noticed that you are getting many input fields in your code. If all these input fields are located in a form (for instance with the id of formId , you can use $('#formId').serialize() to create the vars string for you. You can read more about .serialize() here .

Answer 4

 $.ajax({ type: "POST", url: url, data: data, dataType: dataType }).done(function(){ }).fail(function(){ }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Answer 5

You can use ajax call of jquery by using following syntax. Add this on head section of your page for jquery reference.

     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

For JS:

     function saveUserInfo() {
     $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "...",   // your api or url for fetching data
                    data: "..",   // your data coming from front end in json
                    dataType: "json",
                    success: function (data) {
                        // your action need to perform
                    },
                    error: function (result) {
                       // handle error
                    }
                });
     }

However it is not recommended to make your connection or database related information provide on client side. For fetching data from backend it is recommended to make an API or web service for that.

You can use following links for references.

WebService: https://www.c-sharpcorner.com/UploadFile/00a8b7/web-service/

WebAPI: https://www.tutorialsteacher.com/webapi/create-web-api-project

Note: These both are for C# backend. Please mention your language name if anything else you are using.

Answer 6

It is the jQuery syntax of your code

  function saveUserInfo() {
      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':firstName ,'email':email ,'datepicker':dob }

      $.ajax(
      {
          url:'register.jsp',
          data:vars ,
          type:'POST'
          dataType : "json",
          contentType: "application/json; charset=utf-8",
          success:function(result)
          {
             code to use result here
          }
       });
    }