Javascript 如何使用ajax jquery保存表数据

我正在向表中添加多行。现在，通过在jquery中使用ajax调用，所有行都将保存在数据库中

HTML:

名称
电子邮件
消息
姓名：
电邮：
信息：
拯救

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

                                    }
                                }                                   
                            });
  });

$（“按钮#保存按钮”）。单击（函数（）{
var name=$（“#name”）.val（）；
var email=$（“#email”）.val（）；
var message=$（“#message”）.val（）；
var new_row=“”+姓名+“”+电子邮件+“”+消息+“”；
$（“表体”）.append（新的行）；
返回false；
$.ajax({
键入：“POST”，
数据：formData，
cache:false，
processData:false，
contentType:false，
beforeSend:beforeSendHandler，
url:url，
成功：功能（结果）
if（result.success==true）{
$（'.alert success'）.show（）；
$（'.alert danger'）.hide（）；
$（“#successsg”）.html（result.msg）；
setTimeout（函数（）{
$（“.alert success”）.alert（'close'）；
}, 10000);                                          
}否则{
$（'.alert danger'）.show（）；
$（'.alert success'）.hide（）；
$（“#error”）.html（result.msg）；
setTimeout（函数（）{
$（“.alert danger”）.alert（'close'）；
}, 10000);
}
}                                   
});
});

如何保存所有行。我正在尝试ajax调用，但我不知道在url中传递数据

---

是否正确？

我正在将表中的数据保存为一个对象数组，每个对象循环

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

    }
  });
}

$（“按钮#保存按钮”）。单击（函数（）{
var name=$（“#name”）.val（）；
var email=$（“#email”）.val（）；
var message=$（“#message”）.val（）；
//---->表单验证在这里进行
var new_row=''+姓名+''+电子邮件+''+消息+''；
$（“表体”）.append（新的行）；
});
$（“按钮#提交按钮”）。单击（函数（）{
var数据=[]；
变量名称、电子邮件、消息；
$（“表tbody tr”）。每个（函数（索引）{
name=$（this.find（'.name'）.text（）；
email=$（this.find（'.email'）.text（）；
message=$（this.find（'.message'）.text（）；
//---->表单验证在这里进行
数据推送({
姓名:姓名,，
电邮:电邮,，
信息：信息
});
});
提交数据（数据）；
});
函数submitFormData（formData）{
$.ajax({
键入：“POST”，
数据：formData，
cache:false，
processData:false，
contentType:false，
beforeSend:beforeSendHandler，
url:url，
成功：功能（结果）
if（result.success==true）{
$（'.alert success'）.show（）；
$（'.alert danger'）.hide（）；
$（“#successsg”）.html（result.msg）；
setTimeout（函数（）{
$（“.alert success”）.alert（'close'）；
}, 10000);
}否则{
$（'.alert danger'）.show（）；
$（'.alert success'）.hide（）；
$（“#error”）.html（result.msg）；
setTimeout（函数（）{
$（“.alert danger”）.alert（'close'）；
}, 10000);
}
});
}

您要以什么格式保存？你能发布一个基本结构吗？@Dan Philip:请看我更新的问题。你在每一行调用AJAX。为什么不将其拆分，一个按钮将行添加到表中，另一个按钮最终将其作为一个完整的JSON对象提交。这将节省大量的网络开销。@Dan Philip:好的，谢谢。如何拆分请使用我的代码向我展示示例。你不必将每个对象发送到单独的URL，而是可以将整个对象发送到单个URL，并在服务器端对其进行解析。服务器端配置不值得花时间。我编辑了你的问题。但只有一个值传入url

$("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);

    }
  });
}