Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

POST to rest api using Jquery

Tags:

rest

jquery

I'm writing a function to post data from a form to a rest api. This is what I have but it's not working and I cant figure out why.

<script>
    console.log(document);
    var form = document.getElementById("myform");

    form.onsubmit = function (e) {
      // stop the regular form submission
      e.preventDefault();

      // collect the form data while iterating over the inputs
      var data = {};
      for (var i = 0, ii = form.length; i < ii; ++i) {
        var input = form[i];
        if (input.name) {
          data[input.name] = input.value;
        }
      }

    function addData(){
     $.ajax({
             type: "POST",
             url: "http://example.com",
             data: JSON.stringify(data),
             contentType: "application/json; charset=utf-8",
             crossDomain: true,
             dataType: "json",
             success: function (data, status, jqXHR) {

                 alert(success);
             },

             error: function (jqXHR, status) {
                 // error handler
                 console.log(jqXHR);
                 alert('fail' + status.code);
             }
          });
    }
</script>

Can anyone point me in the right direction?

like image 251
bookthief Avatar asked Nov 22 '13 11:11

bookthief


People also ask

What is jQuery how do you call REST services using jQuery?

Create a jQuery Controller This controller module is represented as a simple JavaScript function. It uses jQuery's $. ajax() method to consume the REST service at http://rest-service.guides.spring.io/greeting. If successful, it will assign the JSON received to data , effectively making it a Greeting model object.

How do I send a post request in ajax?

Send Http POST request using ajax()In the options parameter, we have specified a type option as a POST, so ajax() method will send http POST request. Also, we have specified data option as a JSON object containing data which will be submitted to the server.

What is jQuery post?

jQuery post() Method post() method loads data from the server using a HTTP POST request.


2 Answers

calllike below

addData(data);

function addData(data){// pass your data in method
     $.ajax({
             type: "POST",
             url: "http://example.com",
             data: JSON.stringify(data),// now data come in this function
             contentType: "application/json; charset=utf-8",
             crossDomain: true,
             dataType: "json",
             success: function (data, status, jqXHR) {

                 alert("success");// write success in " "
             },

             error: function (jqXHR, status) {
                 // error handler
                 console.log(jqXHR);
                 alert('fail' + status.code);
             }
          });
    }
like image 168
Rituraj ratan Avatar answered Sep 28 '22 00:09

Rituraj ratan


You are not calling addData() in form.onsubmit event.

form.onsubmit = function (e) {
  // stop the regular form submission
  e.preventDefault();

  // collect the form data while iterating over the inputs
  var data = {};
  for (var i = 0, ii = form.length; i < ii; ++i) {
    var input = form[i];
    if (input.name) {
      data[input.name] = input.value;
    }
  }
  addData();
}
like image 36
Murali Murugesan Avatar answered Sep 27 '22 23:09

Murali Murugesan