Question

我使用xampp-control来模拟本地服务器。我有一个html文件，我尝试使用ajax将一些数据发布到json文件中。我可以从json获取数据，但是当我试图发布时没有工作。

这是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>

这是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>');
      })
    }
  });
});

包含JSON数据（http://localhost/angel/Jquery_advanced/ajax/family.json）的文件如下所示：

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

警报显示undefined undefined已添加

Answer 1

我相信这是因为...... POST数据未定义。这两个实际上都没有获得任何数据：

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

.val()中没有任何内容。

您的两个输入没有值，因此没有发布任何内容。你得到的是向div添加内容，看起来你可能想要将内容实际添加到输入值？

Answer 2

在您首选的Inspect Element中打开Firebug或F12（快捷browser => Network => check ajax response）等调试工具，

如果响应为null或状态代码为204，则表示没有从服务器返回数据，因此响应数据对象将是未定义的。

另一种方式，

$.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
  }
})

注意：如果您直接请求json文件，那么您对json文件的post请求背后的想法是错误的。为此，您需要使用服务器端语言，如Java，PHP等。

ajax发布数据未定义

2 个答案: