在以下SSCCE中,
div
秒的HTML 。style="display:none;"
为div
除第一个之外的所有s 添加了一个属性。div
小号除了最后一个,并添加一个JS onclick
事件侦听器,应该改变当前div
‘样式属性s到style="display:none;"
(当前div
的id
传递给JS功能属性),并在未来div
的(这id
是还传递给JS函数)样式属性style="display:block;"
submit
在最后div
提交一个按钮form
。我没有为此按钮编写“ 事件action
” form
或“事件监听器” 的属性,因为现在这不是问题。在currentId
和nextId
传递到按钮点击事件的JS事件监听器是在一个名为函数计算returnCurrentId
它接受
$array_of_divs
并$array_of_ids
作为参数。然后,它检查div
具有的style="display:none;"
并将其设置为current_id
。然后,旁边的ID将$array_of_ids
成为中的ID
next_id
。
当JS更改了div
s 的样式属性,该s的id
s
属性已在客户端传递给它,而在服务器端没有任何变化时,就会出现问题。因此,在服务器端,无需更改显示属性就可以将$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