根据ajax响应提交表单

Posted 2023-03-14

【中文标题】根据ajax响应提交表单

【英文标题】：Submit form depending on ajax response

【发布时间】：2014-04-28 19:47:00

【问题描述】：

我创建了一个表单。在提交表单时，我发出一个 ajax 请求，告诉我数据是否有效。我想要做的是，如果 ajax 响应告诉数据是有效的，那么它应该提交表单，但如果数据无效，那么它不应该提交表单。

$('#agentLogin').submit(function(ev)
       ev.preventDefault();
       var username=$('#agentEmail').val();
       var password=$('#agentPassword').val();
       $.ajax(
           url: '<?php echo $this->createAbsoluteUrl('site/agentLogin'); ?>',
           type: 'POST',
           data: 
               email: username,
               pwd: password
           ,
           success: function(data)
               if(data === 'invalid')
                   $('#agentLoginStatus').html('Invalid Username and password');
               else if(data === 'deactivated')
                   $('#agentLoginStatus').html('Account is deactivated');
               else if(data === 'valid')
                   // submit form here
               
           
       );
    );

问题：-当数据无效时不提交表单。但如果数据有效，那么它也不会提交表单。我该如何解决这个问题？

已经尝试过：-

$(this).submit();
return true;

【问题讨论】：

url: '<?php echo $this->createAbsoluteUrl('site/agentLogin'); ?>', 这是正确的吗？查看报价。

@jai 是的，它是正确的。我得到了很好的 ajax 响应

尝试使用原生的this.submit()而不是jQuery的$(this).submit()继续提交。

@JonathanLonowski 不工作先生

@Letmesee 在.submit(function) 中保存对<form> 的引用——var form = this;。然后，使用原生提交——form.submit()。 this 内的 $.ajax() 回调不会是 <form>。

【参考方案1】：

试试这个方法：

$('#agentLogin').submit(function (ev, submit) 

    if (!submit) 

        ev.preventDefault();

        var username = $('#agentEmail').val(),
            password = $('#agentPassword').val(),
            $form = $(this);

        $.ajax(
            url: 'url',
            type: 'POST',
            data: 
                email: username,
                pwd: password
            ,
            success: function (data) 
                if (data === 'invalid') 
                    $('#agentLoginStatus').html('Invalid Username and password');
                
                else if (data === 'deactivated') 
                    $('#agentLoginStatus').html('Account is deactivated');
                
                else if (data === 'valid') 
                    $form.trigger('submit', [true]);
                
            
        );
    
);

它不适用于您的原始代码的原因是，当您尝试调用 $(this).submit() 时，它会触发相同的事件处理程序，该处理程序会再次尝试使用 AJAX 请求进行验证，并且从未真正提交过表单。要修复它，您需要以某种方式告诉事件处理程序，当您手动提交表单时，您不想再运行验证。我为此传递了额外的参数：

$form.trigger('submit', [true]);

【讨论】：

这里使用的变量if (!submit) 怎么样？它设置在哪里？

@MuraliMurugesan $form.trigger('submit', [true]);。 trigger的第二个参数。

谢谢先生。它解决了我的问题，让我摆脱了很多挫折。非常感谢

【参考方案2】：

您可以继续使用native .submit() method 提交<form>，这应该是only start the default action 之前被阻止的without rerunning event bindings。

submit() 方法在调用时，必须 submit 来自 form 元素本身的 form 元素，并设置 从submit() 方法提交 标志。

5) 如果从submit() 方法提交 标志未设置，则fire a simple event 冒泡并可取消，命名为submit，在form . [...]

不过，您还需要存储对 <form> 的引用，因为 this 可以而且通常会在 functions 之间有所不同，包括嵌入式回调。

$('#agentLogin').submit(function(ev)
   ev.preventDefault();
   var form = this; // store reference as `this` can change between `function`s
   var username=$('#agentEmail').val();
   var password=$('#agentPassword').val();
   $.ajax(
       url: '<?php echo $this->createAbsoluteUrl('site/agentLogin'); ?>',
       type: 'POST',
       data: 
           email: username,
           pwd: password
       ,
       success: function(data)
           if(data === 'invalid')
               $('#agentLoginStatus').html('Invalid Username and password');
           else if(data === 'deactivated')
               $('#agentLoginStatus').html('Account is deactivated');
           else if(data === 'valid')
               form.submit(); // use native method to counter `preventDefault()`
           
       
   );
);

【参考方案3】：

$('#agentLogin').submit(function(ev)
   var myForm=$(this);
   if(myForm.data("action")=="submit")
    return true;
   
   ev.preventDefault();
   var username=$('#agentEmail').val();
   var password=$('#agentPassword').val();
    $.ajax(
       url: '<?php echo $this->createAbsoluteUrl('site/agentLogin'); ?>',
       type: 'POST',
       data: 
           email: username,
           pwd: password
       ,
    success: function(data)
           if(data === 'invalid')
               $('#agentLoginStatus').html('Invalid Username and password');
               return false;
           else if(data === 'deactivated')
               $('#agentLoginStatus').html('Account is deactivated');
           else if(data === 'valid')
               myForm.data("action","submit");
               myForm.submit();
           
       

 );

【讨论】：

@Letmesee，我添加了一些标志，基于它你需要提交。检查更新的答案

它提交了表单，但当数据无效时它也提交了

@Letmesee，在无效条件下添加了return false

【参考方案4】：

这里我们可以使用ajax的submithandler。原因是提交处理程序与提交按钮一起使用并验证数据。..