Question

我正在尝试在twig中嵌入自定义mailchimp表单，以便当用户单击submit按钮时，来自mailchimp的响应将替换div中的内容。

我正在使用Gantry5并且我已经成功实现了表单，当用户单击提交按钮时，我从mailchimp服务器获得响应。

我遇到的问题是，不是替换块中的内容，而是刷新页面，然后以原始格式显示json对象。

twig位于以下位置：

{% extends '@nucleus/partials/particle.html.twig' %}

{% block particle %}

  {% if particle.title %}<h2 class="g-title">{{ particle.title|raw }}</h2>{% endif %}

  {% if particle.headtext %}<div class="g-newsletter-headtext">{{ particle.headtext|raw }}</div>{% endif %}

    <div id="mc_embed_signup" class="g-newsletter {{ particle.class|e }}">

      <form class="g-newsletter-form validate" id="mailchimp-subscribe" action="//{{ particle.baseurl|e }}" method="POST">

        <input type="hidden" name="u" value="{{ particle.uuid|e }}">
        <input type="hidden" name="id" value="{{ particle.lid|e }}">

        <div id="mergeTable" class="mergeTable">
          <label for="MERGE0">Email Address <span class="req asterisk">*</span></label>
          <input class="g-newsletter-inputbox required email" type="email" autocapitalize="off" autocorrect="off" name="MERGE0" id="MERGE0" size="25" value="" placeholder="{{ particle.inputboxtext|raw }}">
          <input type="submit" value="{{ particle.buttontext|raw }}" name="submit" id="mc-embedded-subscribe" class="g-newsletter-button button {{ particle.buttonclass|e }}">
        </div>

        <input type="hidden" name="ht" value="{{ particle.htvalue|raw }}">
        <input type="hidden" name="mc_signupsource" value="hosted">

      </form>
    </div>

<script src="/javascripts/application.js" type="text/javascript" charset="utf-8" async defer>
  $('#mailchimp-subscribe').submit(function(e) {
    var $this = $(this);
    $.ajax({
        type: "GET", // GET & url for json slightly different
        url: "//{{ particle.baseurl|e }}-json?c=?",
        data: $this.serialize(),
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        error: function(err) { alert("Could not connect to the registration server."); },
        success: function(data) {
            if (data.result != "success") {
                // Something went wrong, parse data.msg string and display message
            } else {
                // It worked, so hide form and display thank-you message.
            }
        }
    });
    return false;
  });
</script>
{% endblock %}

我从服务器得到的回复如下：

{"result":"success","msg":"Almost finished... We need to confirm your email address. To complete the subscription process, please click the link in the email we just sent you."}

我想要做的是用格式化的响应替换块中的内容，或者在模式中打开格式化的响应。

我尝试将data-uk-lightbox data-lightbox-type="iframe"添加到button（我正在使用UIKit“并打开一个模态，但我只得到一个永不刷新的loading指标，即使是未格式化的json也是如此响应。

请告知。

Answer 1

你试过这个吗？

e.preventDefault()

将提交的块内容替换为json对象

1 个答案: