Php 如何在URL中显示Ajax请求?

Php 如何在URL中显示Ajax请求?,php,ajax,url-rewriting,fragment-identifier,hashchange,Php,Ajax,Url Rewriting,Fragment Identifier,Hashchange,我想要的是有更改页面一部分的链接,以及一个动态URL,我可以在其中指定变量,如\calendar=10\u 2010tabview=tab2 检查此项以获得确切的示例: 下面是我需要的链接格式: #日历=10_2010&tabview=tab2 我需要在calendar和tabview等链接中包含变量,这样我就可以在一个页面上更改多个内容,而无需重新加载 或者像on这样的另一种格式,这正是我想要的,然而第一种格式也很好,但这更漂亮 http://wbhomes.com.au/#/proper

我想要的是有更改页面一部分的链接,以及一个动态URL,我可以在其中指定变量,如
\calendar=10\u 2010tabview=tab2

检查此项以获得确切的示例:

下面是我需要的链接格式:

#日历=10_2010&tabview=tab2

我需要在
calendar
tabview
等链接中包含变量,这样我就可以在一个页面上更改多个内容,而无需重新加载


或者像on这样的另一种格式,这正是我想要的,然而第一种格式也很好,但这更漂亮

  • http://wbhomes.com.au/#/propertiesforsale/houseandland/quinnsbeach-waterland1

要求

  • 需要从任何地方访问 例如一封邮件,或者如果我只是 在url栏中写入

  • 链接应该在历史记录中,因此如果我按下后退或前进按钮,页面需要被访问

  • 页面刷新也需要工作


一些资源:

示例:

  • -个人资料页面上的侧栏链接

  • -100%接近我想要的

一些教程:


请帮帮我!我从未找到任何解决方案来实现这一点,但我不想使用jquery或任何API或任何库,我希望有一个工作的
Javascript/AJAX
PHP
脚本。

Szevasz.)

HTML

<a href="/bye.php?user=abc&page=messages" 
   onclick="return goToWithAjax(this);">bye</a> 

对于您问题中链接的演示,实现该功能实际上非常简单——因为它根本不使用任何AJAX(当您开始将AJAX添加到混合中时,它会变得更加困难——稍后解释)。要实现该功能,您需要:;升级链接以使用哈希,然后绑定到hashchange事件中。不幸的是,hashchange事件不兼容跨浏览器,但幸运的是,有许多“历史/远程插件”可用-我们多年来首选的插件已被证明是,它是开源的,得到了很大的支持,并且正在积极开发:-)

尽管如此,当涉及到像Facebook这样的网站添加AJAX功能时,您将开始面临一系列严重困难的问题!(我知道我是前两个站点的首席架构师!)。其中一些问题是:

  • 如何优雅而轻松地升级某些内部链接,以使用历史记录和AJAX功能,并检测哈希值何时更改?同时保持其他链接像以前一样工作
  • 如何从“www.yoursite.com/myapp/a/b/c”重定向到“www.yoursite.com/myapp/#/a/b/c”?并且仍然为用户保持平滑的体验,以便3个必要的重定向尽可能平滑
  • 如何使用AJAX提交表单值和数据并更新哈希?反之亦然,如果他们不支持Javascript
  • 如何检测AJAX请求需要的页面的哪个特定区域?这样子页面将显示正确的页面
  • 当AJAX状态更改时,如何更改页面标题?和其他非页面内容
  • 如何在AJAX状态加载和更改时执行良好的导入/导出效果?这样用户就不会被蒙在鼓里了
  • 当我们通过AJAX登录时,如何更新侧栏登录信息?很明显,我们不希望左上角的登录按钮再出现
  • 如何仍然支持未启用JS的用户的网站?这样它就可以优雅地退化,并且仍然可以被搜索引擎索引
据我所知,唯一一个试图解决上述所有极端困难问题的开源和可靠项目已被证明是。它实际上是前面提到的jqueryhistory项目的扩展,提供了一个漂亮、优雅的高级界面,将AJAX功能添加到混合中,以处理幕后的困难问题,因此我们不必担心这些问题。它也是前面提到的最后几个商业站点中使用的选择解决方案

祝你好运,如果你有任何进一步的问题,请就这个答案发表评论,我会尽快回复:-)


更新:现在有了HTML5历史API(pushState,popState),它不支持HTML4
hashchange
功能。现在是jQuery历史的成功者,为HTML5历史API提供跨浏览器兼容性,并为HTML4浏览器提供
hashchange
回退。jQuery Ajaxy将升级到History.js

我认为使用HTML5中的onHashChange事件或使用JavaScript库可以非常轻松地实现这一点,该库在不完全支持HTML5的浏览器中模拟“散列”行为。 可能有这样一个图书馆,但也有许多其他图书馆

如果您有一个支持HTML5的浏览器,或者类似的模拟行为的库,只需使用:window.sethash(“#newsection”);根据您的用例场景,从javascript更改为新的内容,和/或回调onHashChange事件以拦截它。

就是这样做的,您可以深入源代码并从中获取逻辑

window.sethash("#newsection"); 事实上,这是非常直截了当的。创作者在下面的视频中很好地讲述了这一点

http://www.bennadel.com/resources/jing/2009-12-21_0933.swf


PS抱歉无法发布第二个链接bc我是新用户

这是大多数AJAXian新开发人员无法理解的。这是一个很容易解决的问题

您首先需要的是jQuery核心,它在jQuery.com上是免费的

接下来,您将需要jQuery window.sethash("#newsection");
<a href="user.php?q=/topic/article" class="dynlnk">Link Text/Image</a>
$(".dynlnk").each(function(){
    $(this).attr("href", $(this).attr("href").replace("?q=", "#"));
});
$(window).bind( 'hashchange', function(e){

    //this splits the part after the hash so you can handle the parts individually.
    //to handle them as one just use location.hash
    pageparts = location.hash.split("/");

});
$(window).trigger( 'hashchange' );
// register event handler
function bindHashchange() {

    $(window).bind('hashchange', function(event) {
        event.preventDefault();
        var label = location.hash.substring(1);
        handleLabel(label);
    });

    // trigger event so handler will be run when page is opened first time
    // otherwise handler will only run when clicking on hash links
    $(window).trigger('hashchange');
}

// read and handle hash part of url
function handleLabel(label) {

    if ( label.length > 0 ) {
        // using label from url
        switchPage(label);
    } else {
        // use the default label, if no hash link was present
        switchPage('start');
    }
}

// in this case, load hidden <div>'s into a <div id="content">
function switchPage(label) {
    if ( label == 'start ) {
        $('div#content').html($('div#start'));
    } else if ( label == 'some_other_page' ) {
        // do something else
    }
}
function processHash() {

    var str = location.hash.substring(1);
    var pos = $.inArray('.', str);

    var label = '';
    var arg = '';

    if ( pos > -1 ) {
        label = str.substring(0, pos);
    } else {
        label = str.substring(0);
    }

    if ( pos > 1 ) {
        arg = str.substring(pos+1);
    }

    if ( label.length == 0 ) {
        // the default page to open of label is empty
        loadContent('start');
    } else {
        // load page, and pass an argument
        loadContent(label, arg);
    }
}
var registry = {};

// split on character '.'
var args = label.split(/\./g);

for ( i in args ) {
    var arg = args[i];

    // split on character '='
    var temp = arg.split('=');
    var name = temp[0];
    var value = temp[1];

    // store argument in registry
    registry[name] = value;
}
// registry is loaded, ready to run application that depends on arguments