Codeigniter + Ajax，无法在不刷新页面的情况下多次提交表单答案

【问题标题】：Codeigniter + Ajax, can't submit form multiple times without page refreshCodeigniter + Ajax，无法在不刷新页面的情况下多次提交表单
【发布时间】：2022-01-25 05:38:38
【问题描述】：

我正在尝试在一个页面中执行简单的任务，并避免在使用 ajax 提交的每个表单上刷新页面。问题是我只能向数据库提交一次更新，其余的只是控制台日志成功而不更新数据库。

控制器

function index() {
 $data['process'] = $this->Debug_model->getProcess();
 $this->load->view('debug', $data);
}

function nextLine() {

 $this->form_validation->set_rules('id', 'ID', 'required');

 if ($this->form_validation->run() == FALSE)
 {
   redirect('debug','refresh');
 } else {
  $data = array(
      'currentLine' => $this->input->post('currentLine'),
      'nextLine' => $this->input->post('nextLine')
  );

  $id = $this->input->post('id');
  $this->Debug_model->goNext($data, $id);
 }
}

型号

function goNext($data, $id)
{
    $this->db->where('id', $id);
    return $this->db->update('tbl_process', $data);
}

Javascript

$(document).ready(function() {
            finish();
        });
        
        function finish() {
            setTimeout(function() {
                update();
                finish();
            }, 200);
        }
        
        function update() {
            $.getJSON("apitest", function(data) {
                $("#currentLine").empty();
                $("#nextLine").empty();
                $.each(data.result, function() {
                    $("#currentLine").append(
                        "" + this['currentLine'] + "-" + this['deskNo'] + ""
                    );
                    $("#nextLine").append(
                        "" + this['nextLine'] + "-" + this['deskNo'] + ""
                    );
                });
            });
        }

        //btn save
        $("#btnSave").click(function(e){
            e.preventDefault();
            var data = $('#callLine').serialize();
            $.ajax({
                type: 'POST',
                url: "<?php echo base_url('debug/nextLine'); ?>",
                data: data,
                success: function() {
                    console.log('success');
                }
            });
        });

查看

<h1>Current: <span id="currentLine"></span></h1>
<h2>Next: <span id="nextLine"></span></h2>

<?php foreach ($process->result() as $singleProcess) : 
    $tobeCurrent = $singleProcess->currentLine + 1;
    $tobeNext = $tobeCurrent + 1;
?>
<form action="" method="post" enctype="multipart/form-data" id="callLine">
  <input type="hidden" name="id" value="<?php echo $singleProcess->id ?>" />
  <input type="hidden" name="currentLine" value="<?php echo $tobeCurrent ?>" />
  <input type="hidden" name="nextLine" value="<?php echo $tobeNext ?>" />
  <button id="btnSave" class="btn-a" type="btn">NEXT LINE</button>
</form>
<?php endforeach; ?>

目标是提交表单时不刷新页面，可以多次进行，仍然不刷新页面。

【问题讨论】：

尝试改变<button id="btnSave" class="btn-a" type="btn">NEXT LINE</button>你写的type="btn"尝试把type="button"
您的 foreach 循环可以使用多个保存按钮创建多个相同的表单。但是您的 jquery 只会检测到对第一个按钮的点击，因为 ID 在 html 文档中必须是唯一的。因此，所有其他保存按钮都被视为无效并被忽略。如果您想绑定到许多相似的重复按钮，请使用类

标签： javascript php jquery ajax

【解决方案1】：

而不是检测按钮点击事件，在submit 事件表单上检测它。

$("#callLine").submit(function(e){
            e.preventDefault();
            var data = $('#callLine').serialize();
            $.ajax({
                type: 'POST',
                url: "<?php echo base_url('debug/nextLine'); ?>",
                data: data,
                success: function() {
                    console.log('success');
                }
            });
        });

还将按钮类型更改为submit 而不是btn

<button id="btnSave" class="btn-a" type="submit">NEXT LINE</button>

【讨论】：

感谢您的快速响应，不幸的是它也只提交一次，但控制台日志显示每次提交都成功。