Question

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

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

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

项目文件夹截图：

HTML code：

<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文件以获取新订单。

希望，这段代码适合你。 :)：）

是否可以通过JQuery / AJAX将POST数据发送到JSON文件，为什么？

1 个答案: