發送Ajax表單重新加載頁面，而不是發送請求

Question

我很努力爲django創建一個留言框。現在一切正常，關於從數據庫中讀取數據，但是當我想添加新的留言時，整個頁面正在重新加載，並且從我能夠檢查的內容 - 表單的動作保持不變，並且沒有請求發送到功能在指定的網址下。我在這裏做錯了什麼？

HTML：

<div id="shoutbox">  
    <form method="post" id="form" class="shoutbox-form"> 
     <table> 
      <tr> 
       <td><label>User</label></td> 
       <td><input class="text user" id="nick" type="text" MAXLENGTH="25" /></td> 
      </tr> 
      <tr> 
       <td><label>Message</label></td> 
       <td><input class="text" id="shout" type="text" MAXLENGTH="255" /></td> 
      </tr> 
      <tr> 
       <td></td> 
       <td><input id="send-shout" type="submit" value="Dodaj!" /></td> 
      </tr> 
     </table> 
    </form> 
    <div id="shoutbox-container"> 
     <span class="clear"></span> 
     <div class="shoutbox"> 
      <div id="shoutbox-loading"><img src="css/images/loading.gif" alt="Loading..." /></div> 
      <ul> 
      </ul> 
     </div> 
    </div> 
</div> 

的jQuery：

$(document).ready(function(){ 
    var inputUser = $("#nick"); 
    var inputMessage = $("#shout"); 
    var loading = $("#shoutbox-loading"); 
    var messageList = $(".shoutbox > ul"); 

    function updateShoutbox(){ 
     messageList.hide(); 
     loading.fadeIn(); 
     $.ajax({ 
      type: "POST", 
      url: "/shouts/", 
      data: "action=refresh", 
      dataType: "json", 
      success: function(data){ 
       loading.fadeOut(); 
       var c = data["response"]; 
       messageList.html(c); 
       messageList.fadeIn(2000); 
      } 
     }); 
    } 
    function checkForm(){ 
     if(inputUser.attr("value") && inputMessage.attr("value")) 
      return true; 
     else 
      return false; 
    } 

    updateShoutbox(); 


    $("#shoutbox-form").submit(function(){ 
     if(checkForm()){ 
      var nick = inputUser.attr("value"); 
      var message = inputMessage.attr("value"); 
      $("#send-shout").attr({ disabled:true, value:"Sending..." }); 
      $("#send-shout").blur(); 
      $.ajax({ 
       type: "POST", 
       async: true, 
       url: "/shouts/", 
       data: "action=insert&user=" + nick + "&message=" + message, 
       //data: {"action" : "insert", "user": user, "message": message}, 
       dataType: "json", 
       complete: function(data){ 
        var c = data["response"]; 
        messageList.html(c); 
        updateShoutbox(); 
        $("#send-shout").attr({ disabled:false, value:"Shout!" }); 
       } 
      }); 
     } 
     else alert("All fields needed!"); 
     return false; 
    });  
}); 

我的網址：

url(r'^shouts/?$', "shoutbox"), 

和功能：

def shoutbox(request, user=None, message=None): 
    response = "" 
    if not request.POST.get("action"): 
     return HttpResponseRedirect('/') 
    else: 
     req = request.POST.get("action") 
     if req == "insert": 
      response = shoutbox_add(message, user) 
     elif req == "refresh": 
      response = shoutbox_get(20) 

    if request.is_ajax(): 
     result = simplejson.dumps({ 
      'response': response 
     }, cls=LazyEncoder) 
     return HttpResponse(result, mimetype='application/javascript') 

Answer 1

在窗體中有編號「形式」和階級「吼吼箱形」，這樣你的選擇應該是

$("#form").submit(function(){ 

或

$(".shoutbox-form").submit(function(){