Question

因此，在我的网站上，用户可以对两件事发表评论：用户的个人资料和应用。代码在PHP中运行良好但我们决定添加Ajax以使其更时尚。评论只是淡入页面并且工作正常。

我决定要创建一个函数，这样我就不必在不同的文件中管理2个（或更多）代码块。现在，两个页面的代码如下（不在单独的.js文件中，它们写在页面的head标签内。）：

// App page
$("input#comment_submit").click(function() {
var comment = $("#comment_box").val();
$.ajax({
type: "POST",
url: "app.php?id=<?php echo $id; ?>",
data: {comment: comment},
success: function() {
$("input#comment_submit").attr("disabled", "disabled").val("Comment Submitted!");
$("textarea#comment_box").attr("disabled", "disabled")
$("#comments").prepend("<div class=\"comment new\"></div>");
$(".new").prepend("<a href=\"profile.php?username=<?php echo $_SESSION['username']; ?>\" class=\"commentname\"><?php echo $_SESSION['username']; ?></a><p class=\"commentdate\"><?php echo date("M. d, Y", time()) ?> - <?php echo date("g:i A", time()); ?></p><p class=\"commentpost\">" + comment + "</p>").hide().fadeIn(1000);
}
});
return false;
});

接下来，

// Profile page
$("input#comment_submit").click(function() {
var comment = $("#comment_box").val();
$.ajax({
type: "POST",
url: "profile.php?username=<?php echo $user; ?>",
data: {comment: comment},
success: function() {
$("input#comment_submit").attr("disabled", "disabled").val("Comment Submitted!");
$("textarea#comment_box").attr("disabled", "disabled")
$("#comments").prepend("<div class=\"comment new\"></div>");
$(".new").prepend("<a href=\"profile.php?username=<?php echo $_SESSION['username']; ?>\" class=\"commentname\"><?php echo $_SESSION['username']; ?></a><p class=\"commentdate\"><?php echo date("M. d, Y", time()) ?> - <?php echo date("g:i A", time()); ?></p><p class=\"commentpost\">" + comment + "</p>").hide().fadeIn(1000);
}
});
return false;
});

现在，在每个页面上，框名称将始终相同（comment_box和comment_submit），那么你们怎么看待这个函数（注意，postComment在页面的head标签中。）：

// On the page, (profile.php)
$(function() {
    $("input#comment_submit").click(function() {
        postComment("profile", "<?php echo $user ?>", "<?php echo $_SESSION['username']; ?>", "<?php echo date("M. d, Y", time()) ?>", "<?php echo date("g:i A", time()); ?>");
    });
});

导致此功能（存储在名为functions.js的单独文件中）：

function postComment(page, argvalue, username, date, time) {
    if (page == "app") { var arg = "id"; }
    if (page == "profile") { var arg = "username"; }
    var comment = $("#comment_box").val();

    $.ajax({
        type: "POST",
        url: page + ".php?" + arg + "=" + argvalue,
        data: {comment: comment},
        success: function() {
            $("textarea#comment_box").attr("disabled", "disabled")
            $("input#comment_submit").attr("disabled", "disabled").val("Comment Submitted!");
            $("#comments").prepend("<div class=\"comment new\"></div>");
            $(".new").prepend("<a href=\"" + page + ".php?" + arg + "=" + username + "\" class=\"commentname\">" + username + "</a><p class=\"commentdate\">" + date + " - " + time + "</p><p class=\"commentpost\">" + nl2br(comment) + "</p>").hide().fadeIn(1000);
        }
    });
    return false;
}

这就是我想出来的！所以，一些问题：当我点击按钮时页面刷新。修复此问题的方法是将函数返回false并将其置于按钮单击中。有什么方法可以将它保留在函数中并具有相同的效果吗？

但我真正的问题是： jQuery熟悉的任何编码器能告诉我技术，编码实践或更有效/优雅地编写代码的方法吗？我在PHP中做了很多工作，但我知道回应日期可能不是获得日期和时间的最有效方法。

因此，非常欢迎任何可以帮助我简化此功能并使我更好地编写jQuery的技巧！

Answer 1

我首先会让我的表单包含所有数据，这样如果用户没有javascript，页面仍可以正常工作：

<form action="profile.php" id="comment_form">
    <input type="hidden" name="username" value="<?php echo $user; ?>" />
    <textarea id="comment_box" name="comment"></textarea>
    <input type="submit" id="comment_submit" value="Submit" />
</form>

<form action="app.php" id="comment_form">
    <input type="hidden" name="id" value="<?php echo $id; ?>" />
    <textarea id="comment_box" name="comment"></textarea>
    <input type="submit" id="comment_submit" value="Submit" />
</form>

然后你的javascript可以是：

$('#comment_form').submit(function(e){
    e.preventDefault();
    var form = $(this),
        submit = $("#comment_submit").attr("disabled", "disabled");
    $("#comment_box").attr("disabled", "disabled");
    $.ajax({
        type: "POST",
        url: form.attr('action'),
        data: form.serialize(),
        success: function(comment) {
            submit.val("Comment Submitted!");
            $("<div class=\"comment new\"></div>").prependTo("#comments")
                .prepend(comment)
                .hide()
                .fadeIn(1000);
        }
    });
});

我希望我的ajax请求提交注释返回html格式化的注释，而不是在javascript中构建它，这样我就不必在两个地方更新模板了。我也在表单上使用提交事件而不是按钮上的点击事件，因为它通过其他方式缓存表单，然后单击按钮。

Answer 2

为了解决您的首要问题，我建议您从本地图书馆获取jQuery In Action的副本以及一本优秀的JavaScript书籍（在SO中搜索以找到一对）。

关于我的jQuery Ajax函数的建议

2 个答案: