如何更改HTML元素的值's属性(在客户端和服务器端）

How to change the value of an HTML element's attribute (on both client and server side) on the click of a button?

本文关键字：属性 客户端 服务器端 元素 HTML 何更改      更新时间：2023-09-26

上下文：-

这个问题是关于AJAX的一些基本概念。我一直在学习本教程和JS部分的这个例子，以及PHP部分的这个（本页的最后一个）。

因此，假设场景是在单击button时调用JS。现在，当点击按钮并调用JS函数时，整个网页已经加载。因此，如果我从XMLHTTPRequest.open()函数传递的URL中的JS传递一个变量（并使用GET方法），该变量将被发送到服务器端的$_REQUEST数组。

1.既然页面已经加载，那么在元素已经显示的情况下，我如何更改，比如元素属性的值

场景：-

我有一个用于三个div的带有HTML的PHP array，它们会被响应/显示。最初，除第一个外，所有div都具有display:none;样式的属性。现在，单击第一个div中的按钮，我想调用JS函数，其中我将display:none设置为第一个div，将display:block;设置为第二个div。现在这很容易但是我也希望在服务器端的上述数组中相应div的HTML中的display属性中进行此更改

所以我想我需要AJAX。按照这个例子，我尝试在URL中发送一个变量，然后尝试从$_REQUEST获取变量，但$_REQUEST似乎不包含它。虽然我在这里问了这个问题，但我觉得这可能是因为我正在编写代码以从$_REQUEST获取变量的页面部分已经执行，我想知道我应该在哪里编写代码，只有在点击上述按钮后才能执行？

2.由于页面的代码已经执行，我们基本上在哪里编写AJAX脚本

注意：-不要建议使用JQuery。我不能使用JQuery，但我可以使用YUI。我搜索了SO，并使用一些JQuery方法找到了解决方案。

JS代码：-

function xyz(var divIdOne, var divIdTwo) {
    document.getElementById(params.divIdOne).style.display = "none";
    document.getElementById(params.divIdTwo).style.display = "block";
    document.getElementById(params.divIdTwo).style.border = "5px solid red";
    var xmlhttp;
    if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest();}
    else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
    xmlhttp.open("GET","myfile.php?pass_back="+"pass_back",true);
    xmlhttp.send();
}

在服务器端PHP脚本中，我在哪里编写代码，从URL接收变量，以便在单击按钮（单击事件调用此JS函数的按钮）后执行。

我试图在服务器文件中的一个随机位置做这样的事情，但没有成功：

foreach($_REQUEST as $requestkey => $requestvalue) { //loop for just checking the elements of $_REQUEST
    echo $requestkey.': '.$requestvalue;
}
if (array_key_exists('pass_back', $_REQUEST)) {
    foreach ($array_of_divs as $div) {
        if ($div->id=$divIdOne) {
            $div->style='display:none';
        } else if ($div->id=$divIdTwo) {
            $div->style='display:block';
        }
    }
} else {echo 'FALSE!';}

让我看看我是否正确理解：

您可以使用js在一些div上设置display属性。您希望更新服务器上的一些标志，以便下次发出请求时，您可以获得与客户端相同的显示属性。

AJAX是异步的，所以您可以在任何地方调用它（您的按钮点击、文档准备等）。

向服务器中的某个url发出AJAX请求，该url可以回答该请求，并用您想要的值更新您的标志。您可能需要某种持久性来保留这些，以便下次重新加载页面时使用，否则您不会注意到任何更改。

确保您了解AJAX是什么。

这里有一个AJAX函数的例子：

function ajax(url, method, send, success){
  var x = new XMLHttpRequest || new ActiveXObject('Microsoft.XMLHTTP'), ec = [], s, sl;
  if(send){
    for(var i in send){
      ec.push(encodeURIComponent(i)+'='+encodeURIComponent(send[i]));
    }
    s = ec.join('&').replace(/%20/g, '+'); sl = s.length;
  }
  else{
    s = null; sl = 0;
  }
  if(method.match(/^get$/i)){
    s = s === null ? '' : '?'+s;
    x.open('GET', url+s); x.send();
  }
  else{
    x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    x.setRequestHeader('Content-length', sl);
    x.setRequestHeader('Connection', 'close');
    x.open('POST', url); x.send(s);
  }
  if(success){
    x.onreadystatechange = function(){
      if(x.readyState === 4 && x.status === 200){
        /* when PHP has processed what you send through `.send()` or a $_GET URL
          your function will fire with the evaluated responseText passed to it
        */
        success(eval('('+x.responseText+')'));
      }
    }
  }
}
ajax('page.php', 'GET', {property:'value', property2:'value2'}, function(data){
  /* when PHP has processed what you send through `.send()` or a $_GET URL
    the anonymous function here executes sending what should be JSON
    (if you `echo json_encode($associativeArrayYouMake);`on your PHP page)
    through the data argument here - so data is JSON containing your PHP
    Associative Array properties
  */
  // affect the DOM
  // document.getElementById('someId').innerHTML = data.some_property;
  // or document.getElementById('someId').innerHTML = data['some_property'];
});
相关文章：