2

此表单适用于 Chrome、FF、Safari。POST通过作品,我的意思是当我点击提交按钮时,我可以看到请求被发送出去。

但是,在 IE 中作为 IE9 的开发人员工具中,我看不到任何POST请求。任何想法为什么?

这是一个临时站点的链接以帮助调试: http: //polar-ravine-7414.herokuapp.com/

重现错误的步骤:

  1. 加载页面
  2. 忽略弹窗
  3. 点击提交按钮
  4. POST我在 Chrome 开发工具和 FF Firebug 中看到了一个请求,但在 IE 开发者工具中没有

更新

根据 Eliran 的建议,我已经更新了选择器。但是,我仍然看不到在 IE 开发者工具网络栏中发出的 POST 请求。

更新2

我可能应该补充一点,该页面托管在与发布表单的服务器不同的服务器上。现在这可能是由于浏览器阻止了跨浏览器请求吗?

HTML

<form name="newsletter-subscription-en" id="form" action="https://abc.com/e/f2" method="post">

    <input type="hidden" name="elqFormName" value="newsletter-subscription-en">
    <input type="hidden" name="elqSiteID" value="1795">
    <input type="hidden" id="firstNameField" name="C_FirstName" value="">
    <input type="hidden" id="lastNameField" name="C_LastName" value="">

    <div id="step1" class="block">
        <div id="circle_1" class="circle">
            <div id="bullet_1" class="left white is-bold s24"><span class="bullet">1.</span></div>
        </div>
        <div id="bullet_spacer_1" class="left">&nbsp;</div>
        <div class="content">
            <p class="white is-regular s18">This is the email you will be subscribing with, if you'd like to change it, please enter here now.</p>
            <label id="label_email" class="white is-bold s22" for="emailField">YOUR EMAIL: </label>
            <input id="emailField" value="" name="C_EmailAddress" type="text">
        </div>
    </div>

    <div class="clearfix"></div>
    <div id="step2" class="block">
        <div id="circle_2" class="circle">
            <div id="bullet_2" class="left white is-bold s24"><span class="bullet">2.</span></div>
        </div>
        <div id="bullet_spacer_2" class="left">&nbsp;</div>
        <div class="content">
            <p class="white is-regular s18">Choose your newsletter:</p>
            <div id="checkbox_customer" class="left">
                <div class="box">
                    <input id="elqInput31" type="checkbox" name="elqInput31" checked="checked">
                    <label class="white is-bold s20" for="elqInput31">CUSTOMER</label>
                </div>
                <div class="arrow-up"></div>
                <div class="nip_box">
                    <span class="is-bold s12">Customer Newsletter</span>
                    <p class="is-light s115">
                    Monthly collective on latest industry news, technology pieces from experts, product resources, success examples and exclusive customer promotions.
                    </p>
                </div>
            </div>

            <div id="spacer" class="left">&nbsp; </div>
            <div id="checkbox_training" class="left">
                <div class="box">
                    <input id="elqInput32" type="checkbox" name="elqInput32" checked="checked">
                    <label class="white is-bold s20" for="elqInput32">TRAINING</label>
                </div>
                <div class="arrow-up"></div>
                <div class="nip_box">
                    <span class="is-bold s12">Training Newsletter</span>
                    <p class="is-light s115">
                    Exclusive newsletter for current and aspiring IT professionals. Updated with training tips and tricks, industry news, free online training resources and latest information on available certification and training.
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="clearfix"></div>
        <div id="step3" class="block">
        <div id="circle_3" class="circle">
            <div id="bullet_3" class="left white is-bold s24"><span class="bullet">3.</span></div>
        </div>
        <div id="bullet_spacer_3" class="left">&nbsp;</div>
        <div class="content">
            <div id="submit" class="box right">
                <span class="right white is-bold s24">SIGN-UP</span>
            </div>
        </div>
    </div>
    <div class="clearfix"></div>
</form>

JavaScript

根据 Eliran 的回答更新

