javascript - 使用 Ajax 手动提交表单

Question

我正在尝试使用 ajax 调用表单提交上的 servlet。但它并没有影响 ajax 和页面重新加载。我手动触发表单提交，然后在该提交函数上调用 ajax 方法。

$("#image1").on('change', function(event) {
  $('#myform').trigger('submit');
  alert("button clicked"); // this is submitted

  $("#myform").submit(function(e) { // this is not happening
    event.preventDefault();

    alert('form clicked');
    //var formId=("#myform").submit();
    $.ajax({
      type: 'GET', // GET or POST or PUT or DELETE
      // verb
      url: "/bin/mr/controller?q=iechange",
      data: $("#myform").serialize(),
      // type
      // sent
      // to
      // server
      dataType: 'json', // Expected data format from
      // server
      processdata: true, // True or False
      success: function(data) { // On Successfull

        alert('call success');
        console.log(data);



      },
      error: function(msg) { // When Service call
        alert('call fail'); // fails

      }
    });



  });


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform" >
<input name="img" id="image1" type="file" accept="image/*">
</form>

Answer 1

您需要在页面加载时绑定(bind)您的 submit 事件处理程序。

目前，您正在尝试在手动触发提交后绑定(bind)它......这已经太晚了，因为到那时事件已经消失了。

将绑定(bind) submit 事件的代码移至change 事件的事件处理程序外部。