如何使用 jquery 获取页面上的值并使用 php 将其回显到页面上

Posted 2023-05-09

【中文标题】如何使用 jquery 获取页面上的值并使用 php 将其回显到页面上

【英文标题】：How to get a value on a page using jquery and echo it onto the page using php

【发布时间】：2021-12-05 01:30:04

【问题描述】：

问题： 我需要在强标签中获取数字 65。 我尝试了以下代码，但它显示 Uncaught ReferenceError。 （我是一个新手，我花了几个小时来创建以下代码，但最终变成了这样......） 请告诉我如何解决这个问题？

我试过的代码：

<script type="text/javascript">
jQuery(document).ready(function ($) 
var getnum;
getnum = $('div.elementor-widget-container p > strong').text();
<?php $abc = "<script>document.write(getnum)</script>"?>   
);
</script>
<?php echo $abc;?>

控制台错误： 未捕获的 ReferenceError：未定义 getnumhtml（代码来自 yith 积分和奖励插件）：

<div class="elementor-element elementor-element-c1d0790 elementor-widget elementor-widget-text-editor" data-id="c1d0790" data-element_type="widget" id="pointsid" data-widget_type="text-editor.default">
    <div class="elementor-widget-container">
        <p>Your credit is  <strong>65</strong> Points</p>                       
    </div>
</div>

谢谢

【问题讨论】：

65这个数字是从哪里来的？做你正在做的事情，用户难道不能简单地将 HTML 编辑成他们想要的任何功劳吗？

嗨，Bolli：代码来自 yith 积分奖励插件，不同用户的积分会有所不同。

【参考方案1】：

你把javascript 和php 混在一起了。您可以将变量从服务器端（即php）传递到客户端（即javascript），但反过来不行！至少不在同一页面上而不使用ajax。你可以用ajax 来做，但你没有在这里使用ajax。但是有一些技巧，不推荐用于生产。

另外值得一提的是，您的问题并不清楚您为什么要这样做。

如果您这样编写代码，您不会收到任何错误：

<script type="text/javascript">
  jQuery(document).ready(function($) 
    let getnum = $('div.elementor-widget-container p > strong').text();
    console.log(getnum);
  );
</script>

这将在控制台中为您提供65。但是，您想使用php 来回显它。

不建议在制作中使用以下“技巧”：

您可以使用“localStorage”来存储您的值并再次检索它！ 您也可以使用“cookies”！

所以你的代码应该是这样的：

<script type="text/javascript">
  jQuery(document).ready(function($) 
    let getnum = $('div.elementor-widget-container p > strong').text();
    localStorage.setItem("getnum", getnum);
  );
</script>

<?php echo "<script>document.write(localStorage.getItem('getnum'));</script>"; ?>

这将使用php 将65 回显到页面上！

让我知道这是否是你要找的东西！

---

经过测试，工作正常！

【讨论】：

嗨 Ruvee：哇，非常感谢您的详细解释和支持。我一如既往地从你那里学到了很多，我投票并选择了你的答案：）。我改变了 localStorage.setItem("getnum", getnum);到 localStorage.setItem('getnum', JSON.stringify(getnum); 它现在显示数字“65”。再次感谢。而且......我想知道你是否可以再教我一件事？结果显示“65 “。你能教我如何在没有“”的情况下获得价值吗？所以它只显示 65。谢谢 Ruvee :)

没问题！乐意效劳。对于单个字符串值，您不必使用 JSON.stringify。在将代码发布到此处之前，我已经对其进行了测试，并确保一切正常。我在 wordpress 5.8.1 上对其进行了测试，并在 firefox 和 chrome 浏览器上运行它。因此，您在上面看到的代码可以正常工作。同样，如果您想使用JSON.stringify，则不必将JSON.stringify 用于单个字符串值BUT，然后确保在获取值时使用JSON.parse 来获取没有"" 引号的值。像这样：JSON.parse(localStorage.getItem('getnum')).

另外，请记住，您正在为用户的浏览器设置一个值，这意味着用户可以访问该值，这意味着他/她可以操纵该值。只是要记住的事情！！！

嗨 Ruvee：再次感谢 :) 您的 JSON 解决方案运行良好（我不知道为什么，但如果没有 JSON 在我身边，它没有任何价值，所以我尝试了......）.. ..和..谢谢你的提醒，我可以问一个简单的问题吗？嗯...这是否意味着用户可以编辑他们的 woocommerce 积分，并且如果他们愿意，它实际上会改变管理员方面的积分？

啊，是的，我现在明白了，你一如既往地帮了大忙，谢谢谢谢:)

【参考方案2】：

Getnum 是在加载文档时定义的。当你访问 getnum 时，它还没有被声明。

【讨论】：

感谢您对 Frenzy 的评论。