关于我的 jQuery Ajax 函数的建议

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 中进行搜索以找到一对）。