如何使用 jquery（ajaxForm 插件）将表单提交到外部站点，但不重新加载到其他页面？

Question

我正在尝试创建一个表单，将客户的姓名和电子邮件地址发送到 icontact（电子邮件列表应用程序）。

icontact 的所有值都是正确的，如果我像往常一样提交表单，icontact 会回复说它添加了电子邮件地址。 成功消息将从 icontact 网站加载到新页面中。

我想要完成的是 ajax 将发送表单并在当前页面中返回成功消息，而不会将客户发送到新页面。

这是测试页面： http://www.skhot.com/测试/js-test/forms/index.php

Answer 1

对于那些无法通过 ajax 提交 icontact 表单的人，请尝试以下操作：

$.get("https://app.sandbox.icontact.com/icp/signup.php", { listid: "xxx", "specialid:xxx": "xxx",clientid : "xxx",fields_email: '[email protected]' }, function(){

                    alert('email added to the list :)');

            } );

将 xxx 替换为所需参数:)

Answer 2

就您而言，我认为：

preventDefault 将阻止提交按钮的正常行为，即遵循表单的操作 URL。

$('#frmSubmit').click(function(e) {
    e.preventDefault();
}

如果这不起作用，您可以尝试在 success 函数中返回 false：

$('#change-form')
   .jqTransform()
   .validate({
     submitHandler: function(form) {
       $(form).ajaxForm({
            success: function() {
                $('#change-form').hide();
                $('#frmWrap').append("<p class='thanks'>Thanks! Your request has been sent.</p>")
                return false;
                }
           });
         }
       }); 

编辑：您可以尝试的另一件事是在 onsubmit 事件中附加“return false”：

<form method=post action="https://app.icontact.com/icp/signup.php" name="icpsignup" accept-charset="UTF-8" id="change-form" onsubmit="return false;">

Answer 3

感谢他的遮阳篷，不过做了一些更改，这就是我所拥有的

---

<form>
 Email<br />
 <input type="text" name="email" id="email" class="text" /><br />

 First Name<br />
 <input type="text" name="fname" id="fname" class="text" /><br />

 Last Name<br />
 <input type="text" name="lname" id="lname" class="text" /><br />

 <input type="submit" id="submit" onclick="icontact_submit(); return false;"/>
</form>

<script type="text/javascript">
 function icontact_submit()
 {  
 //grab data from data
 var email = $('#email').val();
 var first_name = $('#fname').val();
 var last_name = $('#lname').val();

 //do some validation here

 //if validation pass do this
 $.post("https://app.icontact.com/icp/signup.php", { listid:"xxxxx", "specialid:xxxx":"xxxx", clientid:"xxxxx", fields_email:email, fields_fname:first_name, fields_lname:last_name }, function(){
  alert('email added to the list :)'); //this does not seem to work yet though
 });

 //else validation failed, do some of this

 }
</script>

Answer 4

一种选择是放弃具有提交按钮的表单，而是使用按钮并具有 JavaScript onClick 处理程序。 在 onClick 处理程序中，您应该使用 AJAX 在 POST 请求中发送表单中的数据，然后捕获响应。 当您收到响应时，使用 jQuery 修改您想要修改的任何 div 表单，或者执行重定向，或者其他任何操作。

我认为真正的问题是，默认情况下表单提交总是在表单标记的 action 属性中加载新页面，因此您不能依赖 HTML 表单提交方法。

可能还有其他更有效的方法（特别是使用 jQuery，我对此不太了解），但我提出的算法应该可行。

Answer 5

请参阅 jQuery Ajax。

$.ajax({
   type: "POST",
   url: "some.php",
   data: $("#idform").serialize(),
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
 })

;

Answer 6

Ajax 可以提交表单，但显示成功消息很棘手。

请参阅此 JQuery AJAX post 方法，

将类型参数设置为“html”。

您指定一个回调函数，该函数可以解析并显示来自 iContact 服务器的响应。

Answer 7

我把 icontact 排除在外，一切都按计划进行。 所以问题不在于代码，而在于 icontact 如何处理他们的 php.ini。 我必须与他们联系以获得真正的解决方案。

感谢大家的帮助和提供建议！ 如果没有你，我的故障排除就不可能成功。