如何在 Ajax 刷新或提交到数据库后将计数器重置为 0，

Posted 2023-05-08

技术标签:

【中文标题】如何在 Ajax 刷新或提交到数据库后将计数器重置为 0，【英文标题】：How to reset the counter to 0 after Ajax Refresh or Submistion to database, 【发布时间】：2021-10-28 01:59:57 【问题描述】：

我有这段代码使用 JQuery Ajax 在 mysql 数据库中发送多个数据，一切正常，但是当我尝试使用 ajax 刷新页面并添加新记录时，它填充的次数等于最后一个计数器。

下面是我的index.php页面；

<div id="sample_table_data">
    <div class="row">
        <div class="panel border-cyan-dark">
            <div class="panel-heading bg-cyan text-white border-cyan-dark">
                    <div class="panel-title">
                        <h4>php - Sending multiple forms data through jQuery Ajax</h4>
                  </div>
            </div>
            <div class="panel-body">
                <div style="padding-bottom: 10px;" align="right">
                        <button name="add" id="add" class="btn btn-success btn-sm">
                            <i class="fa fa-plus-square"></i>Add Measures
                        </button>
                </div>
                <form method="POST" id="user_form">
                    <div class="row">
                        <div class="table-responsive margin-bottom-20" >
                            <table class="table table-striped table-bordered table-condensed table-hover" id="user_data">
                                <thead>
                                    <tr>
                                        <th>First Name</th>
                                        <th>Last Name</th>
                                        <th>Details</th>
                                        <th>Remove</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                    <div class="row">
                        <input type="submit" name="insert" id="insert" class="btn btn-primary btn-sm" value="Insert">
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Form Dialogue Box -->
<div id="user_dialog">
    <div class="row">
        <div class="col-sm-12">
            <div class="form-group">
                <label>Enter First Name</label>
                <input type="text" name="first_name" id="first_name" class="form-control input-sm">
                <span id="error_first_name" class="text-danger"></span>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="form-group">
                <label>Enter Last Name</label>
                <input type="text" name="last_name" id="last_name" class="form-control input-sm">
                <span id="error_last_name" class="text-danger"></span>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="form-group">
                <input type="hidden" name="row_id" id="hidden_row_id">
                <button type="button" name="save" id="save" class="btn btn-info btn-sm">Save</button>
            </div>
        </div>
    </div>
</div>

<!-- Alert Box -->
<div id="action_alert" title="Action"></div>

<script>  
    $(document).ready(function() 
     
        var count = 0;

     $('#user_dialog').dialog(
        autoOpen:false,
        width:800
    );


     $('#add').click(function()
        $('#user_dialog').dialog('option', 'title', 'Add Data');
        $('#first_name').val('');
        $('#last_name').val('');
        $('#error_first_name').text('');
        $('#error_last_name').text('');
        $('#first_name').css('border-color', '');
        $('#last_name').css('border-color', '');
        $('#save').text('Save');
        $('#user_dialog').dialog('open');
    );

    $('#save').click(function()

        var error_first_name = '';
        var error_last_name = '';
        var first_name = '';
        var last_name = '';
        if($('#first_name').val() == '') 
             error_first_name = 'First Name is required';
             $('#error_first_name').text(error_first_name);
             $('#first_name').css('border-color', '#cc0000');
             first_name = '';
         else 
             error_first_name = '';
             $('#error_first_name').text(error_first_name);
             $('#first_name').css('border-color', '');
             first_name = $('#first_name').val();
         
        if($('#last_name').val() == '') 
             error_last_name = 'Last Name is required';
             $('#error_last_name').text(error_last_name);
             $('#last_name').css('border-color', '#cc0000');
             last_name = '';
         else  
             error_last_name = '';
             $('#error_last_name').text(error_last_name);
             $('#last_name').css('border-color', '');
             last_name = $('#last_name').val();
        


        if(error_first_name != '' || error_last_name != '') 
             return false;
        
         else 
             if($('#save').text() == 'Save')
             
                count++;
                output = '<tr id="row_'+count+'">';
                output += '<td>'+first_name+' <input type="hidden" name="hidden_first_name[]" id="first_name'+count+'" class="first_name" value="'+first_name+'" /></td>';
                output += '<td>'+last_name+' <input type="hidden" name="hidden_last_name[]" id="last_name'+count+'" value="'+last_name+'" /></td>';
                output += '<td><button type="button" name="view_details" class="btn btn-warning btn-xs view_details" id="'+count+'">View</button></td>';
                output += '<td><button type="button" name="remove_details" class="btn btn-danger btn-xs remove_details" id="'+count+'">Remove</button></td>';
                output += '</tr>';
                $('#user_data').append(output);
            
            else
            
                var row_id = $('#hidden_row_id').val();
                output = '<td>'+first_name+' <input type="hidden" name="hidden_first_name[]" id="first_name'+row_id+'" class="first_name" value="'+first_name+'" /></td>';
                output += '<td>'+last_name+' <input type="hidden" name="hidden_last_name[]" id="last_name'+row_id+'" value="'+last_name+'" /></td>';
                output += '<td><button type="button" name="view_details" class="btn btn-warning btn-xs view_details" id="'+row_id+'">View</button></td>';
                output += '<td><button type="button" name="remove_details" class="btn btn-danger btn-xs remove_details" id="'+row_id+'">Remove</button></td>';
                $('#row_'+row_id+'').html(output);
            
     
          $('#user_dialog').dialog('close');   
       
);

    
    $(document).on('click', '.view_details', function()
        var row_id = $(this).attr("id");
        var first_name = $('#first_name'+row_id+'').val();
        var last_name = $('#last_name'+row_id+'').val();
        $('#first_name').val(first_name);
        $('#last_name').val(last_name);
        $('#save').text('Edit');
        $('#hidden_row_id').val(row_id);
        $('#user_dialog').dialog('option', 'title', 'Edit Data');
        $('#user_dialog').dialog('open');
    );


    $(document).on('click', '.remove_details', function()
        var row_id = $(this).attr("id");
        if(confirm("Are you sure you want to remove this row data?")) 
         $('#row_'+row_id+'').remove();
           else  
             return false;
         
    );
    
    $('#action_alert').dialog(
        autoOpen:false
    );

    
    $('#user_form').on('submit', function(event)
        event.preventDefault();
        var count_data = 0;
        $('.first_name').each(function()
         count_data = count_data + 1;
     );
        if(count_data > 0)
        
         var form_data = $(this).serialize();
         $.ajax(
            url:"pages/insert.php",
            method:"POST",
            data:form_data,
            success:function(data)
            
             $('#user_data').find("tr:gt(0)").remove();
            count =0;
             $('#action_alert').html('<p>Data Inserted Successfully</p>');
             $('#action_alert').dialog('open');
            
        )
     
     else
     
         $('#action_alert').html('<p>Please Add atleast one data</p>');
         $('#action_alert').dialog('open');
     
    );
    


 );
