jquery - 用 jQuery 和 Ajax 替换 div 以进行登录

Question

当登录成功时，我只是在寻找一个替换 div 的 jQuery 插件。我在谷歌搜索了很多次，但我找不到理想的插件，我想要什么。你们中有人知道我正在搜索的插件吗？作为一个例子，我展示：

<div class="box">
<form action="login.php" method="post">
Username:
<input type="text" name="username">
Password:
<input type="text" name="password">
<input type="submit" name="submit">
</form>
</div>

我要替换具有 class="box" 的 div 是：

<div class="box" style="display: none; height: 100px;"> <p><img src="/loading.gif" alt="" align="left" /><strong>Logged in...</strong></p></div>

还是要谢谢你的帮助！！注意：希望我在这里发布这个很好，因为我不知道哪个按钮仅用于发布 html 代码。

Answer 1

替换元素用户.replaceWith()

$('.box').replaceWith('<div class="box" style="display: none; height: 100px;"> <p><img src="/loading.gif" alt="" align="left" /><strong>Logged in...&hellip;</strong></p></div>')

Answer 2

听起来你需要ajax，试试jquery.from.js插件，你可以google一下

Answer 3

如果您真的在使用 ajax，正如您的标签和帖子所建议的那样，那么您可以在成功登录后动态加载 box 类的内容。

$('input[type="submit"]').on('click', function () {
    var formData = $('form').serialize();
    $.post('/login.php', { data: formData }, function () {
        $('.box').html('<div class="box" style="height: 100px;"> <p><img src="/loading.gif" alt="" align="left" /><strong>Logged in...&hellip;</strong></p></div>');
    });
});

更新：因为我复制/粘贴了您的 html，所以我在您想要注入的框 html 上留下了 display:none 属性。我删除了它，它工作得很好。我在这里创建了一个简化的 JSFiddle：http: //jsfiddle.net/qHT3p/。它被简化了，因为它实际上并不执行 $.post 但功能基本相同。