提交一份表格，阿加星也

Submitting one form and Ajaxing too

本文关键字：表格 一份 提交      更新时间：2023-09-26

我使用以下代码提交表单并在aweber电子邮件列表中注册（addlead.pl 只是一个注册脚本）。以下是我想要完成的：用户提交表单 - 它会在 aweber 电子邮件列表中注册他（使用许多表单字段中的两个），因为它是注册表单，然后用户被重定向到包含表单中发布信息的正常表单操作 URL（所有字段）

$('#redeemform').submit(function() {
    var nameVal = $(this).find('input[name="custname"]').val();
    var emailVal = $(this).find('input[name="custemail"]').val();
    $.post('http://www.aweber.com/scripts/addlead.pl', {
        meta_web_form_id:   '1234',
        meta_split_id:      '',
        listname:           'listname',
        redirect:           '',
        meta_adtracking:    'newsletter',
        meta_message:       '1',
        meta_required:      'name,email',
        meta_tooltip:       '',
        email:              emailVal,
        name:               nameVal
    });

alert("thank you"); //<<magic line
 return true;
});

代码有效，但只能使用魔术行 - 警报"谢谢" - 没有这一行，它只会提交到默认表单操作而不注册到 aweber。我已经发现，如果我尝试提交表单（返回 true）并同时发送这样的 POST 请求 - 网站会刷新太快并接收其中一个请求。问题是我如何在没有警报/此行中某些固定延迟的情况下做到这一点。有没有某种花哨的命令？

  1. 绝对最好的解决方案是让你的表单请求在服务器上使用 CURL 或类似内容调用 weber

  2. 由于您不能将 Ajax 到另一个域，因此如果要在客户端上运行它，则需要更具创造力

所以在提交事件中，我们

  1. 将目标更改为隐藏帧2
  2. 将 AWEBER 表单提交到 Hiddenframe1
  3. 让主窗体提交到 hiddenframe2

现在你需要在你的主窗体的结果中返回类似的东西

<script>top.location.replace("thankyou.html");</script>

假设您的表单将请求发送到 HTML 来自的同一服务器

并有

$('#redeemform').on("submit",function() {
  $(this).prop("target","hiddenframe2");
  if (!$("#hiddenframe1")) {
     $("<iframe/>",{"id":"hiddenframe","name":"hiddenframe1"})
      .css("display","none")
      .appendTo("body");
  }
  if (!$("#hiddenframe2")) {
    $("<iframe/>",{"id":"hiddenframe","name":"hiddenframe2"})
     .css("display","none")
     .appendTo("body");
  }
  var nameVal = $(this).find('input[name="custname"]').val();
  var emailVal = $(this).find('input[name="custemail"]').val();
  $("<form>",{"action":"http://www.aweber.com/scripts/addlead.pl",
              "target":"hiddenFrame1"})
    .append("<input/>",{meta_web_form_id:   '1234'})
    .append("<input/>",{meta_split_id:      ''})
    .append("<input/>",{listname:           'listname'})
    .append("<input/>",{redirect:           ''})
    .append("<input/>",{meta_adtracking:    'newsletter'})
    .append("<input/>",{meta_message:       '1'})
    .append("<input/>",{meta_required:      'name,email'})
    .append("<input/>",{meta_tooltip:       ''})
    .append("<input/>",{email:              emailVal})
    .append("<input/>",{name:               nameVal})
    .submit();
  });

如果你能够将Ajax到aweber，这是可以做的事情，由于跨域脚本，你不能这样做。如果他们支持 JSONP/CORS，你也许可以做到

$('#redeemformButton').on("click",function() {
  var $form = $('#redeemform');
  var nameVal = $form.find('input[name="custname"]').val();
  var emailVal = $form.find('input[name="custemail"]').val();
  $.post('http://www.aweber.com/scripts/addlead.pl', {
    meta_web_form_id:   '1234',
    meta_split_id:      '',
    listname:           'listname',
    redirect:           '',
    meta_adtracking:    'newsletter',
    meta_message:       '1',
    meta_required:      'name,email',
    meta_tooltip:       '',
    email:              emailVal,
    name:               nameVal
  },function() {
     $form.submit();
  });
});

并有一个 

<input type="button" id="redeemformButton" value="Sign up and submit" />
相关文章：