在 PHP 数据表格中使用 JavaScript 传递的 URL-php教程-PHP中文网

在 PHP 数据表格中使用 JavaScript 传递的 URL

聖光之護

发布： 2025-10-22 08:48:14

原创

734人浏览过

在 php 数据表格中使用 javascript 传递的 url

本文档旨在提供一种解决方案，用于在 PHP 数据表格中动态使用 JavaScript 生成的 URL。通过 JavaScript 获取 API 地址，并将其传递给 PHP，最终在数据表格中展示对应的数据，以实现根据用户会话动态加载数据的功能。

动态配置数据表格 URL

通常，数据表格（例如 EasyUI DataGrid）的 url 属性是静态配置的。但有时我们需要根据用户的会话或其他动态因素来改变这个 URL，以便加载不同的数据。本教程将介绍如何使用 JavaScript 获取 URL，并将其应用到 PHP 生成的数据表格中。

核心思路

核心思路是：

在 JavaScript 中生成 URL： 使用 JavaScript 函数获取用户会话信息，并根据这些信息动态生成 API 的 URL。
将 URL 传递给 DataGrid： 不再在 HTML 中静态定义 url 属性，而是在 JavaScript 中初始化 DataGrid，并将动态生成的 URL 赋值给 url 属性。
PHP 负责渲染 DataGrid 容器： PHP 只负责输出 DataGrid 的 HTML 容器，不包含 url 等数据相关的配置。

实现步骤

1. HTML 结构 (PHP)

在 PHP 文件中，只保留 DataGrid 的基本 HTML 结构，移除 data-options 中的 url 属性。

立即学习“PHP免费学习笔记（深入）”；

<table id="dgper3"></table>

登录后复制

2. JavaScript 代码

在 JavaScript 中，编写一个函数来动态生成 URL，并使用 jQuery EasyUI 的 datagrid 方法来初始化 DataGrid，并将生成的 URL 赋值给 url 属性。

function newdatagrid(){
    SESION_USUARIO = obtenerUsuarioSesion();
    var usuario = SESION_USUARIO;
    console.log('El usuario es: ', usuario);

    var ourl = 'http://localhost/apis/alumnosasignados/' + usuario;

    console.log( ourl);

    $('#dgper3').datagrid({
      singleSelect: true,
      required:true,
      method: 'get',
      url:ourl,
      columns:[[
          {field:'id',title:'ID',width:'5%',align:'center'},
          {field:'nombre_completo',title:'Fecha',width:'44%',align:'center'},
          {field:'estado',title:'Descripcion',width:'15%',align:'center'},
      ]]
  });
    return ourl;
}

登录后复制

代码解释：

飞书多维表格

表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

查看详情

obtenerUsuarioSesion(): 这是一个获取用户会话信息的函数，需要根据你的实际情况进行实现。
ourl: 根据用户会话信息动态生成的 API URL。
$('#dgper3').datagrid({...}): 使用 jQuery EasyUI 的 datagrid 方法初始化 DataGrid。
- url: ourl: 将动态生成的 URL 赋值给 url 属性。
- columns: 定义 DataGrid 的列。

3. 调用 JavaScript 函数 (PHP)

在 PHP 文件中，使用 zuojiankuohaophpcnscript> 标签调用 JavaScript 函数 newdatagrid()。

<?php
  echo '<script type="text/javascript">' , 'newdatagrid();' , '</script>';
?>

登录后复制

注意： 确保 JavaScript 代码在 DataGrid 的 HTML 元素加载完成后执行。通常可以将 JavaScript 代码放在页面底部，或者使用 jQuery 的 $(document).ready() 方法。

完整示例

PHP 文件 (myphpfile.php):

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Dynamic DataGrid</title>
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/color.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
    <table id="dgper3"></table>

    <script type="text/javascript">
        function newdatagrid(){
            // 替换成你实际获取用户会话信息的函数
            function obtenerUsuarioSesion() {
                // 示例：从 localStorage 获取
                return localStorage.getItem('userId') || '24'; // 默认值
            }

            SESION_USUARIO = obtenerUsuarioSesion();
            var usuario = SESION_USUARIO;
            console.log('El usuario es: ', usuario);

            var ourl = 'http://localhost/apis/alumnosasignados/' + usuario;

            console.log( ourl);

            $('#dgper3').datagrid({
              singleSelect: true,
              required:true,
              method: 'get',
              url:ourl,
              columns:[[
                  {field:'id',title:'ID',width:'5%',align:'center'},
                  {field:'nombre_completo',title:'Fecha',width:'44%',align:'center'},
                  {field:'estado',title:'Descripcion',width:'15%',align:'center'},
              ]]
          });
            return ourl;
        }

        $(document).ready(function(){
            newdatagrid();
        });
    </script>
</body>
</html>

登录后复制

JavaScript (模拟获取用户ID):

// 模拟设置用户ID到localStorage
localStorage.setItem('userId', '66');

登录后复制

API 示例 (https://www.php.cn/link/c545987fb970f7b1f05c9f2a2f3340dd):

[
    {
        "id": 66,
        "nombre_completo": "Ingrid López",
        "estado": "INSCRITO"
    },
    {
        "id": 67,
        "nombre_completo": "Elmer Martinez",
        "estado": "INSCRITO"
    }
]

登录后复制