javascript - 使用 AJAX Jquery 处理随机链接数

Question

我是 AJAX 和 JQuery 的新手，正试图在我的网站部分使用它们。基本上，我拥有的网站具有这种设计，目前可以正常使用(对不起我糟糕的绘画工作:)

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

在类似的主题中，我看到人们对项目使用固定的名称。例如 <a href="#ajax">但我的元素不是固定的。

我尝试了什么

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

问题

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

<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

WHEN 您的服务器端 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 或 本地主机/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>

---

WHEN 您的服务器端 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>