Question

背景： -

这个问题是关于AJAX的一些基本概念。我一直关注this tutorial和此示例for the JS part以及this（本页最后一个）for the PHP part。

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

1。现在，由于页面已经加载，因此如何在元素已经显示的情况下对元素属性的值进行更改。

SCENERIO： -

我有三个array的{{1}}与HTML，并且它们会被回显/显示。最初除{1}之外的所有div都具有div样式属性。现在，在第一个display:none;的点击按钮上，我想调用一个div函数，我将JS设置为第一个display:none ，div到第二个display:block;。现在这很容易。 但是我想在服务器端上述数组中的各个div的HTML属性中进行此更改。

所以我想我需要div。在this example之后，我尝试在网址中发送变量，然后尝试从AJAX获取变量，但$_REQUEST似乎不包含变量。虽然我asked this question here，但我觉得这可能是因为我正在编写代码以从$_REQUEST获取变量的页面部分已经执行，我想知道我应该在哪里编写代码只在点击上述按钮后执行？

2。基本上我们在哪里编写AJAX脚本，因为页面的代码已经执行了？

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

JS代码： -

$_REQUEST

在服务器端的PHP脚本中，我编写从URL接收变量的代码，以便在单击按钮后执行它（click事件调用此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();
}

Answer 1

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

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

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

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

确保您了解AJAX是什么。

Answer 2

这是一个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'];
});

如何在单击按钮时更改HTML元素属性的值（在客户端和服务器端）？

2 个答案: