Javascript 使用jquery ajax将数据发布到JSON数组中？

我甚至不知道在我的ajax中哪里有错误的代码，我从互联网上学习，但我仍然不能发布数据。 我的html代码：

<h3>Input new data</h3>
<form name="contact">
    <input type="text" placeholder="id berita" id="idberita" />
    <input type="text" placeholder="title berita" id="titleberita" />
    <input type="text" placeholder="content berita" id="contentberita" />
    <input id="create_at" type="datetime-local">
    <button type="submit" id="add-data">add</button>
</form>

输入新数据
添加

这是我的ajax代码：

$('#add-data').on('click', function() {
    var order = {
        id        : $idberita.val(),
        title     : $titleberita.val(),
        content   : $contentberita.val(),
        create_at : $create_at.val()
    };
    $.ajax({
        type   : 'POST',
        url    : 'json/student.json',
        data   : order,
        success: function(newContent) {
            $orders.append('<li>dataid: '+newData.id+', title:'+newData.title+', content:'+newData.content+', create_at: '+newData.create_at+'</li>');
        },
        error: function() {
            alert('error saving data');
        }
    });
});

$（'adddata'）。在（'click'，function（）上{
变量顺序={
id:$idberita.val（），
标题：$titleberita.val（），
content:$contentberita.val（），
create_at:$create_at.val（）
};
$.ajax({
键入：“POST”，
url:'json/student.json'，
数据：订单，
成功：函数（newContent）{
$orders.append（“
dataid:”+newData.id+”，title:“+newData.title+”，content:“+newData.content+”，create_at:“+newData.create_at+”
”）；
},
错误：函数（）{
警报（“保存数据时出错”）；
}
});
});

默认情况下，提交表单会刷新页面。Jquery始终作为事件处理程序的第一个参数传递，因此请使用它来防止这种行为：

       $('#add-data').on('click', function(event) {
             event.preventDefault();

              var order = {
                id: $('#idberita').val(),
                title: $('#titleberita').val(),
                content: $('#contentberita').val(),
                create_at: $('#create_at').val(),
            };


            $.ajax({
                type: 'POST',
                url: 'json/student.json',
                data: order,
                success: function(newContent) {     
                    $orders.append('<li>dataid: '+newContent.id+', title:'+newContent.title+', content:'+newData.content+', create_at: '+newData.create_at+'</li>');
                },
                error: function(){
                    alert('error saving data');
                }
            });

        });

$（'adddata'）。在（'click'，函数（事件）{
event.preventDefault（）；
变量顺序={
id:$（'#idberita'）.val（），
标题：$（'titleberita'）.val（），
内容：$（'#contentberita'）.val（），
create_at:$（'#create_at'）.val（），
};
$.ajax({
键入：“POST”，
url:'json/student.json'，
数据：订单，
成功：函数（newContent）{
$orders.append（'
dataid:'+newContent.id+'，title:'+newContent.title+'，content:'+newData.content+'，create_at:'+newData.create_at+'
'）；
},
错误：函数（）{
警报（“保存数据时出错”）；
}
});
});

使用

.serialize（）

它将表单中的所有数据输入元素收集到一组数组中，您不需要逐个定义

$.ajax({
  type: "POST",
  data: $("#formid").serialize(),
  url : "your/post/url",
  success: function(callback){
     // success handler
  },
  error: function(){
    // error handler
  }
})

---

由于表单提交，页面将重新加载？请使用新内容而不是新数据！成功后，页面重新加载，数据无法输入，我看了看控制台没有显示任何内容@Guradio您的错误是什么？因为页面已重新加载我尝试过您，然后页面未重新加载，但当输入数据时，我看到控制台显示“加载资源失败：服务器响应状态为405（不允许使用方法）”，您正在使用哪个浏览器？您可能还想添加

contentType:“应用程序/json；charset=utf-8”，数据类型：“json”，cache:false

您的ajax调用选项。我知道，我不能从本地json文件输入