如何通过一个按钮使用Ajax提交两种表单

Question

我有两种形式，一种是产品详细信息，例如价格，描述和名称。另一个带有图像，它们都具有不同的Ajax，但是它们将数据发送到相同的路由。我要一键提交。因此，如果我单击“提交”按钮，它应立即提交所有价格，名称，图片等数据。如果可能，我该怎么办？

刀片文件

    //Form1

    <form id="form1">
      <input type="hidden" value="{{csrf_token()}}" id="token"/>
       <label for="name">Name</label>
        <input type="text" class="form-control" name="name" id="name" 
          placeholder="Enter product name">
           <label for="price">Price</label>
            <input type="text" class="form-control" name="price" id="price" 
             placeholder="Enter product price">
        </form>



   //Form2
     <form id="file_form" method="post" enctype="multipart/form-data">
       <input type="hidden" value="{{csrf_token()}}" id="token"/>
         <label for="images">Choose Images</label>
      <input id="files" type="file" class="" name="files[]" multiple />
      </form>


       //Submit Button
       <input type='button' class="btn btn-primary" value="Submit" id="btn"/>  

Javascript

    //Form1 javascript
    var token = $("#token").val();
    $(document).ready(function(){
    $("#btn").click(function(){
    var url = '{{ route('product.store') }}';
    var form = $('form')[0]; 
    var formData = new FormData(form);
    formData.append('_token', token); 
    $.ajax({
        url: url,
        data: formData, 
        type: 'POST',
        cache: false,
        contentType: false, 
        processData: false, 
        success:function(data){
        if($.isEmptyObject(data.error)){
        $("#msg").html("Product has been added successfull");
        $("#msg").fadeOut(3000);
         }

        }
    });

});



  //Form 2 Javascript
    $("#btn").click(function (e) {
            e.preventDefault();
            file_area = $('.file-area');
            progressbar = $('.progress-bar');
            status_bar = $('#status');
            image_list = $(".image-list");
            status_bar.css('display', 'block');
            status_bar.html('<div class="fa-3x">' +
                    '<i class="fas fa-spinner fa-pulse"></i>' +
                    '</div>');
            if (selected_files.length < 1) {
                status_bar.html('<li class="error">Please select file</li>')
            } else {
                var data = new FormData();
                data.append('_token', token);
                for (var i = 0, len = selected_files.length; i < len; i++) {
                    data.append('files[]', selected_files[i]);
                }
                fiel_feild = $('#files');
                $.ajax({
                    url: '{{ route('product.store') }}',
                    type: 'POST',
                    data: data,
                    contentType: false,
                    cache: false,
                    processData: false,
                    success: function (response) {
                        result = JSON.parse(response);
                        if (result['status'] == 'error') {
                            status_bar.html(result['error']);
                        } else if (result['status'] == 'success') {
                            selected_files = [];
                            image_list.html('');
                            file_area.css('display', 'none');
                            status_bar.html('<li class="success">File uploaded successfully.</li>');
                        }
                    }
                });
                return false;
            }
        });

Answer 1

快速而肮脏的答案：

简单地将您的第二个ajax调用放入第一个的success回调中。显然，由于图像是产品的detail，因此如果尚未保存产品（master），则不应将其发送到服务器并保存。这样，如果在保存产品数据（最小数据量）的过程中发生错误，您将不会浪费不必要的时间和带宽。

[如果您正在寻找一种更结构化的方法，那么您将在此处找到如此出色的答案-例如chain Your ajax calls by using promises或以下示例：Chain ajax and execute it in sequence. Jquery Deferred