How To Make An Ajax Call With Jquery?

April 21, 2024 Post a Comment

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 J

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

Solution 2:

functionsaveUserInfo() {
    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;
    });
}

Solution 3:

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

}).fail(function(){

})

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

Solution 4:

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");

functionsaveUserInfo() {
  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.

Solution 5:

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

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

For JS:

functionsaveUserInfo() {
     $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "...",   // your api or url for fetching datadata: "..",   // your data coming from front end in jsondataType: "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.

JavaScript Guy