Question

好的，我觉得我已经接近了。我有两个几乎相同的页面。一个有一个字母表列表，当选择一个字母时，另一个页面过滤结果（使用php从数据库中查询的人的姓氏）并将其显示在屏幕的右侧。我试图将第二页中的ul拉入第一页中的div，这样第二页就不必加载了。

    $(document).ready(function() {

      $(".toggleLetters").click(function() {
      /* grabs URL from HREF attribute then adds an  */
      /* ID from the DIV I want to grab data from    */

      var myUrl = $(this).attr("href", "retrieveLastNames.php") +   ".deptPeople";
      $(".rightColumn").load(myUrl);
        return false;
       });

      });

toggleLetters类附加到每个链接（字母表中的字母）retrieveLastNames.php是我尝试加载的第二个页面。 deptPeople是我试图从第二页进入的ul，而rightColumn是我试图加载我的列表的div。现在，当我点击一个字母时，页面没有转到retrieveLastNames.php，所以我知道我的jQuery正在进行SOMETHING，因为它知道不加载其他页面。问题是，为什么它没有列入我的名单？

更新

彼得的解决方案让我在页面中显示ul，但是，现在我的结果没有过滤。

<?php
$lastnameFilter = $_GET["lastnameFilter"];
$data = $_GET['page1Data'];
// 1. import connection to database
require_once("../../db_connect.php");

$sql = "SELECT * FROM people WHERE lastName LIKE '".$lastnameFilter."%'ORDER BY title DESC";
$result = mysqli_query($connection, $sql);

?>

以前，我的链接看起来像这样：

<li><a class="toggleLetters" href="retrieveLastNames.php?lastnameFilter="B">B</a></li>

我将它们改为

<li><a class="toggleLetters" href="#" data-url-data="B">B</a></li>

现在不是按字母过滤名称，而是显示我数据库中的所有名称。

Answer 1

根据页面结构，以下内容可能会有效：

<a href="#" class="toggleLetters" data-url-data="A">A</a>

var data = $(this).data('url-data');
$(".rightColumn").load('retrieveLastNames.php?page1Data=' + data + ' ul');

如果找到片段<ul>.....</ul>，将从响应中提取并插入到DOM

中

在第2页中，您需要阅读page1Data中的值并使用它来过滤结果。

$data = $_GET['page1Data'];

请查看加载页面片段 here

部分

<强>更新

使用选项1或选项2，如下所述。

选项1： - 保留您的标记

<li><a class="toggleLetters" href="retrieveLastNames.php?lastnameFilter="B">B</a></li>

PHP

<?php
$lastnameFilter = $_GET['lastnameFilter'];

// 1. import connection to database
require_once("../../db_connect.php");

$sql = "SELECT * FROM people WHERE lastName LIKE '".$lastnameFilter."%'ORDER BY title DESC";
$result = mysqli_query($connection, $sql);

?>
//^^^^^consider changing this to guard against SQL injection attacks!!!!!

JS

$(".toggleLetters").click(function() {
    var myUrl = this.href +   " .deptPeople";
    $(".rightColumn").load(myUrl);
    return false;
});

选项2： - 使用日期属性

<li><a class="toggleLetters" href="#" data-url-data="B">B</a></li>

PHP

//Same as above

JS

$(".toggleLetters").click(function() {
    var myUrl = 'retrieveLastNames.php?lastnameFilter=' + $(this).data('url-data') +   " .deptPeople";
    $(".rightColumn").load(myUrl);
    return false;
});

如何使用jQuery将ul从其他网页加载到div中？

1 个答案: