Question

在我的索引页面中，我得到3个列，第一列显示数据库中的所有类别，第二列显示单击类别时的主题，第三列选择单击主题时的内容。

我想要做的是，在单击任何类别时，Ajax请求数据库中与该类别相关的所有主题，并将其显示在column1和It Works中，但是当我单击生成的主题以获取该主题的内容时无法异步请求，而是将我带到content.php。更清楚我粘贴index.php和script.js（所有的javascript和jquery文件都包含在header.php中）

索引页

    <?php 
    include("tpl/header.php");
    ?>
    <div id="navigation">
        <ul id="search_form">
           <?php
           $cat = Category::find_all();
           foreach($cat as $category) {
               echo '<li value="';
               echo $category->cat_id;
               echo '" class="myLi" "><a href="subject.php?id=';
               echo $category->cat_id;
               echo'">';
               echo $category->category;
               echo '</a></li>';
           }
           ?>
        </ul>
    </div>
    <div id="content1">
        <h2>Subjects</h2>
        <!-- works -->
    </div>
    <div id="content2">
       <h2>Content</h2>
       <!-- doesnt work -->
    </div>
    <?php
        include_layout_template("footer.php");
    ?>

js代码

    $(document).ready(function() {
       $(".myLi").click(function(){
            var id = this.value;
            ajax.open('get', 'subject.php?id=' + encodeURIComponent(id));
            ajax.onreadystatechange = function() {
              // Pass it this request object:
              handleResponse(ajax);
            }
            ajax.send(null);
            return false; // So form isn't submitted.
         });

         $(".myLi1").click(function(){
            var cid = this.value;
            ajax.open('get', 'content.php?id=' + encodeURIComponent(cid));
            ajax.onreadystatechange = function() {
              // Pass it this request object:
              handleResponse1(ajax);
            }
            ajax.send(null);
            return false; // So form isn't submitted.
         });



        function handleResponse(ajax) {
          // Check that the transaction is complete:
          if (ajax.readyState == 4) {
            // Check for a valid HTTP status code:
            if ((ajax.status == 200) || (ajax.status == 304) ) {
              // Put the received response in the DOM:
              var results = document.getElementById('content1');
              results.innerHTML = ajax.responseText;
              // Make the results box visible:
              results.style.display = 'block';
            }
          } // End of readyState IF.
        } // End of handleResponse() function.

        function handleResponse1(ajax) {
          // Check that the transaction is complete:
          if (ajax.readyState == 4) {
            // Check for a valid HTTP status code:
            if ((ajax.status == 200) || (ajax.status == 304) ) {
              // Put the received response in the DOM:
              var results1 = document.getElementById('content2');
              results1.innerHTML = ajax.responseText;
              // Make the results box visible:
              results1.style.display = 'block';
            }
          } // End of readyState IF.
        } // End of handleResponse() function.

    });

..只有当我单击索引页面上的主题时，它才会失败，当我导航到subject.php并单击链接时，它会异步地给出结果。所以我的问题是如何在单个页面上查询多个ajax调用（即在我的情况下为“index.php”）..任何帮助？

Answer 1

加载主题后，你应该对它们进行ajaxify，但是当文档准备就绪时，即它们甚至存在之前，你就是在激活它们。您对$(".myLi1")的来电与任何内容都不匹配。

另一种解决方案是将您的事件附加到现在匹配.myLi1或将来的所有元素。使用jQuery＆lt; 1.7，您可以使用delegate()方法执行此操作，否则使用on()方法执行此操作。

一页上有多个Ajax请求

1 个答案: