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

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

聖光之護

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

原创

744人浏览过

在 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;
}

登录后复制

代码解释：

杰易OA办公自动化系统6.0

基于Intranet/Internet 的Web下的办公自动化系统，采用了当今最先进的PHP技术，是综合大量用户的需求,经过充分的用户论证的基础上开发出来的，独特的即时信息、短信、电子邮件系统、完善的工作流、数据库安全备份等功能使得信息在企业内部传递效率极大提高，信息传递过程中耗费降到最低。办公人员得以从繁杂的日常办公事务处理中解放出来，参与更多的富于思考性和创造性的工作。系统力求突出体系结构简明

查看详情

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

3. 调用 JavaScript 函数 (PHP)

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

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

登录后复制

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

完整示例

PHP 文件 (myphpfile.php):




    
    Dynamic DataGrid
    
    
    
    
    


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

登录后复制

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"
    }
]

登录后复制