0

对于我正在为学校制作的网站，我第一次尝试广泛使用 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 .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 中未显示的 searchresults 问题，我的 content.innerhtml 检查问题可能已经过时。

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

谢谢你的时间。

4

1 回答 1

0

这里有几点需要注意：

<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>

在上面，您正在测试是否space在带有id of content.

jQuery 使用 .html() 或 .text() 与容器中保存的数据进行比较，因此如果您想使用 jQuery 原则进行维护，请更改此行。沿着同样的思考过程，你正在准备一份IF声明elementdocument is actually ready and loaded.

您应该将 document.ready 函数移动outside到if statement. 这将允许您确保该元素在 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 服务器很难解释数据；但是，相反，它是让您为更大规模的应用程序部署或未来的团队环境做好准备。这样，团队中的每个人都对将使用什么方法用于什么目的有一个期望。

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

祝你好运。

于 2012-06-06T18:39:03.450 回答