Sending JSON object from PHP to Javascript - Stack Overflow

admin管理员组

文章数量:1291008

PHP file named page.php

<?php
$php_variable = $_GET['param1'];
$uv = str_replace("{ZIP Code}", $php_variable,'/{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.

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.

• javascript
• php
• ajax
• post

Share Improve this question Follow edited Apr 28, 2015 at 12:46 Ria asked Apr 28, 2015 at 12:32 RiaRia 46766 silver badges1717 bronze badges 4

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

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

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:

1. Load your form but without the onhange handler;
2. Do not fire the ajax call on page load;
3. 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>

this shoulde be

$php_variable = $_POST['param1'];

because you use method post in ajax

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

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.

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>"; 
     } 
    });

Instead of using Header

you can use this

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

本文标签： Sending JSON object from PHP to JavascriptStack Overflow