Jquery（ajax）PHP搜索结果未显示在表单下的search_results div中

Question

对于我正在为学校制作的网站，我第一次尝试广泛使用 Jquery，尽管到目前为止我已经做了很多，但我被困在两个（很可能是相关的）问题。

我知道即将到来的案例有点长，但我觉得有必要为阅读本文的每个人提交所有相关代码，以便更好地了解正在发生的事情。

基本上，该网站是一个 index.html 文件，其中包含 CSS、几个按钮和一个带有 ID 内容的 div。我使用这段代码来完成这项工作：

    <script type="text/javascript">
        if ($('#content').innerHTML == " "){
            $(document).ready(function(){
                $('#content').load('main_text.html');
            });
        }
    </script>   
    <script type="text/javascript">
        function loadContent(elementSelector, sourceURL) {
            $(""+elementSelector+"").load(""+sourceURL+"");
        }
    </script>

然后有一个名为 search.html 的内容页面，它只包含一个表单，该表单将搜索字符串提交给 search.php 页面（通过 ajax），然后该页面应立即将搜索结果放回名为 search_results 的 div 中相同的 search.html 文件。我为此使用的 jquery：

    <script type='text/javascript'> 
        $(document).ready(function(){ 
        $("#search_results").slideUp(); 
            $("#search_button").click(function(e){ 
                e.preventDefault(); 
                ajax_search(); 
            }); 
            $("#search_term").keyup(function(e){ 
                e.preventDefault(); 
                ajax_search(); 
            }); 

        }); 

        function ajax_search(){ 
            $("#search_results").show(); 
            var search_val=$("#search_term").val(); 

            $.post("Functions/search.php", {search_term : search_val}, function(data){
                if (data.length>0){ 
                    $("#search_results").html(data); 
                } 
            }) 
        } 
    </script> 

我遇到的问题如下： 在我有第一行代码之前： if ($('#content').innerHTML == " "){;实施后，我会打开网站，很好地加载 main_text.html，我可以很好地导航到其他子页面。但是在 search.html 的表单字段中输入一些内容并没有显示任何结果（只是输入应该已经触发了该功能）。当我点击此表单上的搜索按钮时，没有看到查询结果，main_text.html 文件再次加载到#content div 中。这让我假设，也许，不知何故，代码：

    $(document).ready(function(){
        $('#content').load('main_text.html');
    });

再次被称为不受欢迎的。 Hency 为什么我实现了检查 innerHTML 是否存在。

但是，现在，当我第一次加载页面时，#content div 根本不会加载任何初始内容。 （网页上的部分刚刚变成黑色，就像我的页面背景一样）我必须单击任何按钮才能在我的主要内容 div 中再次加载一些内容。此外，当我现在回到 search.html 时，键入任何内容以获取结果，就像以前一样，仍然不起作用。如果我现在点击搜索按钮，我会再次得到我刚打开页面时看到的初始结果：一个涂黑的#content div。

不知何故，最大的问题在于从我的 PHP 获取结果的 jquery 似乎不起作用。如果搜索结果未显示在 search.html 的 #search_result div 中的问题得到解决，我的 content.innerhtml 检查问题可能已经过时。

任何人都知道我可以做些什么来解决这个问题。或者，对于我正在制作的那种网站，我可以采取哪些其他方法。由于我正在尝试在这里学习 jquery，因此总是赞赏更好的方法，我宁愿学习自己以正确的方式做这件事。 :)

感谢您的宝贵时间。

Answer 1

这里有几点需要注意：

<script type="text/javascript">
    if ($('#content').innerHTML == " "){
        $(document).ready(function(){
            $('#content').load('main_text.html');
        });
    }
</script>   
<script type="text/javascript">
    function loadContent(elementSelector, sourceURL) {
        $(""+elementSelector+"").load(""+sourceURL+"");
    }
</script>

在上面，您正在测试在带有id of content 的元素的innerHTML 中是否有space。

jQuery 使用 .html() 或 .text() 来与容器中保存的数据进行比较，因此如果您想保持使用 jQuery 原则，请更改此行。沿着相同的思考过程，您正在准备 element 上的 IF 声明，位于 document is actually ready and loaded. 之前

您应该将 document.ready 函数移至 if statement 的 outside。这将允许您确保该元素在 DOM 中可用，并且您确实可以对该元素执行检查。

<script type="text/javascript">
  $(document).ready(function(){ 
    if ($('#content').html("")){
        $('#content').load('main_text.html');
    }
  });
</script>

此外，虽然提供方便且功能齐全，但我建议开始使用 $.ajax 而不是 $.get / $.post。对于我为什么这么认为，我有个人偏好，但我不会深入探讨，只是这样，个人。

$.ajax({
  url: "Functions/search.php",
  type: 'POST',
  data: "search_term="+search_val,
  success: function(data){
    if (data.length>0){ 
      $("#search_results").html(data); 
    } 
}); 

最后，您应该使用GET method 而不是POST method。根据 REST/SOAP 实践，您正在从服务器检索数据，而不是将数据发布到服务器。遵循这两个简单的想法是最佳实践。这并不是因为 Web 服务器很难解释数据；但是，相反，它是让您为更大规模的应用程序部署或未来的团队环境做好准备。这样，团队中的每个人都对将使用哪种方法用于什么目的有一个期望。

总之，长话短说，您还可以在 closing }) 括号的末尾留下 semicolons。虽然这不是问题，也不会导致您的开发出现缺陷，coding is all about uniformity。您在其他任何地方都使用了结尾 ;，因此请尽量保持相同的统一设计。

祝你好运。