Как сделать прогресс загрузки в функцию Ajax, пока функция вставляет данные в базу данных? - PullRequest
0 голосов
/ 27 апреля 2019

У меня проблема с вставкой данных в базу данных. У меня есть функция, которая внутри функции имеет 4 Ajax, поэтому, чтобы сделать историю короткой.

Я хочу выполнить загрузку внутри функции щелчка, чтобы определить, что мои 4 вставки Ajax-данных уже сделаны или завершены. после того, как уже вставить данные в базу данных. Он автоматически перенаправит мою страницу на другую страницу. Можно ли сделать это по нажатию кнопки? если да, можете ли вы помочь мне, ребята, сделать такой индикатор прогресса.

Цель: если я нажму кнопку отправки, индикатор выполнения загрузится автоматически, пока не закончится сохранение данных в базе данных, а после загрузки индикатора выполнения он автоматически перенаправится на другую страницу.

У меня есть функция щелчка для отправки всех функций ajax.

var orderNumber;
var orders = [];
var menu;

var customer_id = $('#hidden_customer_id').val();

$('#add_to_cart').on('click', function() {

  orders = [];
  menu = undefined;

  $('.tbody_noun_chaining_order').children('tr').each(function() {

    $row = $(this);

    if ($row.hasClass('condimentParent')) {

      // store a previous menu to the orders array if exists.
      if (menu) {
        orders.push(menu);
      }
      menu = {
        'total': $row.find('.total').text(),
        'name': $row.find('.parent_item').text(),
        'customer_id': customer_id,
        'condiments': {
          'Item': [],
          'Qty': [],
          'Total': []
        }
      };

    } else if ($row.hasClass('editCondiments')) {

      menu.condiments.Item.push($row.find('.child_item').text());
      menu.condiments.Qty.push($row.find('.condiments_order_quantity').text());
      menu.condiments.Total.push($row.find('.total').text());
    }
  });

  if (menu) {
    orders.push(menu);
  }



   storeOrder(orders);

  $('table#noun_chaining_order').find('.tbody_noun_chaining_order').empty();
  $('.append_customer_noun_order_price').text('0.00');
  $('.total_amount').text('0.00');
  $('.total_amount').text('0.00');
  $('.rate_computation').text('0.00');


});

Это моя функция, это вставка данных в базу данных с помощью ajax.

    function storeOrder(data) {

  var customer_id = $('#hidden_customer_id').val();
  var place_customer = $('#place_customer').text();
  // reset 


  $id = "";
  $total_amount  = $('.total_amount').text();
  $append_customer_noun_order_price = $('.append_customer_noun_order_price').text();
  $tax_rate = $('.rate_computation').text();
  $delivery_rate = $('.del_rate').text();

  var sessionTransactionNumber_insert = localStorage.getItem('sessionTransactionNumber');

    $.ajax({
      url:'/insert_customer_order_properties',
      type:'POST',
      data:{
        'hidden_customer_id': customer_id,
        'hidden_customer_address': place_customer,
        'sessionTransactionNumber': sessionTransactionNumber_insert
      },
      success:function(data) {

        $id = data[0].id;

        $.ajax({
          url:'/insert_customer_payment_details',
          type:'POST',  
          data:{
            'hidden_customer_id': customer_id,
            'total_amount': $total_amount,
            'customer_sub_total': $append_customer_noun_order_price,
            'tax_rate': $tax_rate,
            'id_last_inserted': $id
          },
          success:function(data) {

             localStorage.removeItem('sessionTransactionNumber');

          }
        })
      }
    })

  for (var num in orders) {


    // simulate storing the order
    $.ajax('/insert_wish_list_menu_order', {

      type: 'POST',
      // as the call is asynchronous, make sure to provide all required reference data along with the call.
      context: orders[num].condiments,

      data: {
        // 'json': '{"orderNumber":' + (orderNumber++) + '}',
        'append_customer_noun_order_price': orders[num].total,
        'append_customer_noun_order': orders[num].name,
        'customer_id': customer_id
      },
      success: function(orderNumber) {

        $order_number = orderNumber[0].id; // meron na tayong kuha ng main item..

        $.ajax({
          url:'/insert_customer_order_details_properties',
          type:'POST',
          data:{
            'order_number': $order_number,
            'data_attribute_wish_order_id': $id,
          },
          success:function(data) {

              console.log(data);

          }
        })

        if (orderNumber !== undefined) {

          $.ajax('/insert_wish_list_menu_belong_condiments', {
            context: orderNumber,
            type: 'POST',
            data: {
              'ParentId': orderNumber,
              'Item': this.Item,
              'Qty': this.Qty,
              'Total': this.Total
            },
            success: function(result) {

              console.log(result);


              // setTimeout(function () { 
              //   swal({
              //     title: "Wow!",
              //     text: "Message!",
              //     type: "success",
              //     confirmButtonText: "OK"
              //   },
              //   function(isConfirm){
              //     if (isConfirm) {
              //       window.location.href = "//stackoverflow.com";
              //     }
              //   }); }, 1000);

            },

          })

        }
      }
    })
  }
}

Ответы [ 2 ]

0 голосов
/ 27 апреля 2019

Вы можете объявить переменную для хранения прогресса загрузки, и при каждом обратном вызове ajax вы можете увеличивать эту переменную:

 // declare inside click handler
 var loadingPercentage = 0; // percentage

 // in every success handler
 loadingPercentage += 25;

Когда все 4 вызова ajax были успешными, у вас будет переменная равная 100%.В зависимости от loadingPercentage вы можете отобразить индикатор выполнения.

0 голосов
/ 27 апреля 2019

В javascript есть функции, а именно .ajaxStart и .ajaxStop, которые вы можете обойти. Типичный пример:

$(document).ready(function(){
  $( document ).ajaxStart(function() {
    //start progress bar
  });

  $( document ).ajaxStop(function() {
    //stop progress bar and redirect
  });

  //other code here with you ajax calls
  ...
})

в этом случае $(document).ajaxStart() и $(document).ajaxStop() прослушивание любого вызова ajax во всем документе

Подробнее о ajaxStart и ajaxStop

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...