Question

请解释一下这里出了什么问题。首先，必须执行run函数及其ajax请求。但是由于某种原因，该函数已执行，而ajax请求未执行。它恰好在脚本的最后运行-在所有功能之后...为什么会发生这种情况以及如何解决它？..

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="id_product_create_form" method="post" enctype="multipart/form-data"></form>

<div class="media_preview_wrap">
  <div class="addPhoto">
    <div class="addPhotoHeader">
      <button type="button" class="button product_images_button">Add</button>
      <button id="id_submit" type="button">Submit</button>
    </div>
  </div>
</div>
<input type="file" name="image" style="display: none" required="" class="product_images" id="">

<script>
var files = [];

  $('.product_images_button').click(function() {
    $('.product_images').click();
  });

  $('.product_images').change(function() {
    handleFiles(this);
  });

  $('.media_preview_wrap').on('click', '.thumb', function() {
    removeFile($(this).data('id'));
  });

  $('#id_submit').click(function() {
    event.preventDefault();

     var $form = $('form'),
         formdata = new FormData($form[0]),
         $button = $('#id_submit');
     formdata.append('content', CKEDITOR.instances.id_content.getData());
     function run() {
       var product_id = null;
     $.ajax($form.attr('action'),{
       type: 'POST',
       data: formdata,
       processData: false,
       contentType: false,
       success: function(data) {
         product_id = data.product_id;
       }, error: function(error) {
          console.log(error)
      }
    });
     return product_id}
     product_id = run();
    files.forEach(function(file, index) {
      var data = new FormData();
      data.append('name', file.name);
      data.append('gallery_image', file.file);
      uploadFile(event.target.action, data)
        .done(function(response) {
          removeFile(file.id);
        })
        .fail(function(error) {
          console.log(error);
        });
    });
  });


  function handleFiles(input) {
    var URL = window.URL || window.webkitURL;

    var uniqueId = (new Date()).getTime()
    for (var i = 0; i < input.files.length; i++) {
      var file = input.files[i];

      if (file && file.type.startsWith('image/')) {
        uniqueId++;

        files.push({
          id: uniqueId,
          file: file,
          name: file.name // задел для возможности переименования файла.
        });

        var img = $('<img src="'+ URL.createObjectURL(file) +'" class="thumb" data-id="'+ uniqueId +'">');
        $('.media_preview_wrap').append(img);

        img.on('load', function() {
          URL.revokeObjectURL(this.src);
        });
      }
    }

    $(input).val('');
  }

  function removeFile(id) {
    files = files.filter(function(file) {
      return id !== file.id;
    })

    $('img[data-id="'+ id +'"]').remove();
  }

  function uploadFile(url, data) {
    return $.ajax({
      headers: {'X-CSRFToken': '{{ csrf_token }}' },
      type: 'POST',
      url: url,
      data: data,
      processData: false,
      contentType: false,
      cache: false
     });
  }
</script>

<style>
    .thumb {
      width: 150px;
      height: auto;
      opacity: 0.9;
      cursor: pointer;
    }
    .thumb:hover {
      opacity: 1;
    }
    .product_images {
      display: none;
    }
</style>

Answer 1

最初的问题可能是由于某些浏览器具有全局event对象，而其他浏览器则没有。

您可能会得到一个错误，指出event未定义，这将阻止其余代码运行

使用始终在事件对象中传递的事件处理程序函数的参数：

$('#id_submit').click(function(event) {
                              // ^^^
    event.preventDefault();

该问题解决之后...您需要意识到$.ajax是异步的，并且在第一个请求在product_id回调中完成之前，您不能使用success的新值

请参见How do I return the response from an asynchronous call?

为什么没有执行ajax请求？

1 个答案: