如何在 AJAX 中发布数据?

Posted

技术标签:

【中文标题】如何在 AJAX 中发布数据?【英文标题】:How to post data in AJAX? 【发布时间】:2020-09-23 07:31:05 【问题描述】:

我正在将一个简单的 Mailchimp 注册集成到我正在开发的网站中。

单击提交时,我希望表单使用 AJAX 将电子邮件地址发送到 Mailchimp,而不是被重定向。我对 AJAX 几乎一无所知。我找到了一个解决方案here,但它仍然不起作用。点击提交按钮仍然重定向,现在到一个未找到的页面 (404)。

这是我的 html

<!-- Begin Mailchimp Signup Form -->
            <div id="mc_embed_signup">
                <form action="https://outlook.us10.list-manage.com/subscribe/post-json?u=46fbb562c588c268ad0d3f670&amp;id=007ec4fc87&c=?" method="get" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" novalidate>
                    <div id="mc_embed_signup_scroll">

                        <div class="mc-field-group">
                            <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Enter your email adress">
                        </div>
                        <div id="mce-responses" class="clear">
                            <div class="response" id="mce-error-response" style="display:none"></div>
                            <div class="response" id="mce-success-response" style="display:none"></div>
                        </div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
                        <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_46fbb562c588c268ad0d3f670_007ec4fc87" tabindex="-1" value=""></div>
                        <div class="clear"><button type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"><img src="./assets/svg/arrow-white.svg" ></button></div>
                    </div>
                </form>
<!--End mc_embed_signup-->

还有 JS:

$(document).ready(function() 
        var $form = $('mc-embedded-subscribe');
        if ($form.length > 0) 
            $('button input[type="submit"]').bind('click', function(event) 
                if (event) event.preventDefault();
                register($form);
            );
        
    );

    function register($form) 
        $.ajax(
            type: $form.attr('method'),
            url: $form.attr('action'),
            data: $form.serialize(),
            cache: false,
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            error: function(err) 
                alert("Could not connect to the registration server. Please try again later.");
            ,
            success: function(data) 
                if (data.result != "success") 
                    // Something went wrong, do something to notify the user. maybe alert(data.msg);
                 else 
                    // It worked, carry on...
                
            
        );

【问题讨论】:

【参考方案1】:

关闭!

问题来自一个小错误:var $form = $('mc-embedded-subscribe');-> var $form = $('#mc-embedded-subscribe-form');

我错过了 # 并且没有选择正确的 ID。

【讨论】:

【参考方案2】:
<form action="https://outlook.us10.list-manage.com/subscribe/post-json?u=46fbb562c588c268ad0d3f670&amp;id=007ec4fc87&c=?" method="get" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" novalidate>

我认为HTML entity 设法潜入了您的网址(&amp;amp;&amp;amp;),因此您的网址应该是https://outlook.us10.list-manage.com/subscribe/post-json?u=46fbb562c588c268ad0d3f670&amp;id=007ec4fc87&amp;c=?

【讨论】:

感谢您的回答,但问题已经解决。它只是来自语法错误: $('mc-embedded-subscribe') -> $('#mc-embedded-subscribe-form') 它是 HTML 属性中的 URL。 HTML中的&amp;amp;字符应该表示为&amp;amp;!

以上是关于如何在 AJAX 中发布数据?的主要内容,如果未能解决你的问题,请参考以下文章

如何在jquery数据表的ajax调用中发布参数

如何在 Laravel 中使用 Ajax 调用将数据发布到数据库?

如何在 laravel 中使用 ajax 发布请求将图像插入数据库?

如何在单个 Ajax 调用中发送表单字符串数据和图像数据

如何在php中使用ajax响应数据

如何在codeigniter中使用ajax在mysql数据库中插入数据?