从一个文档发送两个AJAX请求

Question

我已经开发我的网站一年多了，我一直在学习。我现在工作在一个上传页面，使用AJAX来处理上传，并显示一个进度条，而它是这样做的，在文件上传后，它将所有上传的文件临时存储在会话数组中，然后当按下最后一个按钮时，图像路径将被存储在数据库中。

但是，我偶然发现了AJAX的一个问题--我并不擅长这个问题--我无法克服这个问题。当图片被上传时，它会显示这些图片的预览，在每个图片上都有一个小的删除按钮，供用户删除他们不再需要的图片。

我意识到，一旦我用AJAX上传了一张图片，'delete image‘功能就不会处理了，因为AJAX请求已经被处理了。我应该将函数包含在单独的'.js‘文件中吗?或者我只是错误地处理了它。an image to explain all of this

AJAX代码：

//file upload ajax


$(function() {
  /* variables */

  var bar = $('.bar');
  var progress = $('.progress');

  /* submit form with ajax request using jQuery.form plugin */
  $('.upload_form').ajaxForm({

    /* set data type json */
  //  dataType:'json',

    /* reset before submitting */
    beforeSend: function() {
      bar.width('0%');
      progress.css('display', 'block');
    },

    /* progress bar call back*/
    uploadProgress: function(event, position, total, percentComplete) {
      var pVel = percentComplete + '%';
      bar.width(pVel);
    },

    /* complete call back */
    complete: function(output){
    //  var responseMessage = $.parseJSON(data.responseText);
    progress.css('display', 'none');
    document.getElementById('next_step').innerHTML = ''.innerHTML = '<form method="post"><input type="submit" class="final_upload red_submit" name="uploadSubmit" value="الانتهاء" /></form>';
    //$('.status-message').html('<p>'+output.responseText+'</p>');
    var response = output.responseText;
    var response_cut = response.substring(response.indexOf('<p class="n-st'), response.indexOf('cut text!'));
    var response_preview = response.substring(response.indexOf('<div class="n-im'), response.indexOf('cut me!'));
      $('.status-message').empty().html(response_cut);
      $('#preview_images').empty().html(response_preview);
      }

  });
});

$(document).ready(function(){
  $('#upload_btn').change(function(){
    $('#upload_files').trigger('click');
  });
});

//delete image on click

  $(document).ready(function(){
    $('.preview-img').click(function(){
          var current_image = $(this);
          var img_src = $(this).attr('data-img-src');
          var img_count = parseInt($('.images_count').val());
          var url = 'upload.php';
          $.post(url, {del_img : img_src}, function(count_img){
              console.log(count_img);
              current_image.hide();
              var new_count = img_count + 1;
              $('.images_count').val(new_count);
              $('.status-message').empty().html('تم مسح الصورة بنجاح، تبقى لديك '+new_count+' صورة');
          });
    });
  });

很抱歉它是阿拉伯语，但它不代表任何重要的东西..

Answer 1

您可以从同一文档发送多个请求，而不限于一次发送一个请求。

但是，请注意，不能保证它们完成的顺序。还要注意的是，浏览器是limit the number of open HTTP requests per origin的，所以如果你过多地使用连接数，你可能会看到一些延迟。