$(document).ready(function() {

    $('#submit').click(function () {

        //Get the data from all the fields
        var email = $('input[name=C_EmailAddress]');
        var trainingNewsletter = $('input[name=elqInput31]');
        var customerNewsletter = $('input[name=elqInput32]');
        var regExp = /^[^@]+@[^@]+.[a-z]{2,}$/i;
        var validationPass = true;
        var form = $('#redhat_form');

        if (validationPass === true) {
            $.post(form.attr('action'), form.serialize(), function(data) {});
            $('#alert').removeClass('hide');
            $('#alert').removeClass('alert-success');
            $('#alert').removeClass('alert-error');
            $('#alert_text').remove();
            $('#alert').addClass('alert-success');
            $('#alert').append('<p id="alert_text" class="is-regular s16">Thank you for subscribing.</p>');
            $('#emailField').val("");
            //window.location='http://afternoon-leaf-7565.herokuapp.com/thankyou/';
            return false;
        }
    });
});
4

5 回答 5

2

好的,所以您面临的问题是 AJAX 调用在 IE 中没有成功返回,而是抛出错误。首先,您需要正确编码 AJAX 调用。这是 AJAX 调用的更新代码。

$.ajax({
    url: form.attr('action'),
    data: form.serialize(),
    success: function(data){
        alert('success');
    },
    error: function(xhr, textStatus, errorThrown){
        alert(errorThrown);
    },
    dataType: 'json'
});

现在它在 IE 中引发错误的原因是“无传输”。发生这种情况是因为跨域 AJAX 调用。这是 jQuery 的一个已知错误。jQuery 团队“没有计划在核心中支持这一点,并且更适合作为插件。” IE 不使用 XMLHttpRequest,而是使用一个名为 XDomainRequest 的替代对象。

我找到了一个 javascript 代码来处理这个问题。代码在这里

您需要将代码复制到文件中并将其用作页面的外部源。或者,您可以直接将其嵌入页面头部。这里的工作示例。

于 2012-09-17T20:17:18.643 回答
1

实际上,它也不适用于 chrome

您的属性选择器会产生错误:

未捕获的错误:语法错误,无法识别的表达式:=[name=elqInput31]

修复它,一切都会好起来的。

jsFiddle 上的工作演示

于 2012-09-08T01:38:23.757 回答
0
  1. 您是否在 chrome 开发工具中看到 POST 请求或尝试发送 POST 请求?在我的 chrome 中,我看到了尝试。阅读有关跨域策略的信息。您的表单操作 url 和您的页面位于不同的域中。而且您不能进行跨域 ajax 请求(但有 hack 及其名称 JSONP)。因此,考虑将表单发送到同一域或使用 JSONP,在引擎盖下将发送 GET 请求。
  2. 我的建议是改用 $.post 更灵活的 $.ajax 并使用错误回调函数。

    $.ajax({ 类型:'POST', 网址:form.attr('action'), 数据:form.serialize(), 成功:函数(p,p1){ }, 错误:错误(jqXHR,textStatus,errorThrown){
    alert("发送请求失败。textStatus=" + textStatus); }

    });

http://api.jquery.com/jQuery.ajax/ (页面也包含一些关于跨域请求的信息)

于 2012-09-12T18:44:03.373 回答
0

您有两行错误:

    var trainingNewsletter = $('input=[name=elqInput31]');
    var customerNewsletter = $('input=[name=elqInput32]');

实际上应该是:

    var trainingNewsletter = $('input[name=elqInput31]');
    var customerNewsletter = $('input[name=elqInput32]');

我不确定这是否会完全解决问题,但可以肯定的是其中的一部分。

于 2012-09-11T03:29:46.197 回答
0

您是否有理由使用 div 和 span 而不是 input type="submit" 或 button type="submit?

您是否有理由监听提交按钮的点击而不是监听表单提交?$("#form").on("提交", function () {etc.etc});

于 2012-09-12T15:22:40.457 回答