使用Ajax调用html和Php页面


Call html and Php pages with Ajax

我制作了一个ajax函数,在index.php中的ajax-containerdiv中调用我的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;
    });
  
});

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

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