[英]Ho to save table data using ajax jquery
我正在向表中添加多行。現在所有行將通過在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中傳遞數據。
這是正確的方法嗎?
我將表中的數據保存為循環每個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);
}
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.