如何在 jQuery 加载时传递 PHP 变量？答案

【问题标题】：How To Pass PHP Variables On jQuery Load?如何在 jQuery 加载时传递 PHP 变量？
【发布时间】：2012-10-09 15:24:46
【问题描述】：

我有这样的代码：

<?php
$username = 'johndoe';
?>

<head>
<script>
...
$('a.manage-content-link').click(function (e) {
    var self = $(this),
        file = self.siblings('input[type="hidden.block-hidden-input"]').val();
    self.next(".manage-content-wrap").find(".manage-content").load("file-" + file + ".php");
    e.preventDefault();
});
...
</script>
</head>

<body>
...
<li><input type="hidden" value="001" class="block-hidden-input" />
    <a href="#" id="manage-1" class="manage-content-link">
        <img src="images/web-block/web-block1.jpg"/>
        <span class="orange-notice">Click to Edit Content</span>    
    </a>
</li>

<li><input type="hidden" value="002" class="block-hidden-input" />
    <a href="#" id="manage-2" class="manage-content-link">
        <img src="images/web-block/web-block2.jpg"/>
        <span class="orange-notice">Click to Edit Content</span> 
    </a>
</li>
...
</body>

如您所见，每次用户单击“manage-content-link”类时，manage-1、manage-2、...甚至 manage-X（多个 li 标签）jQuery 都会加载“file- XXX.php”。其中 XXX 实际上是 li 标签中隐藏输入的值。

但是“file-XXX.php”需要来自 PHP 标记的 $username 和 ID 本身，即“manage-X”。如何传递“file-XXX.php”所需的这2个变量，一个来自PHP，另一个来自ID？

【问题讨论】：

当你说传递变量时，你是什么意思？
例如：当用户点击第一个li标签时，它包含ID的名称：manage-1，它会加载file-001.php。在 file-001.php 上，我需要处理“username”和“manage-1”变量。所以，我需要“johndoe”和“manage-1”。如何通过这两个，以便我可以在 file-001.php 上“捕获”它

标签： php jquery

【解决方案1】：

使用 jQuery 的 .ajax() 代替 .load()：http://api.jquery.com/jQuery.ajax/

$('a.manage-content-link').click(function (e) {
    var self = $(this),
        file = self.siblings('input[type="hidden.block-hidden-input"]').val(),
        this_id = self.attr('id');

    $.ajax({
      url: "file-" + file + ".php",
      data: { username: "<?php echo $username;?>", id: this_id },
      context: this,
      success: function(data) {
        $(this).next(".manage-content-wrap").find(".manage-content").html(data);
      }
    });
    e.preventDefault();
});

如果您想将脚本保留在外部，则不能依靠 php 在脚本中回显 $username。因此，您可以通过几种方式添加用户名。您可以在页面中的某处进行隐藏输入，其值等于用户名；您可以将用户名作为data-username 属性附加到元素（如正文）；或者你可以只在头文件中有一个纯粹定义用户名的脚本块。例如：

<input type="hidden" name="username" value="<?php echo $username;?>>

或者：

<body data-username="<?php echo $username;?>">

或者：

<head>
    <script>
        var username = "<?php echo $username;?>";
    </script>
</head>

【讨论】：

身份证的名字呢？我也需要将“manage-1”、“manage-2”、...、“manage-x”传递给 file-XXX.php。
抱歉，我没有意识到 manage-# id 和 ### id。编辑显示。

【解决方案2】：

在您的<body> 中，您可以添加一个隐藏字段

<input type="hidden" value="<?=$username?>" id="username" />

在你的 jquery 中，

$('a.manage-content-link').click(function (e) {
    var self = $(this),
    file = self.siblings('input[type="hidden.block-hidden-input"]').val();
    var username = $("username").val(); //use this variable where ever you want
    var ids = $(this).attr('id'); // this is the id
    self.next(".manage-content-wrap").find(".manage-content").load("file-" + file + ".php?id="+ids+"&username="+username);  //and in php file usee $_GET
    e.preventDefault();
});

【讨论】：

身份证的名字呢？我也需要将“manage-1”、“manage-2”、...、“manage-x”传递给 file-XXX.php。
但是，如何从 file-001.php 的角度“捕捉”这些变量？我相信这不是 POST 或 GET 方法，对吧？
兄弟，我在这里使用你的代码：self.next(".manage-content-wrap").find(".manage-content").load("file-" + file + ".php?id="+id+"&username="+username);但似乎代码未能加载正确的文件名。因为当我更改为以下代码时： self.next(".manage-content-wrap").find(".manage-content").load("file-001.php");一切看起来都很正常。似乎您的代码没有从 input[type="hidden.block-hidden-input"] 获得“001”。
要加载的正确文件名是：file-001.php、file-002.php等，其中001和002是基于
让我们continue this discussion in chat

【解决方案3】：

$('a.manage-content-link').click(function (e) {
    var self = $(this);
        file = self.prev('.block-hidden-input').val();
       self.next(".manage-content-wrap").find(".manage-content").load("file-" + file + ".php");
    e.preventDefault();
});

我建议您将用户名存储在会话中，并使用$_SESSION['username'] 在 php 中获取该值，而不是从脚本中传递用户名，否则将来会导致安全问题。

DEMO

【讨论】：