通过Ajaxrequest.open从Javascript转换为PHP文件

Question

I have the following javascript function

function ajax_runs3(value){
    var ajaxRequest;  // The variable that makes Ajax possible!
    try{
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            document.myForm.time.value = ajaxRequest.responseText;
        }
    }

    var runs3= value;
    ajaxRequest.open("POST","runs3.php"+ runs3, true);
    ajaxRequest.send(null); 
}

and also the PHP file

<?php
$servername = "localhost";
$username = "USER";
$password = "PASS";
$dbname = "labi8575_inventory";
$conn = mysql_connect($servername, $username, $password);
if(! $conn )
{
  die('Could not connect: ' . mysql_error());
}
mysql_select_db('labi8575_inventory');  
$runs3 = $_POST["runs3"];
$sql = mysql_query("UPDATE demo SET runs3 = '$runs3'");
$retval = mysqli_query( $sql, $conn );
?>

The problem is that i cannot pass the var runs3 from javascript funtion to php file. I tried also according to the following topic ( Using an ajaxRequest.open to send a variable to php ) solutions like ajaxRequest.open("POST", "runs3.php?variable="+runs3) or AjaxRequest.open("POST", "runs3.php?myvar=runs3", true); but in my case it doesnt work. Do you know what is wrong in my case? Thanks for your interest.

Answer 1

A POST request doesn't use URL for parameters ! It is GET method which uses in-url params...

Solution:

var runs3= value;
ajaxRequest.open("POST","runs3.php", true); //We open the url
ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //IMPORTANT!! We add this header to tell to PHP that it is a "form" which sent requesdt
ajaxRequest.send("value=" + encodeURIComponent(runs3)); //Then we send DATA HERE  (encodeURIComponent encodes data to prevents URL-specific characters (for example '&'))

And then you get in PHP the runs3 value in $_POST["value"]

This is the "regular" way.

But if you want a more flexible request format, you can also send data as JSON:

var runs3 = {"val" : value};
ajaxRequest.open("POST","runs3.php", true); //We open the url
ajaxRequest.setRequestHeader("Content-type", "application/json");
ajaxRequest.send(JSON.stringify(runs3));

And PHP side: (explained here: Reading JSON POST using PHP ):

$request = file_get_contents('php://input'); //raw request data
$object  = json_decode($request, true);      //we convert it to associative array, by JSON

print_r($object); //Should return Array[1] {  "val" => YOUR_VALUE};

Not the "regular" way, but you have better flexibility with the data you send (because you don't send strings, but raw datas: objects / arrays...)

Answer 2

Try This. Your function(ajax_runs3)

function ajax_runs3(value){
    var ajaxRequest;  // The variable that makes Ajax possible!
    try{
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            document.myForm.time.value = ajaxRequest.responseText;
        }
    }

    var runs3= value;
    //ajaxRequest.open("POST","runs3.php"+ runs3, true);
   // ajaxRequest.send(null); 

    var url = "runs3.php";
    var params = "runs3="+value;
    ajaxRequest.open("POST", url, true);

    //Send the proper header information along with the request
    ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    ajaxRequest.setRequestHeader("Content-length", params.length);
    ajaxRequest.setRequestHeader("Connection", "close");

    ajaxRequest.onreadystatechange = function() {//Call a function when the state changes.
        if(ajaxRequest.readyState == 4 && ajaxRequest.status == 200) {
            alert(ajaxRequest.responseText);
        }
    }
    ajaxRequest.send(params);
}