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

我甚至不知道我的ajax中的错误代码在哪里，我从互联网上学习，但仍然无法发布POST数据。我的html代码：用jquery ajax将数据发布到JSON数组中？

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

来源

2017-08-29 indodev28

页面重新加载是因为表单提交？ – guradio

使用newContent代替newData！成功后 –

页面重新加载，数据无法输入，我看着控制台不显示任何东西.. @guradio – indodev28

默认情况下，提交表单刷新页面。 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'); 
       } 
      }); 

     });

来源

2017-08-29 04:09:07

我试过你的建议昂然后页面不重新加载，但是当输入数据，我看看控制台显示“无法加载资源：服务器响应状态405（方法不允许）” – indodev28

您正在使用哪种浏览器？ –

谷歌铬为浏览器 – indodev28

使用.serialize()它会收集表格中的所有数据输入单元为一组排列的，你不需要由一个定义

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

来源

2017-08-29 04:19:48

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

回答

相关问题