Question posted in
You can find the official documentation here.

how do i send a variable from jquery to a php file using ajax – Jquery ajax

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?

Tags:

3

Answers


  1. 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.

    Login or Signup to reply.
  2. 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>
    Login or Signup to reply.
  3. 0

    in JQuery

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

    In PHP

    $_REQUEST['name']
$_REQUEST['time']
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search