以 onsubmit 形式调用 ajax 函数 [重复]

Posted 2023-05-09

【中文标题】以 onsubmit 形式调用 ajax 函数 [重复]

【英文标题】：call ajax function in onsubmit form [duplicate]

【发布时间】：2021-06-03 00:06:29

【问题描述】：

我正在使用 html 表单并使用 php 提交此内容，但在提交之前我想使用 ajax 方法进行验证和检查响应，如果响应为 true，则返回 true，否则返回 false，因此在检查响应 html 表单之前不应该提交但是即使我使用了返回，也没有检查响应也可以提交提交

<form  method="POST" action="<?= base_url('save_details/')?>" onsubmit="return validate()">

<button type="submit">Add</button>
                                                
</form>

脚本

function validate()
$.ajax(
                type: "POST",
                url: "<?= base_url('validate_email') ?>",
                data: 
                    email: email,
                 
                ,
                dataType: 'json',
                success: function (response)
                
                  if (response.status) 
                        return true;
                     else 
                        return false;
                        // some message
                    
                
            );

【参考方案1】：

您遇到的第一个问题是您需要阻止标准表单提交，以便您的逻辑在允许发送请求之前等待 AJAX 请求。为此，您可以使用不显眼的事件处理程序。理想情况下，这些应该始终用于 HTML 中的内联 on* 事件属性，因为后者不再是好的做法。

第二个问题是由于异步请求，您的return 语句实际上不会提供对validate() 调用的响应。您需要使用异步模式以允许请求完成并根据响应执行操作。

最后，如果响应的状态符合您要求的规则，您可以提出 AJAX 请求并直接重新提交表单。试试这个：

<form method="POST" action="<?= base_url('save_details/')?>" data-emailvalidationurl="<?= base_url('validate_email') ?>">
  <!-- form form controls ... -->
  <button type="submit">Add</button>
</form>

jQuery($ => 
  $('form').on('submit', e => 
    e.preventDefault();
    $.ajax(
      type: "POST",
      url: e.target.dataset.emailvalidationurl,
      data:  email: email ,
      dataType: 'json',
      success: function(response) 
        if (response.status) 
          e.target.submit(); // rule met, allow form submission
         else 
          console.log('Denied...');
          // show message to user here...
        
      
    );
  );
);

另外请注意，我将电子邮件验证 URL 放在 HTML 的数据属性中。原因与on* 事件属性是不好的做法的原因相同——关注点分离。您应该在 .js 文件中查看除 javascript 之外的任何代码。

【讨论】：

我不能使用php方式提交表单

我不确定你的意思是什么，因为上面答案中的逻辑模仿了问题中的代码，只是修复了问题。

@Rory McCrossan 我只想使用 onsubmit="return validate()" 过程，如果为 true，则提交，否则返回 false，但在检查之前刷新/提交

不幸的是，您不能，正如我在答案中概述的那样。内联事件处理程序是不好的做法，您不能从异步调用返回响应。

如果我使用 async: "false",