從PHP發送JSON對象爲Javascript命名爲page.php文件

Question

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

首頁商店包含三個字段 我想在我的HTML文件，打印出這三個領域的JSON對象。我創建了一個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頁面。

我確實發送參數1。 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']; 

，因爲你使用AJAX方法後

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

Answer 3

使用

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

，並在你的JS腳本

$.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])); 
?>