Question

我正在学习jQuery，并决定做一个执行AJAX Post请求的小弹出对话框。我编写了它，但它实际上并没有工作。它发送数据，但表单正常工作。我不希望它正常工作，我试图在对话框中的同一页面上发布数据。

这是我的代码。任何帮助都会很好，谢谢！

<!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>

Answer 1

看起来您只需将按钮从type ='submit'更改为type ='button'并映射按钮的click事件而不是表单的submit事件。当然，只需给按钮一个id。即使你在代码中有preventDefault（），我猜这个表单正在发布。如果不需要，你也应该摆脱表单动作（你在javascript中这样做）。

Answer 2

这里的问题是你在那里创建了两个表单，而且可见的表单不是附加了submit事件处理程序的表单。如果您在下面看到，则#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();

jQuery AJAX Post无法正常工作

2 个答案: