我的頁面上有幾個切換，都使用類 psettings，它允許觸發單個腳本，該腳本執行 AJAX 呼叫以更新 MySQL 資料庫表中的標志。如果我慢慢點擊，這會很好。我可以以正常速度單擊所有按鈕，資料庫按預期更新，但取消選中，有時不會清除資料庫中的標志。如果我走得很慢，請在點擊之間暫停，它可以正常作業。我無法阻止用戶單擊切換按鈕的速度，但需要一種方法來確保更新是一致的，可能是延遲或重繪 等。
<script type="text/javascript">
$('.psettings').change(function(){
//event.preventDefault();
var token = $("input[name=<?php echo csrf_token(); ?>").val();
var ename = this.name;
var evalue = ' ';
if($("input[type='checkbox']").is(":checked"))
{
var evalue = 'X';
}
$.ajax({
type: 'post',
headers: {'X-Requested-With': 'XMLHttpRequest'},
url: '<?php echo base_url('setprivacy');?>',
data: {'<?php echo csrf_token(); ?>' : token, 'element_name' : ename, 'checked' : evalue },
dataType: 'json',
success:function(data){
$('input[name="fmpfy_tk"]').val(data.csrf);
},
error:function(data)
{
$('input[name="fmpfy_tk"]').val(data.csrf);
alert('Error occurred ' data.col_name);
}
});
});
</script> <?php
echo form_open();
?>
<div class="row mt-3 pb-2">
<div class="col">
<h2 class="title-text grayer pb-1"><i class="fa-solid fa-eye-slash pe-2"></i>Privacy Settings</h2>
<div class="row mt-3 py-2 base-text">
<div class="col">
<div class="form-check form-switch">
<input class="form-check-input psettings" type="checkbox" role="switch" name="flag_display_fullname" value="">
<label class="form-check-label" for="flag_display_fullname">Display full name in profile and posts</label>
<i class="fa-solid fa-circle-info ps-3 off-black" rel="tooltip" title="<?php echo lang('Tooltips.display_fullname'); ?>"></i>
</div>
<div class="form-check form-switch">
<input class="form-check-input psettings" type="checkbox" role="switch" name="flag_display_smaccounts" value="">
<label class="form-check-label" for="flag_display_smaccounts">Display social media accounts on posts</label>
<i class="fa-solid fa-circle-info ps-3 off-black" rel="tooltip" title="<?php echo lang('Tooltips.display_sm_accounts'); ?>"></i>
</div>
<div class="form-check form-switch">
<input class="form-check-input psettings" type="checkbox" role="switch" name="flag_receive_fy_emails" value="">
<label class="form-check-label" for="flag_receive_fy_emails">Receive periodic emails from FY.</label>
<i class="fa-solid fa-circle-info ps-3 off-black" rel="tooltip" title="<?php echo lang('Tooltips.receive_fy_emails'); ?>"></i>
</div>
</div>
</div>
</div>
</div>
<?php
echo form_close();
?> public function maintain_privacy_settings()
{
helper(['form','url']);
if ($this->request->isAJAX())
{
$UserModel = new \App\Models\User_model();
//Determine update column name
$element_name = $this->request->getPost('element_name');
$col_name;
switch ($element_name)
{
case 'flag_display_fullname':
$col_name = 'show_fullname';
break;
case 'flag_display_smaccounts':
$col_name = 'display_sm_accounts';
break;
case 'flag_receive_fy_emails':
$col_name = 'fy_notification_emails';
break;
}
if($UserModel->set_privacy_flag($this->data['userid'],$col_name,$this->request->getPost('checked')))
{
return json_encode(['success'=> 'success', 'csrf' => csrf_hash()]);
}
else
{
return json_encode(['error' => 'error', 'csrf' => csrf_hash(), 'col_name' => $this->request->getPost('element_name') ]);
}
}
}
uj5u.com熱心網友回復：
當多個請求將被發送到服務器但它們的回應不會按順序回傳時，就會出現您的問題。因此，服務器上存盤的內容與 UI 上存盤的內容不同。
要解決此問題，您可以使用許多技術，但最簡單的方法是阻止特定的 UI 元素，直到從服務器收到回應。為此，您可以在 ajax 呼叫之前禁用元素，然后在成功或失敗函式上啟用它。
您還可以為每個請求分配一個序列號并應用最高的一個并忽略其余的。
您還可以為您的請求實作一個佇列并按順序處理它們。
編輯：
您的 jquery 代碼也有問題。您沒有得到特定輸入的檢查狀態。試試下面的方法：
if($(`input[name='${ename}']`).is(":checked"))
{
var evalue = 'X';
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/466625.html