PHP语言词典项目如何为词条生成可正常访问的SEO友好动态URL

核心原因 #

修改a标签添加href属性后，点击链接会触发浏览器默认的页面跳转行为，绑定的AJAX请求虽然会执行，但页面跳转刷新会直接清空刚渲染的内容，所以才会出现结果闪一下就消失的情况。

具体修改步骤 #

• 第一步：阻止a标签默认跳转行为，同时点击后更新地址栏URL（不刷新页面）
  修改dictionary.php中的.gsearch点击事件代码：

// 给回调函数添加事件对象参数e
$(document).on('click', '.gsearch', function(e){
  // 新增这行，阻止a标签默认的跳转刷新行为
  e.preventDefault();
  var edata = $(this).text();
  var targetHref = $(this).attr('href');
  $('#gsearchsimple').val(edata);
  $('.list-group').css('display', 'none');
  $("html, body").animate({ scrollTop: 0 }, 200);
  $.ajax({
    url:"gb-tr.php",
    method:"POST",
    data:{edata:edata},
    success:function(data){
      $('#detail').html(data);
      // 新增这行，更新地址栏URL为带参数的链接，不刷新页面
      history.pushState(null, null, targetHref);
    }
  });
});

• 第二步：新增页面初始化读取URL参数逻辑，实现直接访问带参数URL也能加载对应词条
  在dictionary.php的JS代码最外层新增初始化逻辑：

// 页面加载完成后执行
$(function(){
  // 读取URL中的Turkish参数
  var urlQuery = new URLSearchParams(window.location.search);
  var wordParam = urlQuery.get('Turkish');
  if(wordParam) {
    // 参数存在时直接请求对应词条内容
    $('#gsearchsimple').val(wordParam);
    $.ajax({
      url:"gb-tr.php",
      method:"POST",
      data:{edata:wordParam},
      success:function(data){
        $('#detail').html(data);
      }
    });
  }
});

• 第三步：修复SQL注入风险（安全优化，避免站点被恶意攻击）
  你当前直接拼接用户输入到SQL语句的写法存在严重安全漏洞，需要改为预编译参数绑定的写法，以gb-tr.php中词条查询逻辑为例：

if(isset($_POST['edata'])){
  $edata = trim($_POST["edata"]);
  // 用?作为占位符，不要直接拼接变量
  $query = "SELECT * FROM gbtr WHERE English = ? or Turkish = ? LIMIT 5";
  $statement = $connect->prepare($query);
  // 执行时传入参数，自动处理转义
  $statement->execute([$edata, $edata]);
  $result = $statement->fetchAll();
  // 后续渲染逻辑保持不变
}

搜索联想查询的SQL逻辑也按照同样规则修改即可。

内容的提问来源于stack exchange，提问作者H. Orhon