javascript - 如何在不刷新页面的情况下在前端显示更新的数据？

Question

我想将编辑后的数据保存到数据库中，并在单击表单中的“保存”按钮时显示在前端中。我做了第一部分，但我很难在前端中显示它而无需刷新页面

<div class="leftbar_menu">
<div class="short_res_header">
<h3 style="margin-top: 10px;">
<span style="float:left;">About</span>
<span style="font-size:small;float: right;"><a data-edit-id="40322" data-clickmode="edit" class="pers" data-id="40322" style="display: inline;">edit</a></span><span style="font-size:small;float: right;"><a class="pers" data-close-id="40322" data-clickmode="close" data-id="40322" style="display: none;">close</a></span>             </h3>
</div>
<div class="leftbar_content">
<div data-id="40322" style="display: none;" class="about_toggle formarea"> 
<script type="text/javascript">
window.onLoad = imageRefreshBig();
$(document).ready(function(){
$('#profileshortresume').attr('maxlength','250');
$("#profileshortresume").css({
"max-width": "350px"
});
});
</script>

<div class="ajaxfiy_edit_profile">

<form enctype="multipart/form-data" method="post" action="http://10.0.1.21/firstplanet/dev/action/profile/edit/" onsubmit="return validateForm()" style="margin-left: 10px;" id="profile_edit_form" class="profile_edit_form_40322" name="profile_edit_form" novalidate="novalidate">
<div style="float:left;width:100%;" id="mypage_about" class=""><dl class="profileshortresume"><dt>About you<font style="color:#FF1800;font-size: 11px;padding-left: 3px;"> *</font><br></dt><dd>
<textarea title="" required="" id="profileshortresume" name="profileshortresume" class="input-textarea" maxlength="250" style="max-width: 350px;">good</textarea></dd></dl></div><input type="hidden" value="90d0e928746b45b9886292d1d0e08d5e" name="__elgg_token"><input type="hidden" value="1396426813" name="__elgg_ts"><input type="hidden" value="40322" name="cat_id"><input type="hidden" value="39242" name="custom_profile_type"><input type="hidden" value="job_1394777243" name="username">
<div class="subt_butt">
<a class="buttonS"><span><input type="button" value="Save" class="edit_save_button" style="text-align:center;"></span></a>
</div>
<br>

</form>
</div>
</div>
<div style="padding-right: 6px; display: block;" class="short_res" data-content-id="40322">
good    
</div>
</div>
</div>

//下面的脚本将在单击编辑时打开表单

<script type="text/javascript">

$('a.pers').click(function(){
var formid = $(this).attr('data-id');
var clickmode = $(this).attr('data-clickmode');

/*Closing All Open Div */
$('div.short_res').show();
$('div.formarea').hide();

if(clickmode == 'edit') {
$('a[data-clickmode=create]').show();
$('a[data-clickmode=edit]').show();
$('a[data-clickmode=close]').hide();

$('a[data-create-id='+formid+']').show();
$('a[data-close-id='+formid+']').show();
$('a[data-edit-id='+formid+']').hide();

$('div[data-id='+formid+']').show();
$('div[data-content-id='+formid+']').hide();         
}
if(clickmode == 'close') {

$('a[data-create-id='+formid+']').show();
$('a[data-edit-id='+formid+']').show();
$('a[data-close-id='+formid+']').hide();

$('div[data-id='+formid+']').hide();
$('div[data-content-id='+formid+']').show();                 
}
if(clickmode == 'create') {
$('a[data-clickmode=close]').hide();
$('a[data-clickmode=edit]').show();

$('a[data-close-id='+formid+']').show();
$('a[data-create-id='+formid+']').hide();

$('div[data-id='+formid+']').show();
$('div[data-content-id='+formid+']').hide();         
}   


});

//我使用下面的脚本来更新数据库中的数据并显示在前端

$(".edit_save_button").click(function(){
var formid = $(this).parent().parent().parent().parent().attr("class");
var url = $("form."+formid).attr('action');
var data = $("form."+formid).serialize();
$(".thewire_previous_img").show();
var details = $(this).parent().parent().parent().parent().parent().parent().next().attr("class");
$.ajax({
type: "POST",
url: url,
data: data,
context: details ,
success:  function(data){
$(".formarea").hide();
$('div.short_res').show();
$('a[data-clickmode=close]').hide();
$('a[data-clickmode=edit]').show();
$(".thewire_previous_img").hide();

}
}); 

});

Answer 1

如果您不想刷新页面，那么这很简单，只是不使用 <form>元素和按钮为 <input> , 只需使用 JQuery .val() 获取元素值即可并获取<button type="button">的点击事件元素。 当您发送表单时，导航器始终会自动刷新页面或将您重定向到表单中引用的页面。