how do i send a variable from jquery to a php file using ajax-CodePudding

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?

CodePudding user response：

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.

CodePudding user response：

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>