javascript - 使用 jquery ajax 将数据 POST 到 JSON 数组中？

Question

我什至不知道我的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');
        }
    });
});

Answer 1

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

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

        });