上下文:-
这个问题是关于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'];
});