如何使用jquery使用div加载一个php文件

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“load”。更清洁/更容易！

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

Answer 3

如果页面的其余部分由php提供，您可以这样做：

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

Answer 4

你可以真正清理它并简化事情。你有一些我不推荐的东西：

• Obtrusive 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();阻止锚标记重定向。
2. 将已点击元素的引用保存到变量$(this)中，以防止重新遍历DOM。
3. 将委派的事件处理程序添加到无序列表中，以便只应用 一个 单击事件。
4. 删除所有正在删除类selected的jQuery选择器，并将其替换为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