Javascript 为什么不能通过JQuery/AJAX将POST数据发送到JSON文件？

我正在学习从YouTube上的这个视频处理JQuery/Ajax

我从order.json文件接收数据时没有任何问题，但是当我试图发布数据时。我总是出错

下面是带有屏幕截图和代码的代码结构，请帮助我

项目文件夹屏幕截图：

<div class="wrapper">
<h1>Jquery  Ajax Tutorial</h1>

<h3>Coffie Orders</h3>

<ul id="orders"></ul>

<h4>Add a Coffie Order</h4>
<p>  Name: <input type="text" id="name"> </p>
<p>  Drink: &nbsp;<input type="text" id="drink"> </p>
<button id="add-order">Add!</button>

$(document).ready(function () {

  var $orders = $('#orders');

  var $name = $('#name');
  var $drink = $('#drink');

  function addOrder(order){
    $orders.append('<li>Name: '+ order.name +', Drink: '+ order.drink +'</li>');
  }

  $.ajax({
    type: 'GET',
    url: '/api/orders.json',
    success: function (orders) {
      $.each(orders, function(i, orders) {
        addOrder(orders);
      });
    },
    error: function(){
      alert('Error Loading Page');
    }
  });

  $('#add-order').click(function(){
    var order = {
      name: $name.val(),
      drink: $drink.val(),
    }

    $.ajax({
      type: 'POST',
      url: '/api/orders.json',
      data: order,
      success: function(newOrder) {
        addOrder(newOrder);
      },
      error: function(){
        alert('Error Adding Orders');
      }
    });
  });

});

HTML代码：

<div class="wrapper">
<h1>Jquery  Ajax Tutorial</h1>

<h3>Coffie Orders</h3>

<ul id="orders"></ul>

<h4>Add a Coffie Order</h4>
<p>  Name: <input type="text" id="name"> </p>
<p>  Drink: &nbsp;<input type="text" id="drink"> </p>
<button id="add-order">Add!</button>

$(document).ready(function () {

  var $orders = $('#orders');

  var $name = $('#name');
  var $drink = $('#drink');

  function addOrder(order){
    $orders.append('<li>Name: '+ order.name +', Drink: '+ order.drink +'</li>');
  }

  $.ajax({
    type: 'GET',
    url: '/api/orders.json',
    success: function (orders) {
      $.each(orders, function(i, orders) {
        addOrder(orders);
      });
    },
    error: function(){
      alert('Error Loading Page');
    }
  });

  $('#add-order').click(function(){
    var order = {
      name: $name.val(),
      drink: $drink.val(),
    }

    $.ajax({
      type: 'POST',
      url: '/api/orders.json',
      data: order,
      success: function(newOrder) {
        addOrder(newOrder);
      },
      error: function(){
        alert('Error Adding Orders');
      }
    });
  });

});

---

客户端脚本语言用于发送和检索驻留在服务器端的数据。我们无法使用它们在服务器端写入/编辑数据

为此，我们必须使用服务器端脚本语言，如PHP或ASP或您喜欢的任何其他语言

您提到的视频是用核心PHP编写的API，用于从驻留在服务器上的json文件检索/写入数据

在下面的代码中，我使用PHP通过jQuery/AJAX将提交的数据写入json文件

看看这个

api/process.php

index.html

注意：在这里，我没有为新订单将

id

写入json文件

---

希望，这段代码对您很有用。：）

客户端脚本语言用于发送和检索驻留在服务器端的数据。我们无法使用它们在服务器端写入/编辑数据

为此，我们必须使用服务器端脚本语言，如PHP或ASP或您喜欢的任何其他语言

您提到的视频是用核心PHP编写的API，用于从驻留在服务器上的json文件检索/写入数据

在下面的代码中，我使用PHP通过jQuery/AJAX将提交的数据写入json文件

看看这个

api/process.php

index.html

注意：在这里，我没有为新订单将

id

写入json文件

---

---

希望，这段代码对您很有用。：）

为什么会有不同的url？当您将数据发布到

/api/orders

时，此url是否存在或是输入错误？您在控制台中遇到了什么错误？我收到了“添加订单时出错”@PeterDarmis我已经编辑了我的url，但仍然不起作用。@RahulKashyap您如何处理orders.json中的发布请求？您的ajax请求可以工作，但您得到的响应是500，因为您可能没有在orders.json中正确处理它。为什么会有不同的url？当您将数据发布到

/api/orders

时，此url是否存在或是输入错误？您在控制台中遇到了什么错误？我收到了“添加订单时出错”@PeterDarmis我已经编辑了我的url，但仍然不起作用。@RahulKashyap您如何处理orders.json中的发布请求？您的ajax请求有效，但您得到的响应是500，因为您可能没有在orders.json中正确处理它。@ChiatanyaGhule他在我指的视频中没有使用PHP。我的问题是，当他的代码有效时，为什么我的代码无效。他没有使用PHP.in，我的帖子我已经用粗体字写了关于客户端脚本语言的文章。你可以澄清你的疑问点击这里好的，我明白了，但是他的代码是如何工作的。我看不出他在使用任何php文件。我也不确定视频中的URL顺序，所以他使用的是json文件还是没有扩展名的顺序文件。我所知道的是他使用了json。@ChiatanyaGhule他在我所指的视频中没有使用PHP。我的问题是，当他的代码工作时，为什么我的代码不工作。他没有使用PHP.in，我的帖子我已经用粗体字写了关于客户端脚本语言的文章。你可以澄清你的疑问点击这里好的，我明白了，但是他的代码是如何工作的。我看不出他在使用任何php文件。我也不确定视频中的URL顺序，所以他使用的是json文件还是没有扩展名的顺序文件。我只知道他使用了json。

<h1>Jquery  Ajax Tutorial</h1>

<h3>Coffie Orders</h3>

<ul id="orders"></ul>

<h4>Add a Coffie Order</h4>
<p>  Name: <input type="text" id="name"> </p>
<p>  Drink: &nbsp;<input type="text" id="drink"> </p>
<button id="add-order">Add!</button>
<script src='js/jquery.min.js'></script>
<script src='js/main.js'></script>

let $orders = $('#orders');
let $name = $('#name');
let $drink = $('#drink');

function addOrder(order) {
  $orders.append('<li>Name: '+ order.name +', Drink: '+ order.drink +'</li>');
}

$('#add-order').click(function(){
  let order = {
    name: $name.val(),
    drink: $drink.val()
  };

  $.ajax({
    type: 'POST',
    url: '/api/process.php',
    data: { params: order },
    success: function(resp) {
      addOrder(resp);
    },
    error: function(){
      alert('Error Adding Orders');
    }
  });
});

$.ajax({
  type: 'GET',
  url: '/api/orders.json',
  success: function (orders) {
    $.each(orders, function(i, orders) {
      addOrder(orders);
    });
  },
  error: function(){
    alert('Error Loading Page');
  }
});

[
  {
    "id": 1,
    "name": "James",
    "drink": "Coffiee"
  },
  {
    "id": 2,
    "name": "John",
    "drink": "Latte"
  }
]