问题：

Question

在以下SSCCE中，

我有一个字符串，其中包含三个div的HTML。
我向除{1}之外的所有style="display:none;"添加div属性。
我向除了最后一个div之外的所有onclick添加了一个按钮，并添加了一个JS div事件监听器，它应该将当前style="display:none;"的样式属性更改为{{ 1}}（当前div的{{1}}属性传递给JS函数。）和下一个id（它的div也传递给JS函数）样式属性为id
我向提交style="display:block;"的最后submit添加了div按钮。我没有为此按钮编写form的{{1}}属性或任何事件监听器，因为这不是现在关注的问题。
我打印div。

问题：

传递给按钮单击事件的JS事件侦听器的action和form在名为currentId的函数中计算，该函数采用nextId和{{1作为参数。然后，它会检查哪个returnCurrentId有$array_of_divs并将其设置为$array_of_ids。然后，div旁边的ID变为style="display:none;"。

当JS更改current_id的样式属性时，问题出现了，$array_of_ids已在客户端传递给它next_id，服务器端没有任何变化。因此，在服务器端，传递给div的{{1}}是相同的，而显示属性没有任何变化，因此第一个和第二个id的{{1}}相同返回。它们被传递给JS，然后再次显示相同的$array_of_ids。

我的努力：

所以我在这里阅读了AJAX，并尝试在returnCurrentId的{{1}}中发送名为id的变量，并在服务器端尝试检查是否$ _REQUEST包含它，当它包含它时，我对样式属性进行了相同的更改，但它似乎不包含它。

问题：

我预计我会将代码块放在错误的位置，但是我会把它放在哪里。

那么有人可以给我一些提示/建议/解决方案吗？

div

Answer 1

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参数必须是服务器上文件的地址，并且您必须使用指向该文件的有效网址。

另一个想法。您可以使用以下方法发送帖子信息：

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，here，您可以找到有关该主题的更多信息。

修改

以下代码（基于你的代码）适用于我（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>'; ?>
祝你好运。

AJAX：如何在按钮点击时更改客户端和服务器端的值？

问题：

我的努力：

问题：

1 个答案: