我有两个ajax jquery函数来添加，显示和删除表中的数据表，删除工作正常，添加数据时保存但只在我刷新时显示，我该如何修复？
<script type="text/javascript">
$(document).ready(function() {
(function ($) {z
$.fn.serializeFormJSON = function () {
var o = {};
var a = this.serializeArray();
$.each(a, function () {
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
})(jQuery);
$('form').submit(function (e) {
e.preventDefault();
var data = $(this).serializeFormJSON();
console.log(data);
console.log(JSON.stringify(data));
$.ajax({
type: "POST",
contentType: "application/json",
url: "createajaxuser",
data:JSON.stringify(data),
dataType: "json",
success: function(result) {
a
}
});
});
$.ajax({
url: 'listusersjson',
type: 'GET',
success: function(response) {
var trHTML = '';
var count =0;
$.each(response, function(i, item) {
console.debug("i is"+i);
var success="success";
var danger="danger";
var info="info";
var color ;
if(count==0)
{
color =success;
count++;
}else if(count==1){
color =danger;
count++;
}else{
color =info;
count=0;
}
trHTML += '<tr class="'+color+'" ><td>' + item.name + '</td><td>' + item.id + '</td><td>' + item.password + '</td><td>' + item.email+
'</td><td>' + '<button type="button" class="btn btn-danger" id="' + item.id + '" >Delete</button>'
'</td></tr>';
});
$('#delTable').append(trHTML);
$('button').click(function() {
var val = $(this).attr("id");
console.debug("saurabh userid", val);
var rowElement = $(this).parent().parent();
$.ajax({
type: "DELETE",
url: "ajaxuserr/"+val,
success: function(result) {
rowElement.find('td').fadeOut('3000',
function() {
rowElement.remove();
}
);
}
});
});
}
});
});
</script>
</head>
<body>
<form action="#" method="post">
<div>
<label for="name">Name</label> <input type="text" name="name"
id="name" />
</div>
<div>
<label for="email">Email</label> <input type="text" name="email"
id="email" />
</div>
<div>
<label for="password">Password</label> <input type="password"
name="password" id="password" />
</div>
<p>
<input type="submit" value="Send" />
</p>
</form>
<div class="container">
<table class="table table-bordered table-hover" id="delTable">
<thead>
<tr>
<th width="100">Name</th>
<th width="100">ID</th>
<th width="100">Password</th>
<th width="100">Email</th>
<th width="100">Delete</th>
</tr>
</thead>
</tbody>
</table>
</div>
答案 0 :(得分：0)
我发布这个答案是因为当我在评论中解释时你会感到困惑，
因此，最初将构建表tbody的ajax调用放入一个新的函数中，如下所示。
T然后你可以在表单提交ajax调用的成功方法中调用这个方法。如下所示
function GetListOfUsers(){
$.ajax({
url: 'listusersjson',
type: 'GET',
success: function(response) {
var trHTML = '';
var count =0;
$.each(response, function(i, item) {
console.debug("i is"+i);
var success="success";
var danger="danger";
var info="info";
var color ;
if(count==0)
{
color =success;
count++;
}else if(count==1){
color =danger;
count++;
}else{
color =info;
count=0;
}
trHTML += '<tr class="'+color+'" ><td>' + item.name + '</td><td>' + item.id + '</td><td>' + item.password + '</td><td>' + item.email+
'</td><td>' + '<button type="button" class="btn btn-danger" id="' + item.id + '" >Delete</button>'
'</td></tr>';
});
$('#delTable tbody').append(trHTML); //Note I am trying to append into tbody you were directly appending to table without tbody
$('button').click(function() {
var val = $(this).attr("id");
console.debug("saurabh userid", val);
var rowElement = $(this).parent().parent();
$.ajax({
type: "DELETE",
url: "ajaxuserr/"+val,
success: function(result) {
rowElement.find('td').fadeOut('3000',
function() {
rowElement.remove();
}
);
}
});
});
}
});
});
}
此外，由于现在我们将构建tbody的ajax调用移动到一个新函数中，您必须在初始脚本加载中调用一次。所以它建立了tbody。因此，您可以在表单提交事件处理程序之后放置此行代码
$('form').submit(function (e) {
e.preventDefault();
var data = $(this).serializeFormJSON();
console.log(data);
console.log(JSON.stringify(data));
$.ajax({
type: "POST",
contentType: "application/json",
url: "createajaxuser",
data:JSON.stringify(data),
dataType: "json",
success: function(result) {
$('#delTable tbody').html(''); //empty the tbody
GetListOfUsers(); // call this function so that it rebuilds the tbody
}
});
});