ajax发布数据未定义答案

【问题标题】：ajax post data undefinedajax发布数据未定义
【发布时间】：2020-07-06 17:04:20
【问题描述】：

我正在使用 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"}]

增加了提示显示未定义未定义

【问题讨论】：

什么不起作用？控制台有错误吗？
你的json返回一个数组，试试：alert(newMember[0].name + ' ' + newMember[0].last + ' ' + 'has benn added');
或者像第二次通话那样用 $.each 包围

标签： javascript jquery ajax json

【解决方案1】：

在您喜欢的browser => Network => check ajax response 中打开调试工具，如Inspect Element 或Firebug（快捷方式F12），

如果响应为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 文件的发布请求背后的想法是错误的。为此，您需要使用 Java、PHP 等服务器端语言。

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：