html - Ajax 从数据库更新内容并在单击按钮时显示

Question

我有一个“recruit”按钮，当通过 Ajax 单击按钮时，它必须将数据库更新为“invited”，然后同一个按钮应该显示 Invited 并更新到数据库。默认情况下，数据库包含“recruit”。

此操作在单击按钮时发生，它会根据受邀更新数据库，但会出现另一个名为受邀的按钮。招募按钮也在那里。 这是我的代码。

  <div id='submit_wrp'>        
  <input id='btn_submit' type='submit' class='btn btn-primary active' value= " . $rowchk['recruit'] . "/>
  </div>   ";
 <input type="hidden" type="number" id='REC' value='<?php echo $id ?>'/>
<script>
    $('#btn_submit').click(function () {
        var name = $('#REC').val();
        $.ajax({
            type: 'POST',
            // url: 'testing.php',
            url: 'testing.php?REC=' + name,
            data: 'REC=' + name,
            success: function () {
                // alert("success" + name);
                $('#submit_wrp').load(location.href + ' #btn_submit');

                ///$('#submit_wrp').html(response);




            },
            error: function () {
                alert("error" + name);
            }
        });
    });
</script>

Answer 1

1. 使用表单提交事件或将按钮更改为按钮
2. 单击后，将 div 内容替换为包含您所在同一页面上的提交按钮的 div。

也许你的意思是

<script>
$(function() {
  $('#formID').on("submit",function (e) {
    e.preventDefault()
    var name = $('#REC').val();
    $.ajax({
        type: 'POST',
        // url: 'testing.php',
        url: 'testing.php?REC=' + name,
        data: 'REC=' + name,
        success: function (data) {
            $('#submit_wrp').html(data);
        },
        error: function () {
            alert("error" + name);
        }
      });
    });
  });
</script>

<form id="formID">
  <div id='submit_wrp'>        
   <input id='btn_submit' type='submit' class='btn btn-primary active' value= " . $rowchk['recruit'] . "/>
  </div>   ";
  <input type="hidden" type="number" id='REC' value='<?php echo $id ?>'/>
</form>