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

时间:2014-02-21 17:04:01

标签: javascript php jquery ajax

这是我的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文件?

    4 个答案:

    答案 0 :(得分:1)

    您可以使用load()函数https://api.jquery.com/load/

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

    答案 1 :(得分:0)

    使用jQuery“load”。更清洁/更容易!

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

    答案 2 :(得分:0)

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

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

    答案 3 :(得分:-1)

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

    • 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 属性。
    3. <强> 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属性选择器定位您的加载图片。
      3. JSFiddle