当前位置: 首页 > 面试题库 >

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

燕智
2023-03-14
问题内容

在以下SSCCE中,

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

问题:

currentIdnextId传递到按钮点击事件的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_backURLXMLHTTPRequest.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