AJAX：如何在单击按钮时在客户端和服务器端更改值？
在以下SSCCE中，
- 我有一个字符串，其中包含3
div秒的HTML 。 - 我
style="display:none;"为div除第一个之外的所有s 添加了一个属性。 - 我添加一个按钮，所有的
div小号除了最后一个，并添加一个JSonclick事件侦听器，应该改变当前div‘样式属性s到style="display:none;"（当前div的id传递给JS功能属性），并在未来div的（这id是还传递给JS函数）样式属性style="display:block;" - 我
submit在最后div提交一个按钮form。我没有为此按钮编写“ 事件action”form或“事件监听器” 的属性，因为现在这不是问题。 - 我打印div的。
问题：
在currentId和nextId传递到按钮点击事件的JS事件监听器是在一个名为函数计算returnCurrentId它接受
$array_of_divs并$array_of_ids作为参数。然后，它检查div具有的style="display:none;"并将其设置为current_id。然后，旁边的ID将$array_of_ids成为中的ID
next_id。
当JS更改了divs 的样式属性，该s的ids
属性已在客户端传递给它，而在服务器端没有任何变化时，就会出现问题。因此，在服务器端，无需更改显示属性就可以将$array_of_ids其传递给它returnCurrentId，因此返回id与第一个和第二个相同的div。它们被传递给JS，然后再次div显示相同的内容。
我的努力：
所以我一直在AJAX读了这里，我试图发送一个名为变量pass_back中URL的XMLHTTPRequest.open(GET, URL, TRUE)，并在服务器端，试图检查是否$ _REQUEST包含它，当它发生了，我做的风格同样变化属性，但似乎不包含它。
我预计我会将代码块放在错误的位置，但是那我应该放在哪里。
那么谁能给我一些提示/建议/解决方案？
<?php
echo '<html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function clickButton(currentId, nextId) {
alert(currentId+","+nextId); //check
document.getElementById(currentId).style.display = "none";
document.getElementById(nextId).style.display = "block";
document.getElementById(nextId).style.border = "5px solid red";//check
//**************************
var xmlhttp;
if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); }
else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
xmlhttp.open("GET","C:/xampp/htdocs/testing.php?pass_back="+"pass_back",true);
xmlhttp.send();
//**************************
}
</script>
</head><body>';
//String of all the div's
$haystack = '<div id="div1" style="width:500px; height:250px; background-color:#fd77ba">Div1</div>
<div id="div2" style="width:500px; height:250px; background-color:#7781fd">Div2</div>
<div id="div3" style="width:500px; height:250px; background-color:#77fd9b">Div3</div>';
//Adding divs as DOM objects to an array
require 'C:\\xampp\\htdocs\\simple_html_dom.php';
$html = str_get_html($haystack);
foreach ($html->find('div') as $div) {
$array_of_divs[] = $div;
}
//Extract id attributes from all elements of $array_of_divs and add to $array_of_ids
foreach ($array_of_divs as $div) {
$array_of_ids[] = $div->id;
}
//Add style="display:none;" property to all divs except the first one
for ($i=1; $i<count($array_of_divs); $i++) {
$array_of_divs[$i]->style = 'display:none;';
}
//Strings of the pseudo button to navigate to the next div on the same page and real button to navigate to another page
$pseudo_btn = '<button type="button" onClick="clickButton(\''.returnCurrentId($array_of_divs, $array_of_ids)['current_id'].'\',\''.returnCurrentId($array_of_divs, $array_of_ids)['next_id'].'\')" style="font-family:Oxygen,sans-serif; font-style: normal;font-variant: normal;font-weight: normal;font-size: 99%;line-height: normal;font-size-adjust: none;font-stretch: normal; background-color: #494f50; color: #ffffff; padding-top: 5px;padding-right: 10px;padding-bottom: 5px; padding-left: 10px;margin-top: 50px;margin-right: 10px;margin-bottom: 50px;margin-left: 10px; text-decoration:none;">Submit</button>';
$real_btn = '<span style="background-color:red;"><input type="submit" name="submit" value="Submit" style="font-family:Oxygen,sans-serif; font-style: normal;font-variant: normal;font-weight: normal;font-size: 99%;line-height: normal;font-size-adjust: none;font-stretch: normal; background-color: #494f50; color: #ffffff; padding-top: 5px;padding-right: 10px;padding-bottom: 5px; padding-left: 10px;margin-top: 50px;margin-right: 10px;margin-bottom: 50px;margin-left: 10px; text-decoration:none;"></span>';
//Add $pseudo-btn to all except last div on this page, add $real_btn to the last div
$last_id = end($array_of_ids);
for ($j=0; $j<count($array_of_ids); $j++) {
if ($array_of_ids[$j] !== $last_id ) {
$array_of_divs[$j]->innertext .= $pseudo_btn;
} else {
$array_of_divs[$j]->innertext .= $real_btn;
}
}
//Print all the divs
echo '<form method="post" enctype="multipart/form-data" accept-charset="utf-8">';
foreach ($array_of_divs as $div) { echo $div; }
echo '</form>';
//**********************************************
//IF $_REQUEST CONTAINS pass_back (i.e. THE BUTTON HAS BEEN PRESSED, CHANGE DISPLAY PREPERTY OF CURRENT AND NEXT DIV
if (array_key_exists('pass_back',$_REQUEST)) {
foreach ($array_of_divs as $divs_el) {
if ( $divs_el->id == returnCurrentId($array_of_divs, $array_of_ids)[current_id] ) {
$divs_el->style = 'display:none;';
} else if ( $divs_el->id == returnCurrentId($array_of_divs, $array_of_ids)[next_id] ) {
$divs_el->style = 'display:block;';
}
}
} else {
echo '$_REQUEST does not contain pass_back';
}
//***********************************************
//This function returns the id of the current div which is displayed.
function returnCurrentId($array_of_divs, $array_of_ids) {
for ($c=0; $c<count($array_of_divs); $c++) {
$style_value = $array_of_divs[$c]->style;
$style_value = preg_replace('/\s+/', '', $style_value);//This removes all kinds of white space.
if (strpos($style_value,'display:none') === false) {
$current_id= $array_of_divs[$c]->id;
break;
}
}
$current_position = array_search($current_id, $array_of_ids);
$next_id = $array_of_ids[$current_position + 1];
$array_to_pass= array('current_id'=>$current_id, 'next_id'=>$next_id);
return $array_to_pass;
}
echo '</body></html>';
?>
问题答案：
Zarah，有两个想法可能会帮助您：
正如我在评论中所说，尝试更改此位：
xmlhttp.open("GET","C:/xampp/htdocs/testing.php?pass_back="+"pass_back",true);
对于类似的东西：
xmlhttp.open("GET","testing.php?pass_back="+"pass_back",true);
考虑到这是指向Web服务器中名为testing.php的文件的有效途径。open（）方法的url参数必须是 服务器
上文件的地址，并且必须使用指向该文件的有效 URL 。
另一个想法。您可以使用以下方法发送帖子信息：
xmlhttp.open("POST","testing.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("passback=passback");
因此您可以尝试使用POST（而不是GET）发送它，以了解发生了什么。这可能会给事情带来一些启示。
更多的东西。
可能由于您的php配置，$ _ REQUEST不包含任何内容，而$ _GET包含任何内容。这可能是检查$ _GET而不是$
_REQUEST的好理由。但是，如果您确实想使用$
_REQUEST，则可以在此处找到有关该主题的更多信息。
编辑
以下代码（基于您的代码）对我有效（debian APACHE / php
5.4）。我已将所有代码放在同一页上。我不是很喜欢它，但仅是指出它可行。AJAX部分将数据发送到main.php，而main.php只是将其收到的内容发送回去。然后，AJAX部分仅警告服务器的答案。
main.php
<?php
//**********************************************
//IF $_REQUEST CONTAINS pass_back this is an AJAX call, just send back and die.
if (array_key_exists('pass_back',$_REQUEST)) {
echo $_REQUEST["pass_back"];
die();
}
//***********************************************
echo '<html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function clickButton(currentId, nextId) {
//alert(currentId+","+nextId); //check
/*document.getElementById(currentId).style.display = "none";
document.getElementById(nextId).style.display = "block";
document.getElementById(nextId).style.border = "5px solid red";//check*/
//**************************
var xmlhttp;
if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); }
else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
alert(xmlhttp.responseText);
}
}
xmlhttp.open("GET","testing.php?pass_back=pass_back",true);
xmlhttp.send();
//**************************
}
</script>
</head><body>';
//String of all the div's
$haystack = '<div id="div1" style="width:500px; height:250px; background-color:#fd77ba">Div1</div>
<div id="div2" style="width:500px; height:250px; background-color:#7781fd">Div2</div>
<div id="div3" style="width:500px; height:250px; background-color:#77fd9b">Div3</div>';
//Print all the divs
echo '<form method="post" enctype="multipart/form-data" accept-charset="utf-8">';
echo $haystack;
echo '<button type="button" onClick="clickButton(1,2)" style="font-family:Oxygen,sans-serif; font-style: normal;font-variant: normal;font-weight: normal;font-size: 99%;line-height: normal;font-size-adjust: none;font-stretch: normal; background-color: #494f50; color: #ffffff; padding-top: 5px;padding-right: 10px;padding-bottom: 5px; padding-left: 10px;margin-top: 50px;margin-right: 10px;margin-bottom: 50px;margin-left: 10px; text-decoration:none;">Submit</button>';
echo '</form>';
echo '</body></html>';
?>
祝好运。
-
我有一个客户端和一个服务器。当客户端连接到服务器时，服务器向客户端发送消息。如果用户点击“新消息”按钮，我希望服务器向客户端发送一条新消息。我怎样才能做到这一点？ 我的代码（我已经删除了所有 try-Catch） 客户： 处理人: 服务器:
-
由于目前在一个项目中使用ASP.NET4.7webforms，我正在尝试将在后端生成的数据复制到用户的客户端计算机。 换句话说，当用户提交表单时，在后端生成的代码需要复制到用户剪贴板。 这是我的尝试。 application.aspx.cs application.aspx im使用ClientScript.RegisterStartupScript调用客户端函数将编码值粘贴到用户剪贴板...但是
-
问题内容： 我需要在Node.js中有一个完整的基本示例，该示例从（客户端）html按钮onclick事件调用服务器端函数，就像在ASP.NET和C＃中一样。 我是Node.js的新手，并使用Express框架。 有什么帮助吗？ 改进的问题： //服务器端 ： //客户端 问题答案： 这是一个使用Express和HTML表单的示例。 上面的代码将启动Express的实例，该实例是Node的Web应
-
我想在一些计算机之间建立点对点连接，这样用户就可以在没有外部服务器的情况下聊天和交换文件。我最初的想法如下： 我在服务器上制作了一个中央服务器插座，所有应用程序都可以连接到该插座。此ServerSocket跟踪已连接的套接字（客户端），并将新连接的客户端的IP和端口提供给所有其他客户端。每个客户端都会创建一个新的ServerSocket，所有客户端都可以连接到它。 换句话说：每个客户端都有一个Se
-
问题内容： 我试图了解如何执行以下操作： 声明表单的可接受方式是什么。我的理解是，您只需用HTML声明表单，并添加ng-model指令，如下所示： 要发送到服务器的内容。我可以将item对象作为JSON发送到服务器，然后对其进行解释。然后，我可以对对象执行验证。如果失败，则抛出JSON错误，然后发回确切的信息？有接受的方式吗？如何以一种很好的方式将验证错误从服务器推送到客户端？ 我确实需要一个示例
-
我试图了解如何做以下事情： 声明表单的公认方式是什么。我的理解是您只需用超文本标记语言声明表单，然后添加ng-model指令，如下所示： 发送到服务器的内容。我可以将item对象作为JSON发送到服务器，并对其进行解释。然后我可以对对象执行验证。如果失败，我抛出一个JSON错误，并返回具体内容？有没有公认的方法？如何以一种好的方式将验证错误从服务器推送到客户端？ 我真的需要一个例子，但是Angul