如何使用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