javascript - 无法通过 JQuery/AJAX 将 POST 数据发送到 JSON 文件，为什么？

Question

我正在通过 YouTube 上的这段视频学习处理 JQuery/Ajax，click here ..

我在从 order.json 文件接收数据时没有任何问题，但当我尝试POST 数据时。我总是收到错误。

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

项目文件夹截图:

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>

JQuery/Ajax 代码:

$(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');
      }
    });
  });

});

JSON:order.json

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

Answer 1

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

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

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

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

看看这个..

api/process.php

if (isset($_POST['params'])) {
  $params = $_POST['params'];

  $oldData = file_get_contents('orders.json');
  $tmp = json_decode($oldData);
  array_push($tmp, $params);
  $newData = json_encode($tmp);

  if (is_writable('orders.json')) {
    file_put_contents('orders.json', $newData);
    echo $newData;
  } else {
    echo "file is not writable, check permissions";
  }
}

index.html

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

js/main.js

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

api/orders.json

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

注意:在这里，我不会将新订单的 id 写入 json 文件。

希望这段代码适合您。 :) :)