0

hi I am currently working on simple passing of variable value from a Javascript/Jquery variable to a php file.

    function show(str){
        if (str == "") {
            document.getElementById("div_window").innerHTML="";
            return;
        }else if(str != ""){
            var xmlhttp=new XMLHttpRequest();
            xmlhttp.onreadystatechange=function() {
                if (this.readyState==4 && this.status==200) {
                    document.getElementById("div_window").innerHTML=this.responseText;
                }
            }
            xmlhttp.open("GET","server.php?q="+str,true);
            xmlhttp.send();
        }
    }

the code above is the only thing i used up until now, but it is for retrieving of html, how do i start to use ajax for simple passing of variable value? where should i start and are there articles you can recommend?

Melvin Esguerra
  • 15
  • 5

3 Answers3

0

You have to think differently about this. You can only request data from a server, not sent data to it. But while requesting data, you can pass data with your request.

Also, I really recommend not using jQuery. https://youmightnotneedjquery.com/

Checkout this post on how to request data with js: https://stackoverflow.com/a/29823632/4563136

(async () => {
  const rawResponse = await fetch('https://yoururl.org/yourlink', {
    method: 'POST',
    body: JSON.stringify({
      testDataKey: 'testDataString',
      testData2Key: 'testData2String',
    })
  });
  const content = await rawResponse.json();

  console.log(content);
})();

You should then be able to access this data in PHP with $_POST: https://www.php.net/manual/en/reserved.variables.post.php

Just use var_dump($_POST) and it should print all variables back to your JS as a string. Use .text() instead of .json() and put the content variable into console.log(). You should see a pretty print of what you sent to the server.

Noel Schenk
  • 724
  • 1
  • 8
  • 19
0

It's right you not need jQuery but you need to know its simplicity.

Take an work example, play with the variables and have fun

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    
    <div id="GetLogger" style="padding:1rem; margin:1rem; border: 1px #ccc solid;">
        <h5>GET example log:</h5>
    </div>

    <div id="PostLogger" style="padding: 1rem; margin:1rem; border: 1px #ccc solid;">
        <h5>POST example log:</h5>
    </div>

    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script>
        // GET https://fakestoreapi.com/products?limit=1
        $.get('https://fakestoreapi.com/products', { limit: "1" } )
            .done(function( data ) {
                $('#GetLogger').append('<div>This method return ' + data.length + ' products</div>');
            });




        //POST https://fakestoreapi.com/auth/login
        $.post('https://fakestoreapi.com/auth/login', { username: 'mor_2314', password: '83r5^_' } )
            .done(function( data ) {
                if (data.token){
                    $('#PostLogger').append('<div>Login success</div>');
                }
                
                if (data.msg){
                    $('#PostLogger').append('<div>' + data.msg + '</div>');
                }

            });
    </script>
  </body>
</html>
While1
  • 651
  • 4
  • 5
0

in JQuery

$.post( "test.php", { name: "John", time: "2pm" })
  .done(function( data ) {
    alert( "Data Loaded: " + data );
  });

In PHP

$_REQUEST['name']
$_REQUEST['time']
Viral Patel
  • 1,104
  • 4
  • 7