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发布不起作用

回答

相关问题