将 JavaScript 生成的 URL 应用于 PHP 数据表格-php教程-PHP中文网

将 JavaScript 生成的 URL 应用于 PHP 数据表格

碧海醫心

发布： 2025-10-21 11:59:00

原创

843人浏览过

将 javascript 生成的 url 应用于 php 数据表格

本文档旨在指导开发者如何将 JavaScript 动态生成的 API URL 应用于 PHP 数据表格，以实现根据用户会话动态加载数据的功能。通过详细的代码示例和步骤说明，帮助开发者理解如何在前端生成 URL 并传递给后端，最终在数据表格中展示相应数据。

前端 JavaScript 部分

动态生成 URL

首先，我们需要使用 JavaScript 函数来动态生成 API 的 URL。这个 URL 需要包含当前用户的会话信息，以便后端能够根据用户身份返回相应的数据。

function newdatagrid(){
    SESION_USUARIO = obtenerUsuarioSesion(); // 获取用户会话信息
    var usuario = SESION_USUARIO;
    console.log('El usuario es: ', usuario);

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

    console.log( ourl);
    return ourl;
}

登录后复制

代码解释：

obtenerUsuarioSesion()：这是一个自定义函数，用于获取当前用户的会话信息。你需要根据你的具体实现来修改这个函数。
usuario：存储从会话中获取的用户信息。
ourl：根据用户信息构造完整的 API URL。

使用 jQuery DataGrid 组件

接下来，我们将使用 jQuery DataGrid 组件来展示数据。在 JavaScript 中，我们需要初始化 DataGrid，并将其 url 属性设置为动态生成的 URL。

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

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({ // 初始化 DataGrid
        singleSelect: true,
        required:true,
        method: 'get',
        url:ourl, // 设置动态 URL
        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;
}

登录后复制

代码解释：

$('#dgper3').datagrid({...})：使用 jQuery 选择器找到 ID 为 dgper3 的元素，并将其初始化为 DataGrid。
url: ourl：将动态生成的 URL 赋值给 DataGrid 的 url 属性。
columns：定义 DataGrid 的列结构，包括字段名、标题和宽度等。

在 PHP 中调用 JavaScript 函数

为了在页面加载时自动执行 JavaScript 函数，我们需要在 PHP 代码中嵌入 JavaScript 代码。

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

登录后复制

代码解释：

这段 PHP 代码会在页面加载时执行 newdatagrid() 函数，从而动态生成 URL 并初始化 DataGrid。

后端 PHP 部分

简化 HTML 结构

在 PHP 文件中，我们只需要保留 DataGrid 的基本 HTML 结构，不需要指定静态 URL。

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

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

登录后复制

代码解释：

id="dgper3"：这个 ID 将被 JavaScript 代码用来初始化 DataGrid。

API 端点

你的 API 端点（例如：http://localhost/apis/alumnosasignados/24）需要返回 JSON 格式的数据，以便 DataGrid 可以正确解析和展示数据。确保你的API能够接收用户ID作为参数，并返回相应的数据。

JSON 数据示例：

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

登录后复制

完整示例

以下是一个完整的示例，展示了如何将 JavaScript 生成的 URL 应用于 PHP 数据表格。

PHP 文件 (myphpfile.php):

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>DataGrid Example</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>
    <script type="text/javascript">
        function obtenerUsuarioSesion() {
            // 替换为你的获取用户会话信息的逻辑
            return 24; // 示例：返回用户ID 24
        }

        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;
        }
    </script>
</head>
<body>
    <table id="dgper3"></table>

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

登录后复制

注意事项：