Getting Data from php through Ajax

Question

I am a novice to PHP, trying to learn.

I have my php file present in www folder in the WAMP server.

<?php

    echo 'Hi';
?>

This can be run if I go http://127.0.0.1/testRequestParameter.php from my Browser, it prints Hi

So now I created an HTML page(not present in the same directory)

<html>
<head>
    <script src="jsLibrary/jquery-1.11.1.min.js" ></script>
</head>
<body>
<script type="text/javascript"> 
    function getTestDataFromAjax()
    {
    var url =   'http://127.0.0.1/testRequestParameter.php';

    $.ajax({
        url: url,
        success: function(data) {
          alert(data);
        },
        async:false
      });

    }
</script>

    <input type="submit"  name="Button" onclick="javascript:getTestDataFromAjax(); return false;" />
</body>
</html>

And when I try to call that php through AJAX, the response is blank.

May be it I am missing something, any help will be appreciated.

Finding1: In my firebug it is showing, Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1/testRequestParameter.php. This can be fixed by moving the resource to the same domain or enabling CORS.

Any setting which I need to change?

maybe you should change `url` into `"http://127.0.0.1/testRequestParameter.php"` — Jonan, Aug 31 '14 at 17:18
Does the javascript run when you press the button? Use the debugger to watch it execute and see what is returned in the data variable. — RiggsFolly, Aug 31 '14 at 17:22
I believe you should include jquery library adding `` in the head section — , Aug 31 '14 at 17:23
@RiggsFolly: Yes Sir, I have checked that in firebug, the response is blank request is constructed properly — Sashi Kant, Aug 31 '14 at 17:27
So where does the html/php file live that you use to test the call to the javascript? — RiggsFolly, Aug 31 '14 at 17:40
@RiggsFolly My php file is in the WAMP directory inside the "www" folder, but the index file is on desktop — Sashi Kant, Aug 31 '14 at 17:44
Put them both in the wamp folder, better in a subfolder of `\wamp\www\` like `\wamp\www\project1`. You should never put anything in the `\wamp\www` folder as you will eventually overwrite the `index.php` in there which is the wamp homepage script. — RiggsFolly, Aug 31 '14 at 17:46
@RiggsFolly: I can only put the php file in the WAMP folder, I want the other anywhere but not inside the WAMP directory, This is a local set up, which I need to do for two different domains — Sashi Kant, Aug 31 '14 at 17:49
Using the dataType of jsonp in your Ajax should allow you to get the information from a cross origin point. — tylerlindell, Aug 31 '14 at 17:50

score 0 · Accepted Answer · 2014-08-31T17:52:02.560

0

Scenario

I tested your script using EasyPHP: I created into http://localhost/script/test/ the file content.php

<?php
echo 'Hi!';
?>

Then, I added to my desktop index.php:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript"> 
    function getTestDataFromAjax()
    {
    var url =   'http://localhost/script/test/content.php';

    $.ajax({
        url: url,
        success: function(data) {
          alert(data);
        },
        async:false
      });

    }
</script>

    <input type="submit"  name="Button" onclick="javascript:getTestDataFromAjax(); return false;" />
</body>
</html>

Then, I launched index.php and clicked on the button, which returned an error when clicked:

XMLHttpRequest cannot load http://localhost/script/test/content.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Solution

So, I edited my content.php like this:

<?php
header("access-control-allow-origin: *");
echo 'Hi!';
?>

And it's now working

edited Aug 31 '14 at 17:52

answered Aug 31 '14 at 17:42

I think you kept both the file in the same directory, My php file is in the WAMP directory inside the "www" folder, but the index file is on desktop – Sashi Kant Aug 31 '14 at 17:43
You're right; I'm going to test your scenario and edit my answer – Aug 31 '14 at 17:45
That will be very nice of you :) – Sashi Kant Aug 31 '14 at 17:47
By the way, I noticed in my firebug, I got this: `Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1/testRequestParameter.php. This can be fixed by moving the resource to the same domain or enabling CORS.` – Sashi Kant Aug 31 '14 at 17:47
Yeah, I noticed about it in chrome console too, the problem was in headers- check my edited answer :) – Aug 31 '14 at 17:52
That is great, Let me check :) – Sashi Kant Aug 31 '14 at 17:57

Getting Data from php through Ajax

1 Answers1

Scenario

Solution