Question

我正在使用第三方购物车将注册表单发送到.cgi脚本。

我想通过jQuery $ .get（）函数调用将该表单中的信息发送给我和客户。

$ .get调用registration.mail.php脚本。

问题是表单提交似乎在ajax调用完成之前取消了ajax调用。

我可以想到一些不优雅的解决方案，我已经决定，因为我要旅行，使用计数器并让用户点击“注册”两次。这个解决方案显然伤害了我的灵魂。

这是Javascript，它存在于页脚中：

<script type="text/javascript">
var getsuccess = false;
$(document).ready(function() {

    $('form#registerWholesale').bind('submit', function() {

        $email = $('#email').val();
        $username = $('#contactname').val();
        $company = $('#company').val();
        $phone = $('#billphone1').val();

        $message = "A new customer has registered at the wholesale website. \n ";
        $message += "They have the username of: " + $username + ". \n";
        $message += "Their company is: " + $company + ". \n";
        $message += "Their email is: " + $email + ". \n";
        $message += "Their phone is: " + $phone + ". \n";
        $message += "Please help them ASAP. You can access the back end of the site at: http://location of website admin backend";

      $.get('/mail.php', {from: 'orders@OurCompany.com', message: $message, email: $email, username: $username, company: $company}, function(data, textStatus, xhr) {
         getsuccess = true;
      });

      if (getsuccess) {
        return true;
      }else{
        return false;
      }
    });


</script>

这是registration.mail.php代码。

<?php

//Vendor email (to us)
$to = "ouremail@OurCompany.com";
$subject = "URGENT--New Registration--URGENT";
$message = htmlentities($_GET['message'], ENT_QUOTES, 'UTF-8');
//$message = $_GET['message'];
$from = htmlentities($_GET['from'], ENT_QUOTES, 'UTF-8');
//$from = trim($_GET['from']);
$headers = "From: $from";
mail($to,$subject,$message,$headers);
//echo "Mail Sent.";



//Customer email (to them)
$to_cust = htmlentities($_GET['email'], ENT_QUOTES, 'UTF-8');
$subject_cust = 'OurCompany Online Wholesale Account Request Recieved';
$message_cust = "Thank you for you interest in OurCompany's new wholesale website. \n\n
We have received your request to create an account.   In order to obtain a wholesale account, a OurCompany representative must verify your account information and details by telephone.  OurCompany will contact you within 1 business day at the telephone number that we have on file, or feel free to give us a call at 1-xxx-xxx-xxxx anytime if you would like a more rapid approval.  \n\n

Thanks Again ~ OurCompany";

$headers_cust = "From: orders@OurCompany.com";
mail($to_cust,$subject_cust,$message_cust,$headers_cust)
?>

谢谢！

Answer 1

您的Ajax get处理程序设置异步回调。换句话说，这段代码：

  $.get('/mail.php', {from: 'orders@OurCompany.com', message: $message, email: $email, username: $username, company: $company}, function(data, textStatus, xhr) {
     getsuccess = true; <---- THIS
  });

只有在Ajax调用返回结果时才会调用“THIS”行。由于您要发送实际的电子邮件，可能需要很长时间。

所以，当你运行它时：

  if (getsuccess) {
    return true;
  }else{
    return false;
  }

Ajax调用从未完成，并且总是返回false。

您基本上应该决定是否要使用Ajax提交表单，并且只使用其中一个。如果要执行Ajax，则提交事件处理程序应始终返回False。

编辑：我没有意识到邮件发送和表单提交是两个不同的操作，还有两个单独的服务器调用。（你没有展示你的应用程序的其余部分，但这是我从其他答案得到的想法。）这是糟糕的设计，可能导致不一致的结果和糟糕的数据。您应该重新设计您的应用程序，以便在服务器端在同一位置处理这两件事，这样Web应用程序只会进行一次调用，无论这个调用是通过Ajax还是常规表单提交。

Answer 2

一种解决方案是将事件绑定到按钮单击，防止单击的默认操作，以便表单不提交，然后最终在.get回调中提交表单。

N.B正如Jaanus建议你应该真正看看应用程序设计并发送邮件并在同一个电话中保存购物车。如果发送电子邮件然后表单提交操作失败会发生什么？

$(document).ready(function() {

    $('#yourSubmitButton').click( function(ev) {

        //prevent form submission
        ev.preventDefault();

        $email = $('#email').val();
        $username = $('#contactname').val();
        $company = $('#company').val();
        $phone = $('#billphone1').val();

        $message = "A new customer has registered at the wholesale website. \n ";
        $message += "They have the username of: " + $username + ". \n";
        $message += "Their company is: " + $company + ". \n";
        $message += "Their email is: " + $email + ". \n";
        $message += "Their phone is: " + $phone + ". \n";
        $message += "Please help them ASAP. You can access the back end of the site at: http://location of website admin backend";

        $.get('/mail.php', {from: 'orders@OurCompany.com', message: $message, email: $email, username: $username, company: $company}, function(data, textStatus, xhr) {

           //all is well, submit the form
           $('#yourForm').submit()

       });

    });

Answer 3

至少，不是让他们点击两次，为什么不让$ .get的成功回调再次为他们提交表单？

$('form#registerWholesale').bind('submit', function() {
     if (getsuccess) {
        return true;
     } else {
        $email = $('#email').val();
        $username = $('#contactname').val();
        $company = $('#company').val();
        $phone = $('#billphone1').val();

        $message = "A new customer has registered at the wholesale website. \n ";
        $message += "They have the username of: " + $username + ". \n";
        $message += "Their company is: " + $company + ". \n";
        $message += "Their email is: " + $email + ". \n";
        $message += "Their phone is: " + $phone + ". \n";
        $message += "Please help them ASAP. You can access the back end of the site at: http://location of website admin backend";

      $.get('/mail.php', {from: 'orders@OurCompany.com', message: $message, email: $email, username: $username, company: $company}, function(data, textStatus, xhr) {
         getsuccess = true;
         $('form#registerWholesale').submit();
      });
      return false;
    }
});

Answer 4

您是否尝试将ajax调用放入函数中，并挂钩表单的onSubmit？

onsubmit="myajaxcallFunc(); return true;"

这通常用于停止提交，返回false，但在这种情况下，它可能会执行您想要的操作。

Answer 5

在 AJAX请求之后，将向评估您传递给$.get的回调。由于AJAX是异步的，因此您的代码将继续在同一时间内进行评估，这意味着在调用AJAX回调之前，使用两个return语句的if条件将始终评估。

你想要做的是submit监听器总是返回false，而在AJAX回调中，你有条件地触发$('form#registerWholesale').submit();

当然这里也有一个设计考虑因素：您可能希望电子邮件发送和批发注册是原子的。如果发送邮件，你总是希望表单中提交的内容也会发生，对吧？在这种情况下，您希望将电子邮件发送到表单回发，或批量注册到AJAX回调，因此只需一步即可完成。

如何使用jQuery提交表单时完成$ .get（）

5 个答案: