如何使用jQuery使PHP文件加載到div中

Question

這是我的js

function load_date_cong(id,date)
    {
    //alert(date);
    $("#date0").removeClass('selected');
    $("#date1").removeClass('selected');
    $("#date2").removeClass('selected');
    $("#date3").removeClass('selected');
    $("#date4").removeClass('selected');
    $("#date5").removeClass('selected');
    $("#date6").removeClass('selected');
    $("#date7").removeClass('selected');                
    //$("#"+date).toggleClass('selected');  

    $("#"+id).addClass('selected');

    $('#date_conf_field').html("<center><img src='images/loader.gif' /></center>");
    $.get("conf_list.php",{date:date},function(msg){$('#date_conf_field').html(msg);});
    }

這是代碼

2014年2月

<li><a href="javascript:void(0);" name="2014-03"  id="date1" onclick="load_date_cong(this.id, this.name);">March 2014</a></li>


<li><a href="javascript:void(0);" name="2014-04"  id="date2" onclick="load_date_cong(this.id, this.name);">April 2014</a></li>


<li><a href="javascript:void(0);" name="2014-05"  id="date3" onclick="load_date_cong(this.id, this.name);">May 2014</a></li>


<li><a href="javascript:void(0);" name="2014-06"  id="date4" onclick="load_date_cong(this.id, this.name);">June 2014</a></li>


<li><a href="javascript:void(0);" name="2014-07"  id="date5" onclick="load_date_cong(this.id, this.name);">July 2014</a></li>


<li><a href="javascript:void(0);" name="2014-08"  id="date6" onclick="load_date_cong(this.id, this.name);">August 2014</a></li>

如何制作php文件？

Answer 1

您可以使用load（）函數https://api.jquery.com/load/

$("#divID").load("your.php")

Answer 2

使用jQuery“加載”。 更清潔/更輕松！

$('#date_conf_field').load("conf_list.php");

Answer 3

如果頁面的其余部分由php提供服務，則可以執行以下操作：

<div>
<?php include "conf_list.php";?>
</div>

Answer 4

您可以真正清理並簡化事情。 你有一些我不推薦的東西：

• 侵入性JavaScript
• 不推薦使用的標簽用法<center>
• 多個onclick=""處理程序

現在開始清理：

HTML：

<ul>
    <li><a href="#" data-date="2014-03" id="date1" >March 2014</a></li>
    <li><a href="#" data-date="2014-04" id="date2" >April 2014</a></li>
    <li><a href="#" data-date="2014-05" id="date3" >May 2014</a></li>
    <li><a href="#" data-date="2014-06" id="date4" >June 2014</a></li>
    <li><a href="#" data-date="2014-07" id="date5">July 2014</a></li>
    <li><a href="#" data-date="2014-08" id="date6">August 2014</a></li>
</ul>

變化：

1. 從標記中刪除干擾性的JavaScript 。
2. 更改名稱屬性以使用新的data-* HTML5屬性。

JavaScript：

$(function () {
    $('ul').off('click', 'li > a').on('click', 'li > a', function (evt) {
        evt.preventDefault();
        var $this = $(this);
        $('a[id^="date"]').removeClass('selected');
        $this.addClass('selected');

        $('<img />', { "src": "images/loader.gif" }).appendTo('#date_conf_field');
        $('#date_conf_field').load("conf_list.php", { date: $this.data('date') });
    });
});

變化：

1. 使用event.preventDefault();防止錨標記重定向event.preventDefault(); 。
2. 將單擊元素的引用保存到變量$(this)以防止重新遍歷DOM。
3. 委派的事件處理程序添加到無序列表，這樣不需要應用只有一個點擊事件。
4. 刪除所有要刪除selected類的jQuery選擇器，然后將其替換為starts with屬性選擇器的starts with 。
5. 通過使用$('<img />'...)語法構建<img> ，您將允許jQuery在內部使用本機document.createElement 。
6. 最后，使用.load()加載HTML模板並將其放在您的元素中。
7. 使用jQuery .data()方法從單擊的元素中提取日期數據。

CSS：

img[src~="load"] {
    text-align: center;
}

變化：

1. 從圖像標記中刪除不推薦使用的<center>標簽。
2. 使用contains屬性選擇器定位加載圖像。

JSFiddle