我有一个页面,可以在其中检索和显示每个客户端的详细信息
用户可以选择更新每个客户端的状态。
目前我使用ajax
来更新每个客户端的状态,这样页面就不会被刷新。
唯一的问题是,我有一个状态列,其中显示客户端的状态,由于页面没有刷新,客户端的状态在数据库中发生了更改,但这不会反映/显示在页面上。
我试图克服这个问题,但没有成功。
有人知道我是怎么做到的吗?
我当前的脚本:
function processForm(formId) {
$.ajax({
type: 'POST',
url: 'form_process.php',
data: $("#" + formId).serialize(),
success: function(data) {
var $row = $(this).closest("tr");
var $div = $row.find("div.msg");
$div.css("background", "#f00");
$div.html(data);
}
});
};
和HTML:
<table width="787" border="1">
<tr>
<td>FORM 1</td>
<td>
<div id='msg' class='msg'></div>
</td>
<td>
<form action="" name="form1" id="form1" method="post" onsubmit=
"processForm('form1');return false;">
<input type="text" name="user_name" id="user_name" value="" /> <input type=
"text" name="surname" id="surname" value="" /> <input type="submit" name=
"submit" value="submit" />
</form>
</td>
</tr>
<tr>
<td>FORM2</td>
<td>
<div id='msg' class='msg'></div>
</td>
<td>
<form action="" name="form2" id="form2" method="post" onsubmit=
"processForm('form2');return false;">
<input type="text" name="user_name" id="user_name" value="" /> <input type=
"text" name="surname" id="surname" value="" /> <input type="submit" name=
"submit" value="submit" />
</form>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
试着构建这样的HTML:
<table id="clientDetails" width="787" border="1">
<tr>
<td>FORM 1</td>
<td class='msg'></td>
<td><form>
<input type="text" name="user_name" value="" />
<input type="text" name="surname" value="" />
<input type="submit" name="submit" value="submit"/>
</form></td>
</tr>
<tr>
<td>FORM2</td>
<td class='msg'></td>
<td><form>
<input type="text" name="user_name" value="" />
<input type="text" name="surname" value="" />
<input type="submit" name="submit" value="submit"/>
</form></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
像这样的javascript:
$(function() {
$("#clientDetails").on('submit', 'form', function() {
var $form = $(this);
$.ajax({
type: 'POST',
url: 'form_process.php',
data: $form.serialize(),
success: function(data) {
$form.closest("tr").find(".msg").css("background", "#f00").html(data);
}
});
return false;
});
});
这至少有可能奏效,但也更高效,因为提交事件处理被委托给表,总共只有一个事件处理程序,而不是每个表单一个。。。加上HTML的相关简化。
保持现状。。您只需简单地在文档就绪事件上调用函数即可。。
像这样。。
<script>
$(document).ready(function() {
//pass formid
processForm(clientDetails)
});
</script>
希望这会有所帮助。。。
否则甜菜根甜菜根的帮助也是有效的。