使用Ajax调用html和Php页面

时间:2016-07-21 23:59:11

标签: javascript php jquery html ajax

我创建了一个ajax函数,在我的index.php中的ajax-container div中调用我的html页面,所以现在如果我还想在ajax中调用php页面怎么办呢?

有我的代码:

htaccess重写

Options +FollowSymLinks
RewriteEngine On
RewriteBase /
RewriteRule ^([a-zA-Z0-9\-]*).html$ index.php?p=$1 [L]

index.php

<div class="link" href="page2.html">go html</div>
<div class="link" href="page3.php">go php</div>

<div id="ajax-container">
         <?php
$d = "pages/";

if (isset($_GET['p']))
	{
	$p = strtolower($_GET['p']);
	if (preg_match("/^[a-z0-9\-]+$/", $p) && file_exists($d . $p . ".html"))
		{
		include $d . $p . ".html";

		}
	  else
		{
		include $d . "404.html";

		}
	}
  else
	{
	include $d . "home.html";

	} ?>
</div>

这是我的 ajax功能从文件夹页面调用html页面

var afficher = function(data, page) {

    $('#ajax-container').fadeOut(100, function() {
        $('#ajax-container').empty();
        $('#ajax-container').append(data);
        $('#ajax-container').fadeIn(100, function() {});
    });
};

var lastRequest = null;
if (lastRequest !== null) {
    lastRequest.abort();
}

var loadPage = function(page, storeHistory) {
    if (typeof storeHistory === 'undefined') {
        storeHistory = true;
    }


    lastRequest = $.ajax({
        url: 'pages/' + page,
        cache: false,
        success: function(html) {
            afficher(html, page);
            if (storeHistory === true) {
                history.pushState({
                    'key': 'value',
                    'url': page
                }, '', page);
            }
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            afficher('erreur lors du chagement de la page');
        }
    });

    return false;
};

window.addEventListener('load', function() {
    setTimeout(function() {
        window.addEventListener('popstate', function(e) {
            if (e.state === null) {
                loadPage('home.html');
            } else {
                loadPage(e['state']['url'], false);
            }
        });
    }, 0);
});

$(document).ready(function() {
  
    $('.link').bind('click', function(e) {
     e.preventDefault();
     var page = $(this).attr('href');
     loadPage(page);
     return false;
    });
  
});

1 个答案:

答案 0 :(得分:1)

如果你想执行php并在div上显示它返回的内容,你可以使用jQuery和ajax:

$(function(){
    $(".myDivClass").load('yourPHPFile.php');
}());