首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >多次切换,调用相同的AJAX,数据库更新不一致。

多次切换,调用相同的AJAX,数据库更新不一致。
EN

Stack Overflow用户
提问于 2022-04-27 03:44:27
回答 1查看 27关注 0票数 0

我的页面上有几个切换点,所有这些都使用类page,它允许触发单个脚本来执行AJAX调用来更新MySQL数据库表中的标志。如果我慢慢地点击,这会很好。我可以按正常速度点击所有按钮,数据库按预期更新,但取消检查,有时不清除DB中的标志。如果我慢慢来,在点击之间暂停一下,它可以正常工作。我不能阻止用户点击切换的速度,但需要一种方法来确保更新是一致的,可能是延迟或刷新等等。

代码语言:javascript
运行
复制
        <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>
代码语言:javascript
运行
复制
            <?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();
            ?>

代码语言:javascript
运行
复制
    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') ]);
        }
    }
}
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-04-27 04:01:20

当多个请求将被发送到服务器时,您的问题就会发生,但是它们的响应不会按顺序返回。因此,在服务器上存储的内容将与UI上的存储库不一样。

要解决这个问题,您可以使用许多技术,但最简单的方法是阻止特定的UI元素,直到从服务器收到响应为止。为此,您可以在ajax调用之前禁用元素,然后在成功或失败函数时启用它。

您还可以为每个请求分配一个序列号,并应用最高的请求,而忽略其余的请求。

此外,您还可以为请求实现一个队列,并按顺序处理它们。

编辑:

此外,jquery代码也有问题。没有检查特定输入的状态。尝试如下所示:

代码语言:javascript
运行
复制
if($(`input[name='${ename}']`).is(":checked"))
{
    var evalue = 'X';
}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/72023009

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档