0

我想创建一个登录，根据提交的代码加载不同的内容。它像这样简单：

<button type="submit" value="BSend" class="l-button">code</button>
<input type="text" name="bewerbung" class="l-input">

    Example:
    CODE01 = GET CONTENT 01
    CODE02 = GET CONTENT 02
    CODE03 = GET CONTENT 03
    CODE04 = GET CONTENT 04

为了使加载更有效，我想使用一个名为jQuery 翻转效果的库和 Flippy。为了让它在我的代码上工作，它只需要一个带有类flipbox-container 的容器。在这个容器中，具有类翻转框的内容将被翻转。

我已经在我网站的另一个站点上进行了尝试：

   $(document).on('submit', 'form.ajax', function (e) {
      e.preventDefault();
      var that = $(this),
         url = that.attr('action'),
         type = that.attr('method'),
         data = {};
      that.find('[name]').each(function (index, value) {
         var that = $(this),
            name = that.attr('name'),
            value = that.val();
         data[name] = value
      });
      $.ajax({
         url: url,
         type: type,
         data: data,
         success: function () {


            $(".flipbox").flippy({
               color_target: "",
               duration: "500",
               verso: "<article class=\"leftk\"><header><h3>Kontakt</h3></header><form action=\"submit.php\" method=\"post\" title=\"Kontaktformular\" class=\"ajax\"><label for=\"name\">Name</label><input name=\"name\" type=\"text\" title=\"Name\"><label for=\"email\">E-Mail-Adresse</label><input name=\"email\" type=\"text\" title=\"Email\"><label for=\"auswahl\">Präfix</label><label class=\"label\"> <select name=\"auswahl\" class=\"dropdown\"> <option selected value=\"Webdesign\">Anfrage Webdesign</option> <option value=\"Persoenliche\">Anfrage persönlich</option> <option value=\"Andere\">Alles andere</option> <option value=\"Spam\">Spam</option></select></label><textarea name=\"message\" title=\"Nachricht\"></textarea><button value=\"Send\" type=\"submit\" class=\"button\">Absenden</button></form></article><aside id=\"robot\"><ul class=\"social-icons clearfix\"> <li class=\"facebook\"><a href=\"#\">Facebook</a></li> <li class=\"google\"><a href=\"#\">Google</a></li> <li class=\"skype\"><a href=\"#\">Skype</a></li> <li class=\"twitter\"><a href=\"#\">Twitter</a></li> <li class=\"youtube\"><a href=\"#\">YouTube</a></li></ul></aside>",
               onFinish: function () {
                  $("#no-color").css("background-color", "transparent");
               }
            });
         }
      });

因此，无论出于何种原因，您都可以看到新的内容需要写在这个反面的东西中。

那么我将如何使用我的登录代码执行此操作？我不想在这个东西上写新的内容，因为每个人打开我的js文件时都可以看到内容。除此之外，它对我来说看起来有点乱。

4

1 回答 1

0

ajax 调用的结果被传递给success回调：

$.ajax({
  ...
  success: function(htmlAnswer) {
      $(".flipbox").flippy({
          ...
          verso: htmlAnswer,
          ...
      });
  }
});

发送提交请求时，您的服务器确实返回要显示的 html，对吗？

否则，您可能需要链接另一个ajax 调用来获取正确的内容......

于 2013-09-25T22:04:05.433 回答