내 jQuery Ajax 함수에 대한 조언

Question

내 사이트에서 사용자는 사용자 프로필과 앱의 2 가지에 대한 의견을 게시 할 수 있습니다. 이 코드는 PHP에서 잘 작동하지만 Ajax를 추가하여보다 세련되게 만들었습니다. 댓글은 페이지에 사라지고 잘 작동합니다.

다른 파일에서 코드 블록을 2 개 (또는 그 이상) 관리하지 않아도되도록 기능을 만들고 싶다고 결심했습니다. 두 페이지에 다음과 같이 지금, 코드는 (별도의 .js 파일에, 그들이 페이지의 헤드 태그 안에 작성하고 없습니다.) :

// 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; 
}); 

// 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()); ?>"); 
    }); 
}); 

: 이제

, 각 페이지에 상자의 이름은 항상 (comment_box 및 comment_submit) 그래서 너희들이 (.의 postComment이 페이지의 head 태그에있는 주)이 기능에 대해 어떻게 생각하십니까 동일합니다

이는 th로 연결됩니다. 함수입니다 (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

내가 먼저 사용자가 자바 스크립트 페이지가없는 경우 여전히 작동 할 수 있도록 내 형태의 모든 데이터를 만들 것 내가 코멘트를 제출 내 아약스 요청을 HTML로 formated 코멘트를 반환하지 않을 자바 스크립트에서 그래서 내가 두 장소에서 템플릿을 업데이 트하지 않아도 빌드 할 수 있습니다. 또한 다른 방법으로 제출 된 양식을 캐시 한 다음 단추를 클릭하기 때문에 양식의 제출 이벤트 대신 단추의 클릭 이벤트가 사용됩니다.

Answer 2

큰 문제를 해결하려면 지역 도서관에서 jQuery In Action의 복사본을 얻으시고 좋은 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> 

이 그런 다음 자바 스크립트가 될 수 있습니다 :

$('#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); 
     } 
    }); 
});