在 Laravel 中的 jQuery 中提交表单后加载 GIF

Question

我想在 Laravel 中提交表单后发送电子邮件。为了完成发送邮件过程 Laravel 有时需要（5-10 秒）。在那个持续时间（5-10 秒）内，我想展示一个加载器 gif。发送邮件时，gif 将消失并显示成功消息。

这是我的表格

<div class="book-appointment">

        <img src="images/loader.gif" id="gif" style="display: block; margin: 0 auto; width: 100px; visibility: hidden;">

        <h2>Make an appointment</h2>
        <form action="#" method="post" style="margin-top: 3rem;">
            <div class="left-agileits-w3layouts same">
                <div class="gaps">
                    <p>Patient Name</p>
                    <input type="text" name="Patient Name" placeholder="" required=""/>
                </div>  
                <div class="gaps">  
                    <p>Phone Number</p>
                    <input type="text" name="Number" placeholder="" required=""/>
                </div>
                <div class="gaps">
                    <p>Email</p>
                    <input type="email" name="email" placeholder="" required="" />
                </div>
                <div class="gaps">
                    <p>Age</p>
                    <input type="text" name="age" placeholder="" required="" />
                </div>
            </div>
            <div class="right-agileinfo same">
                <div class="gaps">
                    <p>Select Date</p>      
                    <input  id="datepicker1" name="Text" type="text" value="" onfocus="this.value = '';" onblur="if (this.value == '') {
                        this.value = 'yy/mm/dd';}" required="">
                </div>
                <div class="gaps">
                    <p>Time</p>     
                    <input type="text" id="timepicker" name="Time" class="timepicker form-control" value="">    
                </div>
                <div class="gaps">
                    <p>Department</p>   
                    <select class="form-control">
                        <option></option>
                        <option>Cardiology</option>
                        <option>Ophthalmology</option>
                        <option>Neurology</option>
                        <option>Psychology</option>
                        <option>Dermatology</option>
                    </select>
                </div>
                <div class="gaps">
                    <p>Gender</p>   
                    <select class="form-control">
                        <option></option>
                        <option>Male</option>
                        <option>Female</option>
                    </select>
                </div>

            </div>
            <div class="clear"></div>
                <input type="submit" value="Make an appointment">
        </form>
    </div>

我的脚本

$('#add').click(function(event){

        $('#gif').css('visibility', 'visible');

        var patient_name = $('#patient_name').val();
        var patient_number = $('#patient_number').val();
        var patient_email = $('#patient_email').val();
        var patient_age = $('#patient_age').val();
        var patient_gender = $('#patient_gender').find(":selected").val();
        var service_id = $('#service_id_search').find(":selected").val();
        var schedule_time_id = $('#schedule_time_id').find(":selected").val();
        var date = $('#datepicker1').val();

        if(patient_name == '' || patient_number == '' || patient_email == '' || patient_age == '' || patient_gender == '' || service_id == '' || schedule_time_id == '' || date == '')
        {
            alert('Empty input field exist');
        }

        else if(isNaN(patient_number))
        {
            alert('Please insert numbers in Patient Number field');
        }

        else if(isNaN(patient_age))
        {
            alert('Please insert numbers in Age field');
        }

        else
        {
            $.get( 'confirm_appointment', {'patient_name': patient_name, 'patient_number': patient_number, 'patient_email': patient_email, 'patient_age': patient_age, 'patient_gender': patient_gender, 'service_id': service_id, 'schedule_time_id': schedule_time_id, 'date': date, '_token':$('input[name=_token]').val()}, function( data )
            {

                // console.log(data);

                $('#exampleModal .bg-agile .book-appointment h2').remove();
                $('#exampleModal .bg-agile .book-appointment form').remove();

                trHTML = '';

                if(data > 0)
                {                       
                    trHTML += "<h2> Your appointment is successfully submitted </h2>";
                }
                else
                {
                    trHTML += "<h2> No </h2>";
                }

                trHTML += "<center><a href='/'><button class='btn btn-secondary btn-lg' style='padding: 16px 20px 20px 20px; color: #fff; margin-top:20px;'>Go Back to Homepage</button></a></center>";

                $('#exampleModal .bg-agile .book-appointment').append(trHTML);

                // console.log(data);
                // $("#report").load(location.href + " #report");

            });
        }



    });

我已经看过这篇文章了[Show loading gif after clicking form submit using jQuery但是没用...

有人帮忙吗？

Answer 1

发送ajax请求时显示一个div，可以同时使用ajaxStop()和ajaxStart()。这是一个例子。

var $loading = $('#yourloadingdiv').hide();
$(document)
.ajaxStart(function () {
  $loading.show();
})
.ajaxStop(function () {
 $loading.hide();
});

希望这会有所帮助。

Answer 2

你可以这样使用

//start actions

$('#your-loader').show();

$.post(endpoint, options, function(response){
  $('#your-loader').hide();
}).fail(function(){
  $('#your-loader').hide();
});

Answer 3

同时添加 ID form 和 image。 现在在 javascript $('#add').click(function(event){}) 函数中执行以下操作

$('#appointment-form').hide();
$('#gif').show();

成功发送邮件后，只需将gif id 隐藏在ajax 中

$('#gif').hide();

这是我的完整代码

$('#add').click(function(event){

        $('#appointment-form').hide();
        $('#gif').css('margin-top','80px');
        $('#gif').show();

        var patient_name = $('#patient_name').val();
        var patient_number = $('#patient_number').val();
        var patient_email = $('#patient_email').val();
        var patient_age = $('#patient_age').val();
        var patient_gender = $('#patient_gender').find(":selected").val();
        var service_id = $('#service_id_search').find(":selected").val();
        var schedule_time_id = $('#schedule_time_id').find(":selected").val();
        var date = $('#datepicker1').val();

        if(patient_name == '' || patient_number == '' || patient_email == '' || patient_age == '' || patient_gender == '' || service_id == '' || schedule_time_id == '' || date == '')
        {
            alert('Empty input field exist');
        }

        else if(isNaN(patient_number))
        {
            alert('Please insert numbers in Patient Number field');
        }

        else if(isNaN(patient_age))
        {
            alert('Please insert numbers in Age field');
        }

        else
        {

            $.get( 'confirm_appointment', {'patient_name': patient_name, 'patient_number': patient_number, 'patient_email': patient_email, 'patient_age': patient_age, 'patient_gender': patient_gender, 'service_id': service_id, 'schedule_time_id': schedule_time_id, 'date': date, '_token':$('input[name=_token]').val()}, function( data )
            {

                $('#exampleModal .bg-agile .book-appointment h2').remove();
                $('#exampleModal .bg-agile .book-appointment form').remove();

                trHTML = '';

                if(data > 0)
                {                       
                    trHTML += "<h2 style:'margin-top'> Your appointment is successfully submitted </h2>";
                }
                else
                {
                    trHTML += "<h2> No </h2>";
                }

                trHTML += "<center><a href='/'><button class='btn btn-secondary btn-lg' style='padding: 16px 20px 20px 20px; color: #fff; margin-top:20px;'>Go Back to Homepage</button></a></center>";

                $('#gif').hide();
                $('#exampleModal .bg-agile .book-appointment').append(trHTML);


            });
        }



    });