How to send javascript variable to php using ajax?

Question

The scenario is , below is the html file through which i want to display the content of a text file at div id="myDiv".

The file will be read by php . The php content is given below. I am unable to get the content from the text file . Please tell me what should be added in the ajax part to correct the program.

<html>
<head>
<script  type="text/javascript">

function ajaxRequest(tb) {
var xmlhttp;
if (window.XMLHttpRequest)
{
    xmlhttp=new XMLHttpRequest();
}
  xmlhttp.onreadystatechange=statechange()
  {
      if (xmlhttp.readyState==4 && XMLHttpRequestObject.status == 200)
      {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
      }
  }
xmlhttp.open("GET","http://localhost/TBR/getdata.php?tb="+tb,true);
xmlhttp.send();
}</script>

</head>

<body>
<div >
       <div id="myDiv">Text from file should come here.</div>
       <button type="button" onclick="ajaxRequest(myfile.txt)">Change Content</button>
</div>
</body>
</html>




Below is the PHP file

<?php
    $tbName = $_GET['tb'];
    $file = "/home/$tbName";
    $f = fopen("$file", "r");
    echo "<ul>";
    while(!feof($f)) {
    $a= fgets($f);


    echo "<li>$a</li><hr/>";

    }
    echo "</ul>";

?>

Which bit doesnt work ? does the PHP get called ? errors on the browser ? javascript validate ? — Manse
– Manse, Commented Jan 4, 2012 at 14:45

Matt Esch · Accepted Answer · 2012-01-04 14:43:51Z

Fix quotes

onclick="ajaxRequest('myfile.txt')"

make sure you use encodeURIComponent() on tb

xmlhttp.open("GET","http://localhost/TBR/getdata.php?tb="+encodeURIComponent(tb),true);

Test your php page in the browser: does http://localhost/TBR/getdata.php?tb=myfile.txt provide the data you want?

If so test the function gets called. (Place an alert or debug the code and place a breakpoint within the function, or use console.debug if your browser supports it)

If the function gets called then your event handler is working correctly, if not try to rewrite it or attach it differently like onclick="ajaxRequest('myfile.txt');" though I suspect the missing semicolon isn't the problem.

If that is called you can try to see if the ajax call is carried out my inspecting the network traffic. Any decent browser will let you do that (hit f12 and look for the network tab). You should be able to see the request and response if the ajax request is being issued and responded to.

Supposing that is all working fine, ensure that your event ajax event handler is getting called. I suspect there is an issue here because you are not setting the event handler to a function...

xmlhttp.onreadystatechange = function statechange()
{
    if (xmlhttp.readyState==4 && XMLHttpRequestObject.status == 200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

And failing all of that your data insert code isn't working.

I added the quote but it is not working . My php code is also present there . Please take a look and help. — Logesh
– Logesh, Commented Jan 4, 2012 at 13:17

CodeJoust · Accepted Answer · 2012-01-09 14:06:09Z

<button type="button" onclick="ajaxRequest('myfile.txt')">Change Content</button>

Remember to quote the string in the onclick.

Here's a fixed version:

<html>
<head>
<script type="text/javascript">
function ajaxRequest(tb) {
  if (window.XMLHttpRequest){
    var xmlhttp= new XMLHttpRequest();
    xmlhttp.onreadystatechange=function(){
      if (xmlhttp.readyState==4 && xmlhttp.status == 200){
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText; }
    }
    xmlhttp.open("GET","http://localhost/TBR/getdata.php?tb="+ encodeURIComponent(tb),true);
    xmlhttp.send();
  }
}
</script>
</head>
<body>
       <div id="myDiv">Text from file should come here.</div>
       <button type="button" onclick="ajaxRequest('myfile.txt')">Change Content</button>
</body>
</html>

What was wrong:

the presence of XMLHttpRequest was tested, but the function was not wrapped in an if, making that useless.
The variable names were a little mismatched - double check that
EncodeURI Component, as mentioned below
The proper syntax for a callback function is window.onload = function(){ alert('func!'); } not window.onload = alert(){ alert('load!'); }

That should be it, unless there's a problem with the PHP Script, try testing that out by visiting the URL directly.

Collectives™ on Stack Overflow

How to send javascript variable to php using ajax?

2 Answers 2

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related