是否可以在不刷新页面的情况下更改现有代码以将按钮设置为禁用/启用状态?

代码正常工作，但需要刷新页面才能禁用/启用按钮(页面显示超过30个带有按钮的产品(产品按钮使用相同的代码创建)。是否可以在不刷新页面的情况下更改按钮禁用/启用状态？

上级：问题已解决，注释中的代码

禁用代码

<script>
function beCheerful() {
<?php
$cookie_basket = $_COOKIE['basket'];    
$tempo = urlencode($cookie_basket);
$countChars = mb_strlen($tempo);
?>
let test = '<?php echo $countChars;?>';
window.addEventListener("DOMContentLoaded", function() {
[...document.querySelectorAll('[disabled]')].forEach(btn => btn.disabled = test > 50)
});
}
for (var i = 0; i < 1; i++) {
beCheerful();
}
</script>

按钮代码

<button disabled OnClick="beCheerful();" id="bt1" class="btn btn-warning btn-lg btn-block tobasket <?php echo $elem['content_tr'] ?>" product_id="<?php echo $v['id']; ?>" name="<?php echo $prdata['full_name'] ?>" nametr="<?php echo $prdata['name1_tr'] ?>" url="<?php echo $cur_url; ?>catalog/<?php echo $v['img_url']; ?>" price="<?php echo $v['price']; ?>" <?php if($v['sold']==1) echo 'sold="true"'; ?>><?php echo $elem['content'] ?></button>

看起来你的JavaScript程序中嵌入了PHP，并且你想要某种实时更新系统在数据更改时更改按钮状态。当客户端从服务器请求页面时，服务器将执行 PHP 代码，然后将echo语句的结果插入到代码中。这意味着客户端看到的所有都是 PHP 执行的结果，如下所示：

let test = '10';

客户端无法执行PHP代码进行实时更新;只有服务器可以。这就是为什么您必须刷新页面才能在您的情况下更新页面的原因。再次调用beCareful函数也无济于事，因为当用户最初加载页面时，PHP 代码已经被替换为结果。

如果我是你，我会重构你的代码，以便有一个只包含数据的PHP页面。然后，从 JavaScript 代码执行XMLHttpRequest以检索 PHP 代码的评估内容，并使用该数据根据需要设置按钮disabled属性。要使此更新生效，您需要使用setInterval将请求包装在计时器循环中：

setInterval(function() {
var request = new XMLHttpRequest();
request.addEventListener("load", function() {
console.log(request.responseText); // This will be the response you'll get from the PHP page when you request it; use this data to set the button `disabled` attributes
});
request.open("GET", "data.php"); // Or wherever your PHP file will be
request.send();
}, 3000); // Update every 3,000 milliseconds, or 3 seconds

更进一步的是让 PHP 页面使用 PHPjson_encode命令序列化 JSON 格式的数据，然后让 JavaScript 使用JSON.parse(request.responseText)反序列化这些数据。这样，您可以在一个漂亮的数据结构中一次发送多个"数据片段"。

旁注：从安全角度来看，在HTML中使用PHP可能会导致代码中存在跨站点脚本漏洞(XSS)。例如，按钮的代码包含以下 PHP 代码段：

<?php echo $elem['content'] ?>

问题是，如果$elem['content']返回用户写入的数据会发生什么？如果我能够访问您的程序编辑器来编辑$elem['content']的结果并将其设置为

sample text sample text <script>alert("Oh no! Something that wasn't meant to execute has been executed!");</script> more sample text

然后，您的代码将执行<script>元素的内容。虽然这个例子是温和的，但可能有更严重的代码片段可能会损坏您的系统(例如，在客户端执行恶意任务，例如删除用户帐户)。要解决此问题，请使用 PHP 中的htmlspecialchars函数(有关更多详细信息，请参阅此 StackOverflow 答案)，该函数清理给定的输入文本，并旨在确保无法编写文本来执行 XSS 攻击(例如，它将<script>替换为<script>，它仍将呈现为对用户的<script>，但不会导致代码被执行)。

感谢詹姆斯·利夫西的回答(php - 不是实时模式)代码被转换为完整的js(或java)到这个，这解决了我的问题，并且在实时模式下工作，无需重新加载页面。

代码(可以做得更简单，但对我来说更重要的条件 - 它正在工作)

<script>
//getting cookie
function getCookie(basket) {
var name = basket + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
//counting lenght
function checkCookie(check_num) {
var user=getCookie("basket");
var test_user=encodeURI(user);
var check_num=test_user.length;
return check_num;
}
function checkBasketCoockie() {
let test=checkCookie();
if (test > 100){
let buttons = document.getElementsByClassName("tobasket");
for (let i = 0; i < buttons.length; i++) {
buttons[i].disabled = true;
}
}else{
let buttons = document.getElementsByClassName("tobasket");
for (let i = 0; i < buttons.length; i++) {
buttons[i].disabled = false;
}
}
}
</script>

在按钮上，页面加载是

OnClick="checkBasketCoockie(); or onload="checkBasketCoockie()"

相关内容

最新更新

热门标签：