Question

我想做什么

在文本字段中写入时，我希望<div class="result">填充PHP回显的内容。

但它不起作用！

Jquery的

$(document).ready(function() {
    var search = $("#search");
    if (search.val() !== '') {
        search.keyup(function() {
            $.post("index.php", { search : search.val()}, function(data) {
                $(".result").html(data);
            });
        });
    }
});

PHP

    if (isset($_POST['search'])) {
        echo 'hello';
    }

HTML 的

<input type="text" name="search" id="search"/>
<br />
<div class="result"></div>

问题

填写输入时，没有任何反应，这意味着将输入的数据POST到keyup上（当输入新字符/或删除时。

什么阻止它工作？我是jQuery的新手。

感谢。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Answer 1

这是错误的。

if (search.val() !== '') {

以上一行应为，

if (search.val() != '') {

编辑：

然后将if条件包装在keyup函数中。

$(document).ready(function() {
    var search = $("#search");

        search.keyup(function() {
            if (search.val() != '') {
                $.post("getInputs.php", { search : search.val()}, function(data) {
                    $(".result").html(data);
                });
            }
        });
});

Answer 2

当我遇到这样的情况时，我只是开始将问题分成两半，看看它失败了。以下是我要尝试的几件事。

首先，在您的jQuery中，将一些输出添加到控制台：

if (search.val() !== '') {
        console.log("I am not empty so I should go to index.php");
        search.keyup(function() {
            $.post("index.php", { search : search.val()}, function(data) {
                $(".result").html(data);
            });
        });
    } 
else
{
     console.log("search val was empty");
}

当然，您可以随时检查浏览器网络探查器，看看它是否对该资源进行了POST。这将告诉您问题是否在search.val测试中。

然后，如果要调试PHP端，可以删除isset测试并始终返回“hello”。这将告诉您POST变量或检查是否存在问题。

最后，您可以输出数据结果以确保某些内容完全恢复。这将删除$(".result").html()成为问题的所有问题：

$.post("index.php", { search : search.val()}, function(data) {
   console.log(data);
   $(".result").html(data);
});

如果这些都不起作用，也许您可以在第一时间切换到绑定到keyup的方式：

$(document).ready(function() {
    $("#search").keyup(function() {
       if ($(this).val() !== '') {
            $.post("index.php", { search : $(this).val()}, function(data) {
                $(".result").html(data);
            });
        });
    }
});

Answer 3

$(document).ready(function() {
    var search = $("#search");


});

仅在文档准备好但未在keyup上触发，表示在var $（“＃search”）中.val（）将为空。

更改您的代码，以便在每次按键操作时捕获输入值。

$(document).ready(function() {
         search.keyup(function() {

             var value = $("#search").val();
             if(value!="")
            {
             $.post("index.php", { search : value}, function(data) {
                $(".result").html(data);
            });
           }
        });

});

Answer 4

你的逻辑错误。如果#search中包含文本，则只设置keyup事件处理程序。不幸的是，当该脚本在文档就绪时运行时，＃search中没有值，因此你的keyup处理程序永远不会被设置，这就是它永远不会触发的原因。

Answer 5

我重写了一些你的逻辑，并且能够让它发挥作用。一种是检查以确保您拥有价值的方式。而不是字符串比较我正在检查长度。此外，我没有将事件绑定到字段，而是将事件绑定到文档并定位字段。试试吧：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<input type="text" name="search" id="search"/>
<br />
<div class="result"></div>

<script>
    $(document).ready(function() {
        $(document).on('keyup', 'input#search', function() {
            if($(this).val().length > 0) {
                $.post('index.php', {"search":$(this).val()}, function(data) {
                    $('div.result').html(data);
                });
            }
        });
    });
</script>

Answer 6

// when the html is loaded
$(document).ready(function() {
    // find an element with the id 'search'
    var search = $("#search");

    // if this element's value is NOT an empty string -- oh look, it is!
    if (search.val() !== '') {
        // well, going to skip all this here then
        search.keyup(function() { // don't care
            $.post("index.php", { search : search.val()}, function(data) { // don't care
                $(".result").html(data); // don't care
            });
        });
    }

    // YAAAAY! All done!
});

Answer 7

实际上你的代码没有错。我已经尝试过你的代码了。唯一的问题是你有条件地调用了键盘功能。您的Javascript代码应如下所示：

$(document).ready(function() {
    var search = $("#search");
        search.keyup(function() {
            if (search.val() != '') {       
            $.post("index.php", { search : search.val()}, function(data) {
                $(".result").html(data);
            });
            }
        });

});

这里，条件应该在keyup函数内。

Jquery POST在keyup上获取数据

7 个答案: