使用 AJAX Jquery 处理随机数量的链接

Question

我是 AJAX 和 JQuery 的新手，并试图在我的网站部分中使用它们。基本上我拥有的网站，有这种设计，目前它是功能性的（对不起我糟糕的油漆工作:)

网站中的项目是由用户创建的。这意味着项目编号不是恒定的，但可以通过数据库查询获取。 每个项目都有一个唯一的 URL，当前当您单击一个项目时，所有页面都在刷新。我想更改系统，让用户有机会通过仅更改中间内容区域在这些项目之间快速导航，如上所示。但是，我也希望每个项目都有一个唯一的 URL。我的意思是，如果该项目具有“堆栈溢出”之类的名称，我希望该项目具有类似 dev.com/#stack-overflow 或类似的 URL。 我不介意可能来自 AJAX 的“#”。

在类似的主题中，我看到人们对项目保持不变的名称。例如 <a href="#ajax"> 但我的物品不是固定的。

我已经尝试过什么

我的想法是什么；在获取所有项目的链接时，我将链接保存在 $link 变量中并在<a href="#<?php echo $link; ?>"> 中使用它。 在 $link 内部，它不是实际的 URL。例如，正如我上面给出的示例，它是像“stack-overflow”这样的名称。直到这部分没有问题。

问题

在this topic 中，一位朋友提出了这种代码作为一个想法，我已经根据自己的目的对其进行了更改。

<script>
    $(document).ready(function() {
      var router = {
        "<?php echo $link ?> ": "http://localhost/ajax_tut/link_process.php"
      };
      $(window).on("hashchange", function() {
        var route = router[location.hash];
        if (route === undefined) {
          return;
        } else {
          $(".content-right").load("" + route + " #ortadaki_baslik");
        }
      });
    });
</script>

 

我正在尝试将 $link 的值发布到 link_process.php 并且在 link_process.php 我将获取 $link 的值并安排显示的必要页面内容。 问题是； - 我应该如何更改此代码来做到这一点？ - 我看不到有人做类似的例子来解决这个问题 问题。这是解决这种情况的正确方法吗？ - 你们对我的情况有更好的解决方案或建议吗？

提前致谢。

Answer 1

何时您的服务器端 AJAX 调用处理程序 [PHP 脚本 - 在服务器端处理 AJAX 请求] 是恒定的，并且您将 item_id/link 作为 GET 参数传递...

例如： localhost/ajax_tut/link_process.php?item_id=stack-overflow 或 localhost/ajax_tut/link_process.php?item_id=stack-exchange

那么你可以使用下面的代码。

<script>
    $(document).ready(function() {
      var ajax_handler = "localhost/ajax_tut/link_process.php?item_id=";
      $(window).on("hashchange", function() {
        var route = location.hash;
        if (route === undefined) {
          return;
        } else {
          route = route.slice(1); //Removing hash character
          $(".content-right").load( ajax_handler + route );
        }
      });
    });
</script>

---

当您将 item_id/link 作为 URL 部分而不是参数传递...

例如： localhost/ajax_tut/stack-overflow.php 或 localhost/ajax_tut/stack-exchange.php

那么你可以使用下面的代码。

<script>
    $(document).ready(function() {
      var ajax_handler = "localhost/ajax_tut/";
      $(window).on("hashchange", function() {
        var route = location.hash;
        if (route === undefined) {
          return;
        } else {
          route = route.slice(1); //Removing hash character
          $(".content-right").load( ajax_handler + route + ".php");
        }
      });
    });
</script>

---

何时您的服务器端 AJAX 处理程序脚本 url 不是恒定的，并且因不同的项目而异...

例如： localhost/ajax_tut/link_process.php?item_id=stack-overflow 或 localhost/ajax_tut/fetch_item.php?item_id=stack-exchange 或 localhost/ajax_tut/stack-exchange.php

那么我建议更改生成项目链接的PHP脚本放在左侧。

<?php
  foreach($links as $link){
      // Make sure that you are populating route parameter correctly
      echo '<a href="'.$link['item_id'].'" route="'.$link['full_ajax_handler_route_url_path'].'" >'.$link['title'].'</a>'; 
  }
?>

这里是 Javascript

<script>
    $(document).ready(function() {
      var ajax_handler = "localhost/ajax_tut/"; //Base url or path
      $(window).on("hashchange", function() {
        var route = location.hash;
        if (route === undefined) {
          return;
        } else {
          route = route.slice(1); //Removing hash character
          route = $('a [href="'+.slice(1)+'"]').attr('route'); //Fetching ajax URL
          $(".content-right").load( ajax_handler + route ); //Here you need to design your url based on need
        }
      });
    });
</script>