如何在同一表单中调用不同的Ajax调用

Question

我想在同一个表单中使用2个不同的提交按钮，用户应该能够添加一个文件，然后做一个预览或上传文件，每个提交应该做一个独立的ajax调用。

现在我使用同一个表单两次，但这不是理想的方式。

 <form method="post" id="import_excel_form" enctype="multipart/form-data">
                <table class="table">
                  <tr>
                    <td width="25%" align="right">Select Excel File</td>
                    <td width="50%"><input type="file" name="import_excel" /></td>
                    <td width="25%"><input type="submit" name="import" id="import" class="btn btn-primary" value="Import" /></td>
                  </tr>
                </table>
              </form>




<script>
$(document).ready(function(){
  $('#import_excel_form').on('submit', function(event){
    event.preventDefault();
    $.ajax({
      url:"import.php",
      method:"POST",
      data:new FormData(this),
      contentType:false,
      cache:false,
      processData:false,
      beforeSend:function(){
        $('#import').attr('disabled', 'disabled');
        $('#import').val('Importing...');
      },
      success:function(data)
      {
        $('#message').html(data);
        $('#import_excel_form')[0].reset();
        $('#import').attr('disabled', false);
        $('#import').val('Import');
      }
    })
  });
</script>

所以我们的目的是在表单中添加第二个Submitbutton，指向另一个ajax url(preview.php)，我试着把表单中的输入类型改为 "button"，把Ajaxcall改为.click，但没有成功。

谢谢你的帮助:)

Answer 1

步骤。

1. 你的方向是对的，使用 click 功能和变化 submit 与 button.
2. 不要用 this 在数据中，你必须使用类似 $("#import_excel_form").serialize();. 这是因为 this 是有效的，当你使用 on submit 因为它的指向是当前的形式，但是，如果你改变为 click，其指向当前按钮。

下面是一些有用的代码，没有经过测试。

<form action="import.php" method="post" id="import_excel_form" enctype="multipart/form-data">
                <table class="table">
                  <tr>
                    <td width="25%" align="right">Select Excel File</td>
                    <td width="50%"><input type="file" name="import_excel" /></td>
                    <td width="25%"><input id="button1" type="button" name="import" id="import" class="btn btn-primary" value="" /></td>
                    <td width="25%"><input id="button2" type="button" name="import" id="import" class="btn btn-primary" value="" /></td>
                  </tr>
                </table>
              </form>




<script>
$(document).ready(function(){
  $('#button1').on('click', function(event){        //  Same on button2
    var form = $("#import_excel_form");

    var url = form.attr('action');      //  Or what you want
    var method = form.attr('method');   //  Or what you want
    var data = form.serialize();        //  Or what you want

    $.ajax({
      url:url,
      method:method,
      data:new FormData(data),          //  Here you cant use 'this'
      contentType:false,
      cache:false,
      processData:false,
      beforeSend:function(){
        $('#import').attr('disabled', 'disabled');
        $('#import').val('Importing...');
      },
      success:function(data)
      {
        $('#message').html(data);
        form[0].reset();
        $('#import').attr('disabled', false);
        $('#import').val('Import');
      }
    })
  });
</script>