</script>

这是我的 insert.php 代码

<?php

//insert.php

$connect = new PDO("mysql:host=localhost;dbname=test", "root", "****");

$query = "
INSERT INTO tbl_sample 
(first_name, last_name) 
VALUES (:first_name, :last_name)
";

for($count = 0; $count<count($_POST['hidden_first_name']); $count++)

 $data = array(
  ':first_name' => $_POST['hidden_first_name'][$count],
  ':last_name' => $_POST['hidden_last_name'][$count]
 );
 $statement = $connect->prepare($query);
 $statement->execute($data);


?>

请帮助我如何在 Ajax 刷新后将计数器重置为 0。谢谢。

【问题讨论】：

你能告诉我你所说的 Ajax Refresh 是什么意思吗？ @SubhashisPandey 我有这个按钮 [ 【参考方案1】：

将变量计数放在 $(document) 之外

 var count = 0;
 $(document).ready(function()

在你的提交函数中

$('#user_form').on('submit', function(event)
    event.preventDefault();
    var count_data = 0;
    $('.first_name').each(function()
     count_data = count_data + 1;
 );
    if(count_data > 0)
    
     var form_data = $(this).serialize();
     $.ajax(
        url:"pages/insert.php",
        method:"POST",
        data:form_data,
        success:function(data)
        
         $('#user_data').find("tr:gt(0)").remove();
         $('#action_alert').html('<p>Data Inserted Successfully</p>');
         $('#action_alert').dialog('open');
        
        count =0;
    )
 
 else
 
     $('#action_alert').html('<p>Please Add atleast one data</p>');
     $('#action_alert').dialog('open');
 
);

此外，您应该使用 .prop 而不是 .attr

【讨论】：

感谢您的努力，但当我放置 var count = 0; 时，我似乎没有看到任何变化；外面请检查更新。你的成功：功能有效吗？因为您的 insert.php 没有返回任何内容。

以上是关于如何在 Ajax 刷新或提交到数据库后将计数器重置为 0，的主要内容，如果未能解决你的问题，请参考以下文章

Python之路64-Ajax

向后台提交数据：通过form表单提交数据需刷新网页但通过Ajax提交数据不用刷新网页可通过原生态Ajax或jqueryAjax。Ajax代码部分

ajax提交后如何防止页面刷新

PHP 表单提交到 MySQL，无需刷新/重定向

登录表单电子邮件 ID 将使用 ajax 成功功能以密码重置表单显示，无需刷新页面

Ajax 表单提交后如何将用户重定向到另一个页面？