jQuery AJAX發佈不起作用

我目前正在學習jQuery，並決定做一個AJAX Post請求的彈出對話框。我已經編碼了，但實際上並沒有工作。它發送數據，但表單正常工作。我不想讓它正常工作，但我試圖將數據發佈到對話框中的同一頁面上。jQuery AJAX發佈不起作用

這是我的代碼。任何幫助將很好，謝謝！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>Welcome to WEBSITE</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
<style type="text/css"> 
body { 
    background: lightblue; 
    margin: 50px 0px; 
    padding: 0px; 
} 

#newlol { 
    width: 500px; 
    margin: 0px auto; 
    text-align: left; 
    padding: 15px; 
    border: 1px solid #000000; 
    background: #ffffff; 
    display: hidden; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
    z-index: 5000; 
    margin-top: 90px; 
} 

#new { 
    z-index: 3000; 
    width: 100%; 
    height: 100%; 
    opacity: 0.5; 
    filter: alpha(opacity=50); 
    -khtml-opacity: 0.5; 
    display: none; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
</style> 
<script type="text/javascript"> 
    function newpopup(message){ 
    $('#new').show(); 
    $('#newlol').fadeIn(2000); 
    if(message == "comment"){ 
     var message = $("#barney").html(); 
    } 
    $('#newlolmessage').html(message); 
    $('#searchForm').submit(function(event){ 
     event.preventDefault(); 
     searchresult = $('#searchForm').serialize(); 
     $.ajax({ 
     type: 'POST', 
     url: 'search.php', 
     data: searchresult, 
     dataType: 'json', 
     success: function(data){ 
      $('#newmessagelol').html(data.name); 
     } 
     }); 

     return false; 

    }); 



    $('#newlolclose').click(function(){ 
     $('#new').hide(); 
     $('#newlol').hide(); 
    }); 
    } 
</script> 
</head> 
<body onload="newpopup('comment');"> 
<div id="barney" style="display: none;"> 
<form action="search.php" id="searchForm"><input type="text" name="sally"><br /><input type="submit"></form> 
</div> 
<a href="#">clickmeeee</a> 
<div id="new"> 
<div id="newlol"> 
<div id="newlolmessage"> 
</div> 
<div id="newlolclose">Click to close.</div> 
</div> 
</div> 
</body> 
</html>

來源

2011-04-03 Joshua

如果您需要，您應該提供比「這是我的代碼」更多的信息期待幫助。你的意思是「表格正常工作」是什麼意思？ – Jon 2011-04-03 15:06:39

當我想讓它打開對話框中的頁面時，它正在更改頁面。說實話很難。 – Joshua 2011-04-03 15:08:05

你確定你沒有任何javascript錯誤嗎？聽起來好像提交事件從未被註冊過。 – 2011-04-03 15:29:21

它看起來像你只需要從類型更改按鈕=「提交」到類型=「按鈕」，並映射按鈕的單擊事件，而不是表單提交事件。只要給按鈕一個id就行了。即使你在代碼中有preventDefault（），我猜測表單已經被髮布。如果不需要，你也應該擺脫表單動作（你在javascript中做這個）。

來源

2011-04-04 07:33:06

這裏的問題是，你有兩種形式在那裏創建，並且可見的表單不是提交事件處理程序附加到的表單。如果你看到下面，#barney包含窗體，然後將其複製到#newlolmessage：

if(message == "comment"){ 
    var message = $("#barney").html(); 
} 
$('#newlolmessage').html(message);

當你做$('#searchForm').submit()，它重視的事件處理程序的形式第一次出現（這是隱藏的形式），如在jQuery的documentation指定：

如果多於一個元件已分配相同的ID，使用該ID將只選擇在DOM第一匹配元素的查詢。但這種行爲不應該依賴，然而，具有多個使用相同ID的元素的文檔無效。此

一種解決方案是，你可以這樣做：

$('#newlolmessage form').submit(...);

如果這是你要做的，不要忘記也改變線的內容：

searchresult = $('#searchForm').serialize();

納入：

searchresult = $(this).serialize();

來源

2011-04-04 08:35:38 htanata

jQuery AJAX發佈不起作用

回答

相關問題