将动态内容插入到php页面并更改网址

我的目标是：我有一个表单，它位于第1-4部分，当用户单击“下一步”按钮时我希望将内容制作成动画，然后是第2部分幻灯片等，直到表格完成。棘手的部分是我想尝试在另一个子文件夹中使用不同的PHP页面来插入其他3个部分。这也会改变用户看到的URL子文件夹。将动态内容插入到php页面并更改网址

工作示例实际上是WordPress。当您点击多部分表单时，您将看到内容和URL的行为如我所描述的。

我做了一些挖掘，看起来他们在内容上使用了React.js，但我无法真正找到任何有关如何使用React.js执行此操作的文档，所以它让我觉得它可能是自定义的Ajax/jQuery或什么。

我的文件夹的树 -

主
- 子文件夹-1
  - 的index.php
- 子文件夹-2
  - 的index.php

等。我能想到的唯一的事情会使用jQuery：

$(document).ready(function() { 
 
    $('#form-container').on('click', '.insert', function() { 
 
    var directory = $(this).attr('name'); 
 
    $('#form-container').load('../' + directory); 
 

 
    return false; 
 
    }); 
 
});

我添加“下一步”按钮之类的“插入”，并给它一个name="Subfolder-2"$('#form-container').load('../Subfolder-2);'实际上将加载内容到没有页面刷新的div，但它不会更改URL中的子文件夹。

我在错误的轨道上吗？也许我只是没有寻找正确的东西？

来源

2016-07-16 Matthew

我想你需要使用'window.history.pushState'来添加一个历史记录条目（并更改URL）。然后你需要使用'window.onpopstate'来处理用户点击浏览器的后退按钮。看[这个答案]（http://stackoverflow.com/a/3354511/859640）。 –

谢谢你，当我今晚回到家时，我会尝试你的建议。这是有道理的。我从来没有想过使用pushState和onpopstate。 – Matthew

嗨，@JohnS，我想再次表示感谢您昨天的评论。在对'history.pushState'和'popstate'进行了相当多的研究和测试之后，我已经得到了这个功能的描述。如果您发布您的建议作为答案，我会接受它。再次感谢！你很有帮助 – Matthew

好的，所以我最终弄清楚了如何让内容像我想要的那样用John S.提供给我的信息行事。做一些研究和反复试验了几个小时后，我想出了下面的JavaScript：

var data = 'start', 
    url = '../' + data + '/'; 
    history.pushState(data, null, url);

我在上面设置的变量，并立即在页面加载运行history.pushState来捕获加载到第一个div内容分区。这很重要，因为这是我能够在点击浏览器后退按钮时加载初始加载回页面的内容的唯一方式。

$('body').on('click', '.insert', function(e) { 

     data = $(this).attr('data-name'), 
     url = '../' + data + '/'; 

     history.pushState(data, null, url); 

    request_content(data); 

    return false; 

});

然后我添加一个点击监听器按钮与类.insert重置变量，这样，而不是抓住最初加载它抓住，将加载页面的页面，然后使用history.pushState再次更改网址由变量决定。

request_content函数是一个简单的.load函数。因此，当按钮被点击时，变量被设置，URL更改和新内容被加载到页面中，而旧内容消失。

最后一块拼图花了我最长的时间才算出来，实际上是popstate函数。我仍然不能100％确定它为什么可行，但经过几个小时的搞乱并最终实现它，我不会去质疑它。

window.addEventListener('popstate', function(e){ 
    var data = e.state; 

    if(data === null) { 

    } else { 
     request_content(data); 
    } 
});

这popstate功能是允许内容回来击中浏览器后退或前进导航时。

CSSTricks < CSSTricks的这篇文章在学习此方法时帮助了TON。

再次感谢约翰S.指出我在正确的方向！

来源

2016-07-19 20:34:30 Matthew

将动态内容插入到php页面并更改网址

回答

相关问题