ajax jqueryを使用してテーブルのデータを保存するには

Question

テーブルに複数の行を追加しています。すべての行は、jqueryでajax呼び出しを使用してデータベースに保存されます。

HTML：

<table id="example" class="display" width="100%" cellspacing="0"> 
<thead> 
    <tr> 
     <th>Name</th> 
     <th>Email</th> 
     <th>Message</th> 
    </tr> 
</thead> 
<tbody> 
</tbody> 
</table> 
<form id="localStorageTest" method="post" action=""> 
<label>Name:</label> 
<input type="text" name="name" id="name" class="stored" value="" /> 

<label>Email:</label> 
<input type="email" name="email" id="email" class="stored" value="" /> 

<label>Message:</label> 
<textarea name="message" id="message" class="stored"></textarea> 

<button type="button" class="btn btn-success savebtn" style="padding: 6px 12px;" id="savebutton"><i class="icon-check-sign" aria-hidden="false"></i> Save </button> 
</form> 

のjQueryコード：すべての行を保存する方法

$("button#savebutton").click(function(){ 
          var name=$("#name").val(); 
          var email=$("#email").val(); 
          var message=$("#message").val();  
         var new_row = "<tr><td>" + name + "</td><td>" + email + "</td><td>" + message + "</td></tr>"; 
           $("table tbody").append(new_row); 
           return false; 
           $.ajax({ 
           type : 'POST', 
           data : formData, 
           cache : false, 
           processData : false, 
           contentType : false, 
           beforeSend: beforeSendHandler, 
           url : url, 
            success:function(result)          
            if (result.success==true) { 
             $('.alert-success').show(); 
             $('.alert-danger').hide(); 
             $("#successmsg").html(result.msg); 
             setTimeout(function() { 
              $(".alert-success").alert('close'); 
             }, 10000);           


            } else{ 
             $('.alert-danger').show(); 
             $('.alert-success').hide(); 
             $("#error").html(result.msg);           
             setTimeout(function() { 
              $(".alert-danger").alert('close'); 
             }, 10000); 

            } 
           }         
          }); 
    }); 

。私はAJAX呼び出しを試みているが、私はURLにデータを渡すことは知らない。

正しい方法ですか？

Answer 1

私はテーブルからのデータを、それぞれtrをループするオブジェクトの配列として保存しています。

<table id="example" class="display" width="100%" cellspacing="0"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Email</th> 
      <th>Message</th> 
     </tr> 
    </thead> 
    <tbody> 
    </tbody> 
</table> 
<form id="localStorageTest" method="post" action=""> 
    <label>Name:</label> 
    <input type="text" name="name" id="name" class="stored" value="" /> 

    <label>Email:</label> 
    <input type="email" name="email" id="email" class="stored" value="" /> 

    <label>Message:</label> 
    <textarea name="message" id="message" class="stored"></textarea> 

    <button type="button" class="btn btn-success savebtn" id="savebutton">Save</button> 
    <button type="button" class="btn btn-success savebtn" id="submitbutton">Submit</button> 
</form> 

そして、分割後の変更したスクリプトは、あなたがそれを保存しているどのような形式で

$("button#savebutton").click(function() { 
    var name = $("#name").val(); 
    var email = $("#email").val(); 
    var message = $("#message").val(); 
    //---->Form validation goes here 
    var new_row = '<tr><td class="name">' + name + '</td><td class="email">' + email + '</td><td class="message">' + message + '</td></tr>'; 
    $("table tbody").append(new_row); 
}); 


$("button#submitbutton").click(function() { 
    var data = []; 
    var name, email, message; 
    $("table tbody tr").each(function(index) { 
    name = $(this).find('.name').text(); 
    email = $(this).find('.email').text(); 
    message = $(this).find('.message').text(); 
    //---->Form validation goes here 
    data.push({ 
     name: name, 
     email: email, 
     message: message 
    }); 
    }); 
    submitFormData(data); 
}); 


function submitFormData(formData) { 

    $.ajax({ 
    type: 'POST', 
    data: formData, 
    cache: false, 
    processData: false, 
    contentType: false, 
    beforeSend: beforeSendHandler, 
    url: url, 
    success: function(result) 
    if (result.success == true) { 
     $('.alert-success').show(); 
     $('.alert-danger').hide(); 
     $("#successmsg").html(result.msg); 
     setTimeout(function() { 
     $(".alert-success").alert('close'); 
     }, 10000); 


    } else { 
     $('.alert-danger').show(); 
     $('.alert-success').hide(); 
     $("#error").html(result.msg); 
     setTimeout(function() { 
     $(".alert-danger").alert('close'); 
     }, 10000); 

    } 
    }); 
}