Question

我制作了一个模态框，其中包含用于注册新闻通讯的表单。当一个人签约时，我希望模式框中的内容更改为感谢消息。

我不太确定该怎么做？注册成功后，我已经设置了重定向，但是重定向到了另一个页面，我认为这确实给用户带来了糟糕的体验。

可以在此处看到一个有效的示例：Sign up form

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Signuo testpage</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


</head>
<body>

<div class="mk row">
  <a href="#">
      <div class="col-sm-12 margin_bottom">
          <div class="hover11 column">
              <figure>
                  <a href="#" data-toggle="modal" data-target="#nyhedsbrev-tilmelding">
                    <img src="https://www.votewalton.com/portals/walton/Images/button_newsletter.png" alt="Signuo for our newsletter" class="img-responsive"></img>
                  </a>
              </figure>
          </div>
          <div class="modal fade" id="nyhedsbrev-tilmelding" role="dialog">
              <div class="modal-dialog">
                  <div class="modal-content">
                      <div class="modal-body">
                          <div id="mc_embed_signup">
                              <form action="https://testing.us16.list-manage.com/subscribe/post?u=c9e771e6f8adb066a0713eb0a&amp;id=6e9f7d0e57" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" >
                                  <div id="mc_embed_signup_scroll">
                                      <h2>Signup for our newsletter</h2>
                                      <p>Every second week we send out a newsletter with tips and trick, good offers for you</p>
                                      <div class="mc-field-group">
                                          <label for="mce-FNAME">Name </label>
                                          <input type="text" value="" name="FNAME" class="" id="mce-FNAME"></input>
                                      </div>
                                      <div class="mc-field-group">
                                          <label for="mce-EMAIL">Emailadress  <span class="asterisk">*</span></label>
                                          <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL"></input>
                                      </div>
                                      <div class="mc-field-group input-group" style="display:none;">
                                          <strong>Lande grupper</strong>
                                          <ul>
                                              <li>
                                                  <input type="checkbox" value="1" name="group[7][1]" id="mce-group[7]-7-0"></input>
                                                  <label for="mce-group[7]-7-0">DK</label>
                                              </li>
                                          </ul>
                                      </div>
                                      <div style="position: absolute; left: -5000px;" aria-hidden="true">
                                          <input type="text" name="b_c9e771e6f8adb066a0713eb0a_6e9f7d0e57" tabindex="-1"></input>
                                      </div>
                                      <div class="clear">
                                          <input type="submit" value="Tilmeld" name="subscribe" id="mc-embedded-subscribe" class="button btn btn-success"></input>
                                      </div>
                                  </div>
                              </form>
                          </div>
                      </div>
                      <div class="modal-footer" style="text-align: left;">
                          <span style="font-size: 10px;">
                          We do not give your information for third part
                          </span>
                      </div>
                  </div>
              </div>
          </div>
          <div class="inner-wrapper bottom-left"></div>
      </div>
  </a>
</div>
</body>
</html>

Answer 1

您需要使用ajax发送请求，从标记中删除操作，并使用jQuery，AngularJS或类似的JavaScript框架将请求发送到服务器。

在成功方法中，您可以隐藏/显示面板以删除控件并显示感谢消息。

@Configuration
@EnableSwagger2
@Profile({"dev","qa"})
public class SwaggerConfig {
   // your swagger configuration
}

在模式框内而不是其他页面上重定向

1 个答案: