为什么不使用AJAX提交此表单？

我正在尝试将表单提交给Campaign Monitor。他们提供this代码示例通过Ajax进行POST。为什么不使用AJAX提交此表单？

这是我的多步模态代码。

  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是否属实，如果是的话，继续前进，通过AJAX提交表单。

问题是它只是没有做任何事情？但是，如果我从$('#myform')中删除e.preventDefault();，它会按照正常的方式发布表单，并将您重定向到表单网址。

我该如何解决这个问题？

来源

2016-08-16 ProEvilz

删除'if（data.Status === 400）{'condition并检查响应存在 – Maxx

为什么使用'？callback =？'？你在使用JSONP吗？ – Maxx

'getJSON'将发出'GET'请求而不是POST。要发布POST请求，您可能想要使用$ .ajax或$ .post和JSONP参数化 – devnull69

你现在正在做的是连接一个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将与您发布的值来代替。

来源

2016-08-16 14:54:08 ListenFirst

此行：$('#myform').submit(function (e) {将您作为参数传递的函数注册为表单提交事件的处理程序，并且不会调用提交操作。我不知道这是否是问题，但我会建议preventDefault()外向导的流动

（如

$(document).ready(function() { 
    $("#form").submit(function(e) { 
     e.preventDefault(); 
    } 

});

）

然后里面的if(final_step)只是做post无担心形式。

另外，如果你不想使用它的功能，你不需要在表单中设置提交按钮。只需使用单击事件创建一个元素，该事件将发送数据而不是注册到表单的提交事件。

来源

2016-08-16 14:36:07 Glubus

我不使用类型submit的按钮输入，而是使用带有jquery'.on（'click'）;'的标准锚标签。根据你的解释，发布表单并使用'.on（'submit'）'来防止页面刷新而不是'.submit（）;'是不是更好？ – ProEvilz

您可以在提交表单的最后一页创建一个按钮，然后在表单的提交事件中完成所有发布内容。尽管认识到这个调用是关键的：'$（'＃myform'）。submit（function（e）{'（和范围的其余部分）不会调用表单的提交功能，注册给定函数作为处理程序的形式，我建议删除这一行，然后执行'if（final_step）'子句中传递给'$ .submit（）'的函数中的所有内容。重复声明事件'e'（在'.click（）'和'$ .submit（）'） – Glubus

另外，你说'alert（）'被调用，而你现在声称没有元素调用表单的'.submit（）'事件，所以这里也有些可疑的事情发生，因为如果没有提交'＃form'，'alert（）'不可能被执行。 – Glubus

我不确定，但我总是在点击元素后执行$('#form').submit()，并在其他位置捕获此事件（例如，通过$('#form').on('submit', function() { .. });）。

来源

2016-08-16 14:49:24 ventaquil

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

只是注册了一个事件处理程序，并将其附加到“myForm会”的“提交”事件，它实际上并没有引起提交。这意味着你希望每次提交表单时都要运行这个函数。这个处理函数应该是以外的你的$('.next').on('click', function(e){区块。就在它下面会做。

如果在$('.next').on('click', function(e){块内，你希望引起提交表格，写上：

$('#myform').submit();

这实际上将触发表单提交。

请参阅https://api.jquery.com/submit/以获取有关“submit”的不同方法签名实际执行的更多信息。

来源

2016-08-16 14:53:35 ADyson

为什么不使用AJAX提交此表单？

回答

相关问题