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>

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

jQuery使用.html（）或.text（）来对容器中保存的数据进行比较，因此如果要使用jQuery原则进行维护，请更改此行。在同一个思考过程中，您正在IF之前element准备document is actually ready and loaded.语句

您应该将document.ready函数移动到outside的{{1}}。这将允许您确保元素在DOM中可用，并且您确实可以对此元素执行检查。

if statement

此外，虽然易于提供且功能齐全，但我建议您先使用<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。基于REST / SOAP实践，您从服务器检索数据，而不是将数据发布到服务器。遵循这两个简单的想法是最好的做法。这不是因为Web服务器很难解释数据;但是，它是为您准备进行更大规模的应用程序部署或未来的团队环境做好准备。这样，团队中的每个人都期望将用于什么目的的方法。

无论如何，长话短说，你也会POST method从semicolons括号的末尾离开closing })。虽然这不是问题，但也不会导致开发中的缺陷coding is all about uniformity。您已在其他任何地方使用了结束;，因此请尝试并保持相同的统一设计。

祝你好运。

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

1 个答案: