提交一个表单和Ajaxing

时间:2013-11-12 13:44:28

标签: javascript jquery forms aweber

我使用下面的代码提交表单 AND 在aweber电子邮件列表中注册(addlead.pl只是一个注册脚本)。 这是我想要完成的: 用户提交一个表单 - 它将他注册到一个电子邮件列表中(使用两个表单字段中的两个)作为注册表单,然后用户被重定向到正常的表单操作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 个答案:

答案 0 :(得分:3)

  1. 绝对最佳解决方案是让您的表单请求使用CURL或类似服务器调用weber

  2. 因为你不能将Ajax转移到另一个域,所以如果要在客户端上运行它,你需要更具创造性

  3. 所以在提交活动中我们

    1. 将目标更改为hiddenframe2
    2. 将aweber表单提交至hiddenframe1
    3. 让主表单提交到hiddenframe2
    4. 现在您需要在主窗体的结果中返回类似

      的内容
      <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,那么COULD已经做了什么,由于跨域脚本编写,您无法做到这一点。如果他们支持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" />