jQuery-ajax不成功

Question

I am quite new to to ajax, just learning it, and made a simple page on localhost to test gets and posts from/to json file in the same folder.

While GET is working smoothly, I cannot figure out, why post doesn't happen if I click the button I assigned this function to. Pls take a look into my code and help.

element = $("#mylist");
var item2 = $("#mytable");

$.ajax({
  type: "GET",
  url: "data.json",
  success: function(response) {
    $.each(response, function(i, item) {
      element.append("<li>" + item.fname + " " + item.lname + "</li>");
      item2.append("<tr><td>" + item.lname + "</td>" + "<td>" + item.fname + "</td></tr>");
    });
  },
  error: function() {
    alert("error");
  }
});

$("#additem").on('click', function() {
  var $fname = $("#fname");
  var $lname = $("#lname");
  var $city = $("#city");
  var order = {
    fname: $fname.val(),
    lname: $lname.val(),
    city: $city.val()
  };
  console.log(order);

  $.ajax({
    type: "POST",
    url: "data.json",
    data: order,
    succes: function() {
      console.log("succes");
    },
    error: function() {
      console.log("no success");
    }
  });
});

JSFiddle

Answer 1

The problem is you are trying to post to a .json file, like Patrick Evans says in the comments. You need to do the post to a script, in PHP you could do something like this:

$order = $_POST['order'];
// Do something with order...
echo $order; // or echo success message

Of course for this to work you will need PHP to be running on your server (localhost).