javascript - 为什么这个表单不能使用 AJAX 提交？

Question

我正在尝试向 Campaign Monitor 提交表单。他们提供this通过 Ajax 进行 POST 的代码示例。

这是我的多步骤模式的代码。

          var next_step = false;
          var final_step = false;

          $('.next').on('click', function(e){
            e.preventDefault();

              if (next_step) {
                $('#step-1').slideUp(function(){
                  $('#step-2').slideDown(); 
                  $('.next').html('Submit');// Change button text to submit
                  final_step = true;
                 });    
              }
              next_step = true;

              if (final_step) {
                $('#myform').submit(function (e){
                  alert('submit started'); //This never fires unless I remove the preventDefault();
                  e.preventDefault();//But if I remove this, the page will refresh
                  $.getJSON(
                  this.action + "?callback=?",
                  $(this).serialize(),
                  function (data) {
                    if (data.Status === 400) {
                      alert('error');
                    } else {
                      alert('success');
                    }                        
                  })
                });
              }
          });

在表单的最后一步，我检查final_step是否为true，如果是，则继续并通过ajax提交表单。

问题是它什么也没做？但是，如果我从 $('#myform') 中删除 e.preventDefault(); ，它将正常发布表单并将您重定向到表单 URL .

我该如何解决这个问题？

Answer 1

您当前正在做的是连接 onsubmit 处理程序。不调用提交。

 $('#myform').submit(function (e){ }); 

...与...相同

<form action="#" method="post" onsubmit="return someFunction()">

...与...相同

$('#myForm').on('submit', function(e){});

您从未提交过表单。

您正在寻找的是使用 Ajax 将数据发布到服务器而不是提交表单。

你可以这样做:

$.ajax({
    type: "POST",
    url: "SomeUrl.aspx",
    data: dataString,
    success: function() {
      //display message back to user here
    }
  });

dataString 将替换为您发布的值。