0

好吧，所以我遇到了一个我无法理解的非常奇怪的问题。我得到了这段 jquery 代码：

代码

<form>
  <input type="text" value="Search for a product" id="name" size="50">
  <input type="submit" id="submit" value="Search">
</form>

JAVASCRIPT代码

$("#loader").hide();
$(document).ready(function() {      
  $('#submit').live('click', function(event){
  $("#loader").ajaxStart(function(){
    $(this).show();
  });
  $("#loader").ajaxStop(function(){
    $(this).hide();
  });
  $('.product').remove();
  var query = $("#name").val(); 
  var searchQuery = query.replace(/ /g,"+");     
  $.get("APIsearch.php", {keyword: searchQuery}, function(data){
    $("#content").html(data);
  });  
}); 
});

顺便说一句，#loader 只是在 ajax 调用期间显示的加载 gif。

它很简单，当我单击 id 为“submit”的按钮时，它会从 id 为“name”的文本字段发送一个字符串，并在单词之间有空格的地方放置一个 +，然后将字符串发送到页面 APIsearch.php在那里我得到一些东西，然后加载到“contetn”div中。现在的问题是，当我在“输入”字段周围添加“表单”元素时，我的 ajaxt 不会返回任何内容，我需要有一个表单，因为我想开始使用 .submit ，所以我可以使用输入按钮作为选择提交文本。为什么它只在我删除这样的“表单”元素时才起作用？

<input type="text" value="Search for a product" id="name" size="50">
<input type="submit" id="submit" value="Search">
4

2 回答 2

0

当您提交表单时，整个页面都会被提交并在服务器上，您需要以 html 格式回复。正如您所提到的，您将无法仅更新 div 。

但是，您显示的表单元素没有指定“动作”。这表明您希望使用 Ajax 从服务器获取信息。对于 Ajax 响应，您可以对“输入”键进行编程以使其工作：

$("#name").keyup(function(event){
    if(event.keyCode == 13){
        $("#submit").click();
    }
});
于 2012-08-30T16:16:48.707 回答
0

您需要将此行添加到#submit click 方法的顶部。

event.preventDefault();

否则您的表单将提交，刷新页面，而不是执行您的 ajax 调用。

但是请记住，按 Enter 不会激活click提交按钮的事件。为此，您必须创建自己的按键处理程序来激活您的点击代码。

于 2012-08-30T16:19:51.503 回答