如何解决Javascript $ .get并不总是在单击时更新
|| 我想知道为什么当我单击按钮时我的代码没有更新ajax调用。仅在刷新页面后显示。我的代码如下: 这是完整的jquery / javascript代码: $(document).ready(function(){ $(\“#savesubmainbutton \”)。live(\'click \',function(){ $.post(\'save-sub-main.php\',$(\"#submainform\").serialize(),function(data) {
$(\'#submain_save_message\').html(data);
});
$(\'#submain\').hide();
// Load data after submission
$.get(\'getsubmain.php\',{ mainid: \"<?php echo $_GET[\'id\']; ?>\" },function(data) {
$(\'.submain_message\').html(data);
});
});
}); //end
这是HTML表单的一部分
<div id=\"submain\">
<form id=\"submainform\" name=\"submainform\" method=\"post\" action=\"\" enctype=\"multipart/form-data\" >
<table><input type=\"hidden\" name=\"MAX_FILE_SIZE\" value=\"1000000\" />
<!--<tr><td width=\"289\" align=\"right\">Jou naam:</td><td><input type=\"text\" name=\"yourname\" id=\"yourname\" style=\"background-color:lightblue;\" /></td></tr>
<tr><td width=\"289\" align=\"right\">Jou e-posadres:</td><td><input type=\"text\" name=\"email\" id=\"email\" style=\"background-color:lightblue;\"/></td></tr>-->
<tr><td width=\"289\" align=\"right\">Naam van die geskiedkundige figuur (bv. Jan van Riebeeck):</td><td><input type=\"text\" name=\"name\" id=\"name\" /></td></tr>
<tr><td width=\"289\" align=\"right\">Foto van die geskiedkundige figuur :</td><td><input id=\"file_upload\" name=\"file_upload\" type=\"file\" /></td></tr>
<tr><td width=\"289\" align=\"right\"><div id=\"filname\"></div></td><td><input id=\"filename2\" name=\"image\" type=\"hidden\" value=\"\" /></td></tr>
<!--<tr><td width=\"289\" align=\"right\">Naam van jou inskrywing :</td><td><input type=\"text\" name=\"title\" id=\"title\" /></td></tr>-->
<tr><td width=\"289\" align=\"right\">Datum waarop die inskrywing gemaak is (bv. 1652):</td><td><input type=\"text\" name=\"date\" id=\"date\" /></td></tr>
<tr><td width=\"289\" align=\"right\">Status update (bv. Wat sien ek daar in die verte? Is dit \'n tafel?):</td><td><textarea name=\"message\" id=\"message\"></textarea></td></tr>
<input type=\"hidden\" name=\"mainid\" value=\"<?php echo $_GET[\'id\']; ?>\" />
<tr><td></td><td><div id=\"savesubmainbutton\" style=\"color:blue\"><input type=\"button\" value=\"Save\" /></div></td></tr>
</table>
</form>
解决方法
请记住,您的ajax调用是异步的-因此,在您执行get之前,该帖子未返回数据-请更改代码,如下所示。
$(document).ready(function() {
// Save SubMain data
$(\"#savesubmainbutton\").live(\'click\',function(){
$.post(\'save-sub-main.php\',$(\"#submainform\").serialize(),function(data) {
$(\'#submain_save_message\').html(data);
$(\'#submain\').hide();
// Load data after submission
$.get(\'getsubmain.php\',{ mainid: \"<?php echo $_GET[\'id\']; ?>\" },function(data) {
$(\'.submain_message\').html(data);
});
});
});
}); //结束
,$.post
的回调未调用您的$.get
。这样,“ 3”正在运行,但是由于尚未提交数据,因此它不会返回任何新数据。
如果将ѭ3移到回调内部,它应该可以正常工作。
尽管不打扰第二个ajax调用,而只是将just4中的数据从return3中返回,这会更好,更有效。
类似于以下内容,假设您将数据作为json对象返回,因此您可以为响应的两个不同部分简单地使用两个变量。
$.post(\'save-sub-main.php\',function(data) {
$(\'#submain_save_message\').html(data.save_message);
$(\'#submain\').hide();
$(\'.submain_message\').html(data.return_data);
},\'json\');
,如果获取请求使用相同的参数,则它们可以被浏览器缓存,请参见此处以获取更多详细信息。
您可以使用POST或添加一个虚拟参数,例如滴答声或当前时间,这将导致强制不缓存GET的方式有所不同。
,一些观察。如果要替换默认的提交行为,最好确保取消click事件,否则将发生表单的默认行为。
另外,该帖子是异步的,因此您需要确保要执行的所有后续工作都在回调函数中完成。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。