why my php function is not executed by jquery $.get

Question

I have a JavaScript in HTML file that call a php file in a $.get jquery API. When I run the HTML file on my computer where WAMP is running (for php), I can't get the result of php function on the screen,neither the text of h1 tag nor the the output of print function. Thanks for a lot your answer.

Regards

Here is my html file AJAXTest.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/xml; charset=iso-8859-1" />

 <script type = "text/javascript"
      src = "jquery-1.3.2.min.js">

 </script>

<script type = "text/javascript">    
$(init);

function init(){
 alert("init passage 2" + " Andy");
  $.get("http://localhost/greetUser.php", { "userName": "Andy" }, processResult);
  alert("processresult passage" + data);
  $("#output").html(data);
}  

function processResult(data, textStatus){
alert("processresult passage" + data);
  $("#output").html(data);
}
</script>
<title>AJAXTest.html</title>
</head>
<body>
 <h1>Test AJAX</h1>

 <div id = "output">
   C’est la sortie par défaut
 </div>

</body>
</html>

and here is my php file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="content-type" content="text/xml; charset=iso-8859-1" />
<title>greetUser.php</title>
</head>
<body>
<div>
  <h1>Réponse</h1>
<?php
 $userName = $_REQUEST["userName"];
 print "<p>Salut, $userName!</p> ";
?>
 </div>
 </body>
 </html>

Do the alerts fire? Are any messages displayed in the Console of your browser's developer tools? Can you see the request and response in the Network tab of your browser's developer tools? — Quentin, Mar 16 '16 at 16:01
Why are you using jQuery 1.3? It's ancient (as is ISO 8859 1, we tend to use UTF-8 now that we've left the 1990s). — Quentin, Mar 16 '16 at 16:01
**Danger**: This code is [vulnerable to XSS](https://www.owasp.org/index.php/Cross-site_Scripting_(XSS)). User input needs escaping before being inserted into an HTML document!. — Quentin, Mar 16 '16 at 16:01
@Quentin. It's right I'm testing Ajax to build a website. I look at my network tab of my Firefox debugger when executing AJAXTest.html. When it arrives at the call to the php code i get the following alert : cross-origin request is blocked. the policy of same-origin doesn't allow to access the distant ressourced located on http://localhost/greetUser.php. Reason : the header CORS « Access-Control-Allow-Origin » is missing. So I guess that the API $.get doesn't configure this in the request sent to php. Is it Firefox problem or is it the Jquey release that I use? Jquery is integrated in Firefox? — manh chau nguyen, Mar 17 '16 at 15:58
"So I guess that the API $.get doesn't configure this" — The error says the **response** doesn't include the header. The client can't set it. It's a server issue. The server has to give you permission to read the data. — Quentin, Mar 17 '16 at 16:00
Yes the server must give the right to read the php file. To this aim (thanks to other posts in stackoverflow) I mus activate headers_module in the conf of the Apache modules and enable this module in the httpd.conf as well as enable the follwing test in this file. — manh chau nguyen, Mar 17 '16 at 21:23

score 1 · Answer 1 · answered Mar 17 '16 at 01:02

It looks like everything should largely be working, but one thing that I can see that would break it, is that you have the

  alert("processresult passage" + data);
  $("#output").html(data);

being called inside of the init() function, directly after the $.get call. At this point in the execution, the 'data' variable does not exist and using it will cause an error and halt all javascript from continuing, as the execution has to wait until the request is returned to be able to process it (in the processResult function, which you appear to be handling correctly)

Removing those lines, I think should solve your problem.

JP. Aulet · Answer 2 · 2016-03-17T16:23:13.630

Try this:

<script type = "text/javascript">    
init();

function init(){
    $.post("http://localhost/greetUser.php", { "username": "Andy" }, function(data,textStatus){
        $("#output").html(data);
    });     
}  
</script>

UPDATE

I don't understand the downvote, but if you try this, it works:

<script type = "text/javascript">    
init();

function init(){
    $.post("http://localhost/file.php", { "username": "Andy" }, function(data,textStatus){            
        $("#output").html(data);
    });     
}  
</script>
<title>AJAXTest.html</title>
</head>
<body>
 <h1>Test AJAX</h1>    
 <div id = "output">
   C’est la sortie par défaut
 </div>   
</body>
</html>

PHP file:

<?php
 $userName = $_POST["username"];
 print "<p>Salut, $userName!</p> ";
?>

"you need to use POST to send variables" — That isn't remotely true. jQuery will put variables in the query string when making a GET request (just like a form would). — Quentin, Mar 17 '16 at 16:01

why my php function is not executed by jquery $.get

2 Answers2