1. 首页
  2. 问题
  3. AJAX：如何在单击按钮时在客户端和服务器端更改值？
小编典典

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

ajax

在以下SSCCE中，

  1. 我有一个字符串，其中包含3 div秒的HTML 。
  2. 我style="display:none;"为div除第一个之外的所有s 添加了一个属性。
  3. 我添加一个按钮，所有的div小号除了最后一个，并添加一个JS onclick事件侦听器，应该改变当前div‘样式属性s到style="display:none;"（当前div的id传递给JS功能属性），并在未来div的（这id是还传递给JS函数）样式属性style="display:block;"
  4. 我submit在最后div提交一个按钮form。我没有为此按钮编写“ 事件action” form或“事件监听器” 的属性，因为现在这不是问题。
  5. 我打印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>';
?>

阅读 227

收藏
2020-07-26

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

祝好运。

2020-07-26