Sending JSON object from PHP to Javascript

Question

PHP file named page.php

<?php
$php_variable = $_GET['param1'];
$uv = str_replace("{ZIP Code}", $php_variable,'http://iaspub.epa.gov/enviro/efservice/getEnvirofactsUVDAILY/ZIP/{ZIP Code}/JSON');
$homepage = file_get_contents($uv);
echo $homepage;
?>

homepage stores the json object that contains three fields I would like to print out those three fields in my html file. I have created a ajax function to print out the fields on the web page.

<form action="../getuv.php">
    <select name="param1" onchange="this.form.submit()">
        <option value="">Choose a zipcode </option>
        <option value="92507">92507</option>
        <option value="30078">30078</option>
        <option value="92606">92606</option>
        <option value="30004">30004</option>
        <option value="32034">32034</option>
        <option value="37160">37160</option>
    </select>
</form>
<script>
$.ajax({
 type: "POST",
 url: "page.php", 
 success: function (data) { 
  console.log(data);
  var obj = jQuery.parseJSON( data );
     document.getElementById("demo").innerHTML = "UV INDEX" + "<br>" + "Zip code: " + obj[0].ZIP_CODE + "<br>"; 
 } 
}); 
</script>

Nothing gets printed out. Also, at the moment, I got to the php page and stay there. I would like to return back to my original html page.

I do send param1. Param1 is a zip code value that the user chooses from a drop down menu.

Instead of echo $homepage; use echo json_encode($homepage);. The format will be JSON and jQuery.parseJSON( data ) will no longer be required. — machineaddict
– machineaddict, Commented Apr 28, 2015 at 12:34
Have you watched the request / response in the browser's console? — Jay Blanchard
– Jay Blanchard, Commented Apr 28, 2015 at 12:36
@machineaddict If I read it right, he's fetching JSON so no encode is necessary — Machavity
– Machavity ♦, Commented Apr 28, 2015 at 12:38

jeroen · Accepted Answer · 2015-04-28 16:41:29Z

Now that the form is added, it is clear what the problem is: You make an ajax call on page load, without any parameters, and when you make a change to your select, you submit the form the old-fashioned way, without using ajax. This causes a page reload where your ajax call is fired again, again without any parameters.

What you need to do is:

Load your form but without the onhange handler;
Do not fire the ajax call on page load;
Instead, add an event handler for when the select is changed, set the correct data type and send the data you need to send.

The end result would look something like:

<form action="">
    <select name="param1">
        <option value="">Choose a zipcode </option>
        <option value="92507">92507</option>
        <option value="30078">30078</option>
        <option value="92606">92606</option>
        <option value="30004">30004</option>
        <option value="32034">32034</option>
        <option value="37160">37160</option>
    </select>
</form>
<script>
$(document).ready(function() {
 $('select').on('change', function(event) {
  // Make sure the form does not get submitted the old-fashioned way
  event.preventDefault();

  // Your ajax call, including the parameter, data type and method
  $.ajax({
    type: "GET",                    // GET to match your php script
    url: "page.php",
    dataType: 'json',               // Let jQuery parse the results   
    data: $('form').serialize(),    // Send you data
    success: function (obj) { 
      console.log(obj);             // this will be an object for valid json
      document.getElementById("demo").innerHTML = "UV INDEX" + "<br>" + "Zip code: " + obj[0].ZIP_CODE + "<br>"; 
    } 
  });
 });
});
</script>

So if I remove the onchage handler, once I click on the drop down menu it will come to the function above? Also, what do you mean by don't fire the ajax call on page load? as in don't call it? but you did in the code provided above. Also, there is a syntax error with serialize. I am fairly new to all this. So I am still googling all of this. Thanks.
@Ria I am calling it inside an event handler, when something happens. You are calling it simply when you open the page. And yes, there was a typo, the line should have finished with a comma (same with dataType), I have edited the answer. Note that I have also put the script in a document ready handler.
there is also a missing parenthesis somewhere in there. but thanks for the explanation
@Ria Yes, I think there was missing something almost at the end, but these are just details. Did you manage to solve your problem?
@jeoren Not yet. I have to go to class. I will try again in the evening.

Saty · Accepted Answer · 2015-04-28 12:33:44Z

2

this shoulde be

$php_variable = $_POST['param1'];

because you use method post in ajax

 type: "POST",
 url: "page.php",

answered Apr 28, 2015 at 12:33

Saty

22.5k7 gold badges35 silver badges52 bronze badges

1 Comment

Ria Over a year ago

param1 must be a GET because I supply it to the php script

lshas · Accepted Answer · 2015-04-28 19:28:23Z

2

You don't seem to be sending a param1 to the script.

<script>
$.ajax({
 type: "GET",
 url: "page.php",
 data: {param1: $("select[name='param1']").val()},
 dataType: 'json',
 success: function (obj) { 
     document.getElementById("demo").innerHTML = "UV INDEX" + obj[0].UV_INDEX + "<br>" + "Zip code: " + obj[0].ZIP_CODE + "<br>"; 
 } 
}); 
</script>

Try this one. It should work.

edited Apr 28, 2015 at 19:28

answered Apr 28, 2015 at 12:36

lshas

1,7211 gold badge20 silver badges42 bronze badges

7 Comments

Ria Over a year ago

I do. I just didn't show it. param1 is the zip code that the user clicks from a drop down menu.

lshas Over a year ago

What do your browser receive from page.php then? Are you receiving any errors, or a 500 status code?

lshas Over a year ago

@Ria you need to show how you are sending param1, because the code above does not show it, so it is hard to figure out what could be wrong if you are not showing us the whole code.

Ria Over a year ago

page.php opens up a url and receives a json object.

lshas Over a year ago

I know what page.php does, but according to your javascript code the page.php is not receiving a param1. You have to put it in like i have shown you in the code. If you do that it should work. Try the code I have supplied, and it should work without a hitch.

|

Let me see · Accepted Answer · 2015-04-28 12:34:06Z

1

use

header('Content-Type: application/json');
echo $homepage;

and in your JS Script

    $.ajax({
     type: "GET",
     url: "page.php",
     data: {
             param1: 'some value'
            }, 
     success: function (data) { 
      console.log(data);
         document.getElementById("demo").innerHTML = "UV INDEX" + "<br>" + "Zip code: " + data[0].ZIP_CODE + "<br>"; 
     } 
    });

answered Apr 28, 2015 at 12:34

Let me see

5,0949 gold badges40 silver badges49 bronze badges

1 Comment

Ria Over a year ago

What happens when I am getting param1 from a drop down menu? How to store that value in 'some value'?

Sergey Sozonov · Accepted Answer · 2015-04-28 13:44:55Z

1

Instead of using Header

you can use this

 <?php 
$reponse = "what you need";
print(json_encode(['reponse' => $reponse])); 
?>

edited Apr 28, 2015 at 13:44

Sergey Sozonov

368 bronze badges

answered Apr 28, 2015 at 13:39

Sinaly

94 bronze badges

Collectives™ on Stack Overflow

Sending JSON object from PHP to Javascript

5 Answers 5

5 Comments

1 Comment

7 Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

1 Comment

7 Comments

1 Comment

Comments

Related