POSTデータをJSON配列にjquery ajaxで挿入しますか？

Question

私は自分のajaxでどこが間違っているのか知っていません。私はインターネットから学びますが、私はまだPOSTデータを傾けません。 私の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'); 
       } 
      }); 

     }); 

Answer 2

使用.serialize()それは、配列のセットにフォーム内の全てのデータ入力要素を収集しますが、あなたがする必要がいけません1で定義します

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