CODEWITHSUNDEEP
javascriptjqueryajaxjson
angel
angel

Reputation: 171

ajax post data undefined

I'm using xampp-control to emulate a local server. I have a html file and i'm trying with ajax to post some data into a json file. I can get the data from the json, but when I'm trying to post doesn't work.

here is the html

<!doctype html>
<html class="no-js" lang="">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="js/main.js"></script>
    </head>

    <body>
        <h1> Family Perez</h1>
        <form>
            <label>Name</label><input type="input" id="name" name="name"></input>
            <label>Last Name</label><input type="input" id="lastName" name="lastName"></input>
            <input type="submit" id="submitBtn" value="Add family Member" name="submit"></input>

        </form>

        <div></div>
    </body>
</html>

and here is the js

$(function(){

  $('#submitBtn').click(function(e){
    e.preventDefault();
    var firtsName = $('#name').val();
    var lastName = $('#lastName').val();

    $.ajax({
      type: 'post',
      url:'http://localhost/angel/Jquery_advanced/ajax/family.json',
      dataType: 'json',
      async: false,
      data: {name: firtsName, last: lastName},
      success: function(newMember){
          alert(newMember.name + ' ' + newMember.last + ' ' + 'has benn added');
      }
    })

  });

  $.ajax({
    type: 'GET',
    dataType: 'json',
    url: 'http://localhost/angel/Jquery_advanced/ajax/family.json',
    success: function(data) {
      $.each(data, function(i, member){
        $('div').append('<p>'+ member.name + ' ' + member.last +'</p>');
      })
    }
  });
});

the file containing JSON data (http://localhost/angel/Jquery_advanced/ajax/family.json) looks like:

[{"name":"Juliseth","last":"Hernandez"},{"name":"Angel","last":"Perez"}]

The alert show undefined undefined has been added

Upvotes: 2

Views: 10680

Answers (2)

Darshan Patel
Darshan Patel

Reputation: 2899

Open debugging tool like Inspect Element or Firebug (Shortcut F12) in your preferred browser => Network => check ajax response,

If response is null or status code is 204 that means no data returned from the server, so that response data object would be undefined.

Another way, 

$.ajax({
  type: 'post',
  url:'http://localhost/angel/Jquery_advanced/ajax/family.json',
  dataType: 'json',
  async: false,
  data: {name: firtsName, last: lastName},
  success: function(newMember){
      alert("Response data : "+newMember);//check your response here
      alert(newMember.name + ' ' + newMember.last + ' ' + 'has benn added');
     //If newMember is array then your have to access it via index as Anik Islam Abhi suggested
  }
})

Note : If you are directly requesting on json file then your idea behind post request to json file is wrong. For that you need to use server side language like Java, PHP, etc.

Upvotes: 1

ComputerLocus
ComputerLocus

Reputation: 3618

I believe that is because well... the POST data is undefined. Both of these are not actually getting any data:

var firtsName = $('#name').val();
var lastName = $('#lastName').val();

There is nothing in the .val()'s.

Your two input's have no values, and therefore nothing is being posted. Your get is adding content to the div, and it looks like you may be wanting to actually add the content to the inputs values?

Upvotes: 0

Related Questions