将JSON对象从PHP发送到Javascript_Javascript_Php_Ajax_Post

将JSON对象从PHP发送到Javascript

javascript php ajax post

将JSON对象从PHP发送到Javascript,javascript,php,ajax,post,Javascript,Php,Ajax,Post,名为page.PHP的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; ?>

名为page.PHP的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存储包含三个字段的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>


选择一个zipcode
92507
30078
92606
30004
32034
37160
$.ajax({
类型：“POST”，
url:“page.php”，
成功：函数（数据）{
控制台日志（数据）；
var obj=jQuery.parseJSON（数据）；
document.getElementById（“demo”）.innerHTML=“UV索引”+”
“+”邮政编码：“+obj[0]。邮政编码+”
”；
} 
});

什么也没印出来。同时，此刻，我进入了php页面并停留在那里。我想回到我原来的html页面

我确实派了帕拉姆1。Param1是用户从下拉菜单中选择的邮政编码值

这应该是

$php_variable = $_POST['param1'];

因为您在ajax中使用了方法post

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

这应该是

$php_variable = $_POST['param1'];

因为您在ajax中使用了方法post

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

使用

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

$.ajax({
键入：“获取”，
url:“page.php”，
数据：{
参数1:“某些值”
}, 
成功：函数（数据）{
控制台日志（数据）；
document.getElementById（“demo”）.innerHTML=“UV索引”+”
“+”邮政编码：“+数据[0]。邮政编码+”
”；
} 
});

使用

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

$.ajax({
键入：“获取”，
url:“page.php”，
数据：{
参数1:“某些值”
}, 
成功：函数（数据）{
控制台日志（数据）；
document.getElementById（“demo”）.innerHTML=“UV索引”+”
“+”邮政编码：“+数据[0]。邮政编码+”
”；
} 
});

您似乎没有向脚本发送

参数1

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


$.ajax({
键入：“获取”，
url:“page.php”，
数据：{param1:$（“选择[name='param1']”）。val（），
数据类型：“json”，
成功：功能（obj）{
document.getElementById（“demo”）.innerHTML=“UV索引”+obj[0]。UV_索引+”
“+”邮政编码：“+obj[0]。邮政编码+”
”；
} 
});

试试这个。它应该可以工作。

您似乎没有向脚本发送

参数1

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


$.ajax({
键入：“获取”，
url:“page.php”，
数据：{param1:$（“选择[name='param1']”）。val（），
数据类型：“json”，
成功：功能（obj）{
document.getElementById（“demo”）.innerHTML=“UV索引”+obj[0]。UV_索引+”
“+”邮政编码：“+obj[0]。邮政编码+”
”；
} 
});

试试这个。它应该可以工作。

现在添加了表单，问题就很清楚了：在页面加载时进行ajax调用，没有任何参数，当您更改

选择时，您以老式的方式提交表单，而不使用ajax。这会导致页面重新加载，再次触发ajax调用，并且没有任何参数
您需要做的是：
加载表单，但不使用onhange
处理程序
不要在页面加载时触发ajax调用
相反，添加事件处理程序，以便在更改选择时，设置正确的数据类型并发送需要发送的数据

最终结果将类似于：
<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>


选择一个zipcode
92507
30078
92606
30004
32034
37160
$（文档）.ready（函数（）{
$（'select'）。在（'change'，函数（事件）上{
//确保表单不会以老式方式提交
event.preventDefault（）；
//您的ajax调用，包括参数、数据类型和方法
$.ajax({
键入：“GET”，//GET以匹配您的php脚本
url:“page.php”，
dataType:'json'，//让jQuery解析结果
数据：$（'form'）.serialize（），//向您发送数据
成功：功能（obj）{
console.log（obj）；//这将是有效json的对象
document.getElementById（“demo”）.innerHTML=“UV索引”+”
“+”邮政编码：“+obj[0]。邮政编码+”
”；
} 
});
});
});
现在添加了表单，问题就很清楚了：在页面加载时进行ajax调用，没有任何参数，当您更改选择时，以老式方式提交表单，而不使用ajax。这会导致页面重新加载，再次触发ajax调用，并且没有任何参数
您需要做的是：
加载表单，但不使用onhange
处理程序
不要在页面加载时触发ajax调用
相反，添加事件处理程序，以便在更改选择时，设置正确的数据类型并发送需要发送的数据

最终结果将类似于：
<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>


选择一个zipcode
92507
30078
92606
30004
32034
37160
$（文档）.ready（函数（）{
$（'select'）。在（'change'，函数（事件）上{
//确保表单不会以老式方式提交
event.preventDefault（）；
//您的ajax调用，包括参数、数据类型和方法
$.ajax({
键入：“GET”，//GET以匹配您的php脚本
url:“page.php”，
dataType:'json'，//让jQuery解析结果
数据：$（'form'）.serialize（），//向您发送数据
成功：功能（obj）{
console.log（obj）；//这将是有效json的对象
document.getElementById（“demo”）.innerHTML=“UV索引”+”
“+”邮政编码：“+obj[0]。邮政编码+”
”；
} 
});
});
});
而不是使用标题
你可以用这个
 <?php 
$reponse = "what you need";
print(json_encode(['reponse' => $reponse])); 
?>

而不是使用标题
你可以用这个
 <?php 
$reponse = "what you need";
print(json_encode(['reponse' => $reponse])); 
?>


而不是echo$主页使用echo json\u编码（$homepage）。格式将是JSON且jQuery。不再需要parseJSON（数据）
。您是否在b