AJAX: How to change a value on client side as well as server side on button click?

后端未结

关注

 1  1391

广开言路

In the following SSCCE,

I have a string which contains the HTML for three divs.
I add a style="display:none;" attribute

相关标签:

1条回答

面向向阳花

2021-01-22 07:37

Zarah, a couple of ideas that might help you:

As I said in my comment, try to change this bit:

xmlhttp.open("GET","C:/xampp/htdocs/testing.php?pass_back="+"pass_back",true);

for something like:

xmlhttp.open("GET","testing.php?pass_back="+"pass_back",true);

taking into consideration that that's a valid route to a file called testing.php in your web server. The url parameter of the open() method, must be an address to a file on a server and you must use a valid URL that points to that file.

Another idea. You can send post information using this approach:

xmlhttp.open("POST","testing.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("passback=passback");

so you could try to send it using POST instead of GET to see what happens. It might throw some light into the matter.

More things.

It is possible that due to your php configuration, $_REQUEST doesn't contain anything whereas $_GET does. This could be a good reason to check $_GET instead of $_REQUEST. However, if you do want to use $_REQUEST, here you can find more info about the topic.

EDIT

The following code (based on yours) works for me (debian APACHE/php 5.4). I've put all the code on the same page. I don't like it very much but it's only to point out that it works. The AJAX part sends the data to main.php and main.php simply sends back what it receives. Then the AJAX part simply alerts the answer from the server.

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>';
?>

Good luck.

0 讨论(0)