Question

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

HTML CODE

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

JAVASCRIPT CODE

$("#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”的按钮时，它会从一个带有“name”的文本字段中发送一个字符串，并在字段之间有空格的位置放一个+，然后将字符串发送到页面APIsearch.php我得到一些东西，然后加载到“contetn”div。现在的问题是，当我在“输入”字段周围添加“form”元素时，我的ajaxt不会返回任何内容，我需要有一个表单，因为我想开始使用.submit，所以我可以使用enter按钮作为选择提交文本。为什么它只在我删除像这样的“表单”元素时才起作用？

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

Answer 1

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

但是，您显示的表单元素没有指定“action”。这表明您希望使用Ajax从服务器获取信息。对于Ajax响应，您可以将“enter”键编程为：

$("#name").keyup(function(event){
    if(event.keyCode == 13){
        $("#submit").click();
    }
});

Answer 2

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

event.preventDefault();

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

请注意，按Enter键不会激活提交按钮的click事件。要做到这一点，你必须创建自己的按键处理程序来激活你的点击代码。

Jquery提交不能使用我的ajax调用

2 个答案: