Question

我试图在用户输入而没有页面加载的情况下调用ajax（），但是当用户在输入框中输入时，它会调用此ajax方法。我的输入框如下：

<input type="text" name="search" id="txt_name"  placeholder="Keyword"/>

Jquery./ Ajax代码;

$(document).ready(function(){
  $("#txt_name").keyup(function(){

    var value = $('#txt_name').val();

    $.ajax({
        type:"post",
        url:"doSearchEnter.php",
        data :{
                'key' : value               
            },          
        success:function(res){
            $('#showSearchResult').html(res);
            }
       });

  });
});

用户在没有页面加载的情况下进入输入框后如何调用此ajax（）？

更新：

$('#txt_name').on('click', 'submit', function(e) {
    e.preventDefault();
    $.ajax({
        type:"post",
        url:"doSearchEnter.php",
        data :{
                'key' : value               
            },          
        success:function(res){
            $('#showSearchResult').html(res);
            }
       });
});

更新2：

<form>     
<input type="button" name="given_name" value="Given Name" class="search_submit" id="given_name"/>
<input type="button" name="company_name" value="Company Name" class="search_submit" id="company_name"/>
<input type="button" name="cdid" value="ID" class="search_submit" id="cdid"/>
<input type="text" name="search" id="txt_name"  placeholder="Keyword"/>    
</form>

$('form').on('click', 'submit', function(e){
    e.preventDefault();
});

$('form').on('keyup', '#txt_name', function(e){
    if(e.keyCode == '13'){
        $.ajax({
            type:"post",
            url:"doSearchEnter.php",
            data :{
                    'key' : value               
                },          
            success:function(res){
                $('#showSearchResult').html(res);
                }
           });
    }
});

Answer 1

你的问题有点不清楚，但我想你想在用户按下输入框上的回车键时执行ajax？如果是这样，您可以检查键盘处理程序中按下的键，并检查它是否是回车键。

  $("#txt_name").keyup(function(event){
    if (event.keyCode == '13') {
      //...
    }
  });

Answer 2

使用提交按钮将输入放在表单内应该可以解决问题。当用户按下输入表单时应该提交。您所要做的就是使用

$('form').on('click', 'submit', function(e) {
    e.preventDefault();
    $.ajax({
        //do your Ajax thing here
     });
});

更新：对于三种形式，您将对所有三种形式使用相同的Ajax调用，并将数据放在一起。

var formData = $(this).closest('form').serialize();
$.ajax({
    type: 'POST',
    url: 'test.php',
    data: formData
});

这会告诉jquery将表单数据放入适当的格式以传递到服务器端脚本，并适用于所有三个脚本

UPDATE2：基于更新问题的更新：

$('form').on('submit', function(e){
    e.preventDefault();
});

$('form').on('keyup', '#txt_name', function(e){
    if(e.keyCode == '13'){
        $.ajax({
            //do Ajax stuff
         });
    }
});

这里是工作代码的链接！ jsfiddle

Answer 3

不要使用keyup（），而是使用blur（）。

Answer 4

将当前的匿名函数更改为在不同情况下（即不同事件）运行，例如focusout()或blur()

$(document).ready(function(){
  $("#txt_name").on("blur",function(){

    var value = this.value;

    $.ajax({
        type:"post",
        url:"doSearchEnter.php",
        data :{
                'key' : value               
            },          
        success:function(res){
            $('#showSearchResult').html(res);
            }
       });

  });
});

当用户使用jquery在输入框上输入（使用键盘）时，如何调用ajax（）

4 个答案: