Отправка объекта JSON из PHP в Javascript

Question

PHP файл с именем 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; 
?> 

стартовой сохраняет объект JSON, который содержит три поля я хотел бы, чтобы распечатать эти три поля в моем HTML-файл. Я создал функцию ajax для печати полей на веб-странице.

<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> 

Ничего не распечатывается. Кроме того, на данный момент я попал на страницу php и остаюсь там. Я хотел бы вернуться к исходной странице html.

Я отправляю param1. Param1 - это индексный код, который пользователь выбирает из выпадающего меню.

Answer 1

Теперь, когда эта форма добавлена, ясно, в чем проблема: вы делаете ajax-вызов при загрузке страницы без каких-либо параметров, а когда вы вносите изменения в свой select, вы отправляете форму old- образный способ, без использования ajax. Это вызывает перезагрузку страницы, когда ваш вызов ajax запускается снова, без каких-либо параметров.

Что вам нужно сделать, это:

1. Загрузите форму, но без onhange обработчика;
2. Не запускайте вызов ajax при загрузке страницы;
3. Вместо этого добавьте обработчик событий, когда изменилось значение select, установите правильный тип данных и отправьте данные, которые необходимо отправить.

Конечный результат будет выглядеть примерно так:

<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> 

Answer 2

это shoulde быть

$php_variable = $_POST['param1']; 

потому, что вы используете метод пост асинхронность

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

Answer 3

использование

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

и в вашем 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>"; 
    } 
    }); 

Answer 4

Вы, кажется, не отправляете param1 в сценарий.

<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> 

Попробуйте этот. Он должен работать.

Answer 5

Вместо того, чтобы использовать заголовок

вы можете использовать этот

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