Question

我有一个div

<div id="loading"></div>

然后我有一些jQuery加载到一个查询繁重的页面中，因此显示一个微调器

<script>
$('#page1').click(function () {
// add loading image to div
$('#loading').html('<img src="loading.gif"> loading...');

// run ajax request
$.ajax({
    type: "POST",
    dataType: "html",
    url: "client_reporting_01_data.php",
    success: function (d) {
        // replace div's content with returned data
        $('#loading').html(d);
    }
});
});
</script>

我的触发器是菜单项：

<li id="page1" class = "<?php if($current_pgname == "client_reporting_01") echo 'active';         ?>">
<a href="#"> C01: Summary Report</a>
</li>

问题：我有多个页面和多个菜单项我希望能够重复使用此处的代码，在单击相应的菜单项时拉回所需的页面。

所以我会有另一个菜单项

<li id="page2" class = "<?php if($current_pgname == "client_reporting_02") echo 'active';         ?>">
<a href="#"> C02: Summary Report</a>
</li>

和另一个要调用的页面：client_reporting_02

我正在努力研究如何使用jquery来完成这项工作

不知何故，jquery必须能够读取请求的页面，即client_reporting_02_data.php

更复杂的是如何实际移动到该页面并让它工作。如果说我在pagexyz上，我点击了client_reporting_01的菜单项 - 它当然不会在那里移动，因为href =“＃”

Answer 1

一种方法是绑定class，而不是id -

<script>
$('.reportLink').click(function () {
...
});
</script>

添加该类，以及包含该网址的data属性（即。data-url="client_reporting_01_data.php"和您的li现在将

<li id="page1" class = "reportLink <?php if($current_pgname == "client_reporting_01") echo 'active'; ?>" data-url="client_reporting_01_data.php">
<a href="#"> C01: Summary Report</a>
</li>

现在你的脚本可以是 -

<script>
$('.reportLink').click(function () {
// add loading image to div
$('#loading').html('<img src="loading.gif"> loading...');

linkurl = $(this).data('url');//Probably want to sanitize and/or whitelist to prevent injection

// run ajax request
$.ajax({
    type: "POST",
    dataType: "html",
    url: linkurl,
    success: function (d) {
        // replace div's content with returned data
        $('#loading').html(d);
    }
});
});
</script>

Answer 2

我正在稍微更改您现有的代码。如果我理解你想要什么，以下内容将起作用。而不是使用ID来调用函数，将泛型类添加到所有受影响的列表项。我在这里称它为mypage。然后有几种方法可以做到这一点一种方法是：不要将url存储为类，而是让id告诉你要查找的url。请参阅以下更改以获取解释：

// Generic class
$('.mypage').click(function () {
// add loading image to div
  $('#loading').html('<img src="loading.gif"> loading...');
// if you need to include the 0 with child page numbers less than 10, you should change your ids accordingly.
  var page=this.id.replace('page',''),
      url= 'client_reporting_' + page + '_data.php';     


// run ajax request
  $.ajax({
    type: "POST",
    dataType: "html",
    url: url,
    success: function (d) {
       // replace div's content with returned data
       $('#loading').html(d);
    }
});
});

Answer 3

为什么不直接使用<ul>锚点将事件监听器委托给<a>元素并将url加载到href中？像这样;

HTML

<ul id="pages">
    <li class = "reportLink <?php if($current_pgname == "client_reporting_01") echo 'active'; ?>">
        <a href="client_reporting_01_data.php"> C01: Summary Report</a>
    </li>
    <li class = "reportLink <?php if($current_pgname == "client_reporting_02") echo 'active'; ?>">
        <a href="client_reporting_02_data.php">Another Summary Report</a>
    </li>
</li>

的Javascript

var $target = $('#loading');

$('#pages').on('click', 'a', function(event) {

    event.preventDefault();

    // add loading image to div
    $target.html('<img src="loading.gif"> loading...');

    $.ajax({
        type: "POST",
        dataType: "html",
        url: this.href,
        success: function (d) {
            //  replace div's content with returned data
            $target.html(d);
        }
    });

});

您甚至可以使用.load来简化代码：

Javascript - 简化版

var $target = $('#loading');

$('#pages').on('click', 'a', function(event) {

    event.preventDefault();

    $target
        .html('<img src="loading.gif"> loading...')
        .load(this.href);
});

将查询结果加载到Div中

3 个答案:

HTML

的Javascript

Javascript - 简化版