翻新新内容

时间:2013-09-25 20:32:43

标签: php jquery ajax load flip

我想根据提交的代码创建一个以不同内容加载的登录名。它很简单:

<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 flip effect with Flippy的lib。为了使它适用于我的代码,它只需要一个容量为 flipbox-container 的容器。在此容器中,将翻转类 flipbox 的内容。

我已经在我网站的其他网站上试过了:

   $(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文件时看到内容。除此之外,我看起来有点混乱。

1 个答案:

答案 0 :(得分:0)

ajax调用的结果传递给success回调:

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

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

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