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

这应该是

$php_variable = $_POST['param1'];

因为你在ajax中使用方法帖子

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

Answer 2

您似乎没有向脚本发送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 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

现在添加了表单，很清楚问题是什么：您在页面加载时进行ajax调用，没有任何参数，当您对select进行更改时，您提交表单老式的方式，不使用ajax。这会导致页面重新加载再次触发ajax调用，同样没有任何参数。

您需要做的是：

加载表单，但没有onhange处理程序;
不要在页面加载时触发ajax调用;
而是为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 5

而不是使用标题

你可以用这个

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

将JSON对象从PHP发送到Javascript

5 个答案: