Question

我尝试创建一个能够生成多个网址的表单，具体取决于用户的输入。创建的url具有json扩展名。 php文件用于获取该url的内容。这个php文件必须与输入的url具有相同的内容。这个php文件用作javascript / jquery文件的输入。

在这个文件中，我试图将json代码转换为html表。这是由http_request完成的。该表必须在html页面的div中输出。但是，由于我无法找到的错误，我的代码无法正常工作。我已经在stackoverflow和google上查看了类似的问题，但可以找到使我的代码正常工作的修复程序。

我应用此代码来识别列表。这是我已有的代码：

HTML：

<script type="text/javascript" src="spotify.js"></script>
<form id="spotifyform" action="spotifylist.php" method="post">
      <select id="country" name="country">
        <option value="GB">UK</option>
        <option value="US">USA</option>
      </select>
      <select id="interval" name="interval">
        <option value="daily">Daglijst</option>
        <option value="weekly">Weeklijst</option>
      </select>
      <select id="chart" name="chart">
        <option value="most_streamed">Meest gestreamd</option>
        <option value="most_viral">Meest gedeeld</option>
      </select>
      <input type="submit" name="formSubmit" value="Submit"/>
</form>
<div id="spotifylist"></div>

spotify.js：

function loadJSON()
{
    var http_request = new XMLHttpRequest();
    try{
      // Opera 8.0+, Firefox, Chrome, Safari
      http_request = new XMLHttpRequest();
    }catch (e){
      // Internet Explorer Browsers
      try{
         http_request = new ActiveXObject("Msxml2.XMLHTTP");
      }catch (e) {
         try{
            http_request = new ActiveXObject("Microsoft.XMLHTTP");
         }catch (e){
            // Something went wrong
            alert("Your browser broke!");
            return false;
         }
      }
    }

   http_request.open("GET", "spotifylist.php", true);
   http_request.send();
   http_request.onreadystatechange  = function(){
      if (http_request.readyState == 4  )
      {
        // Javascript function JSON.parse to parse JSON data
        var jsonObj = JSON.parse(http_request.responseText);

        // jsonObj variable now contains the data structure and can
        // be accessed as jsonObj.artist_name and jsonObj.track_name.

        HTML = "<table id='chart'> <thead><tr id='row2'><th id='dw'></th><th   id='song'>Artiest</th><th id='song'>Titel</th></tr></thead><tbody>";
        var x=jsonObj.tracks;
        for (i=0;i<x.length;i++)
          { 
        HTML += "<tr id='row1'><td id='dw'>";
        HTML += i+1;
        HTML += "</td><td id='song'>";
        HTML += x[i].artist_name;
        HTML += "</td><td id='song'>";
        HTML += x[i].track_name;
        HTML += "</td></tr>";
          }
        HTML += "</tbody></table>";

        document.getElementById("spotifylist").innerHTML = HTML; 

      }
    }
 }

$("#spotifyform").submit(function(){
    loadJSON();
    return false;
});

spotifylist.php

<?php 
if($_POST['formSubmit'] == "Submit") 
{
   $chart = $_POST['chart'];
   $country = $_POST['country'];
   $interval = $_POST['interval'];
}

$data_file="http://charts.spotify.com/api/tracks/".$chart."/".$country."/".$interval."/latest";
$url = file_get_contents ($data_file);
echo $url;
?>

当前出错的是当我按下提交按钮时加载了php文件。该文件包含正确的json信息。但是这个json没有转换成html表。

我真的很感激，如果有人可以帮我解决这个问题

Answer 1

如果您希望在按提交时将spotifylist div加载到数据中，则必须阻止页面重定向。

进行表单操作：

<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF'])?>

如果可能，您的输入值（如果您在表单标签中有任何值）：

"<?php echo $_POST['value']?>"

如果可以，请将HTML代码放在PHP文件中，该文件执行spotifylist.php中的所有内容。

Answer 2

我猜中有几个问题。

您将表单发送到spotifylist.php，它会抓取文件并将某些内容发送回html。可能是JSON，但你在哪里处理这些数据？也许有些Javascript用你的php发回的“字符串”做了什么？

你的loadJSON发送（每当）一个GET请求到同一个PHP，但没有参数或东西。所以你的php遇到错误，因为显然没有设置POST变量，所以你的if条件中的变量永远不会设置你的数据再次回来？！？有错误

首先应该清楚要使用哪种技术。

在我看来，你可以选择两者。

Answer 3

有多种方法可以从外部服务器获取信息：

httprequest - 不建议，因为用户体验不佳。

file_get_contents - 通常很简单，但在这种情况下需要大量数据处理。 Php在服务器端工作，javascript在客户端工作。要让这两者协同工作，还需要做更多的工作。

$ .ajax - 在这种情况下是最好的解决方案，因为它不需要任何php和$ .ajax能够直接解析json数据。由于数据是从外部站点请求的，因此您必须将数据类型更改为jsonp并执行回调函数。

将表单中的数据传输到javascript非常容易：

// Automatically call this function when the page loads.
window.onload = function loadJSON()
{
  // The HTML input of the form that is the input of this javascript document
  var country2 = document.getElementById("country");
  var chart2 = document.getElementById("chart");
  var interval2 = document.getElementById("interval");

使用提交的所选参数构建网址：

// Call the function when the form is submitted
  $("#spotifyform").submit(function(e)
  {
    e.preventDefault(); // to prevent the page from reloading

    // Save the choice of the <select> country in a variable named country2
    var country = country2.options[country2.selectedIndex].value;
    var chart = chart2.options[chart2.selectedIndex].value;
    var interval = interval2.options[interval2.selectedIndex].value; 
    var url = "http://charts.spotify.com/api/tracks/" + chart + "/" + country + "/" + interval + "/latest"; // build url

然后获取正确的数据并使用json本机解析器直接解析它。

// Get the data from the site and save this into the variable 'json'
    $.ajax
    ({
      'url': url + '?callback=?', // ?callback=? lets the server generate a function name, the call can be handled in the success parameter
      'dataType': 'jsonp', // Cross site request via jsonp
      'error': function(xhr, status, error){ alert(error.message); },
      'success': jsonParser // call function
    }); // $.ajax  

  }); // $("#spotifyform").submit(function(e)
} // window.onload = function loadJSON()

然后根据需要处理数据。您不需要执行httprequest，也不必再解析数据了。

function jsonParser(json) 
{
  HTML = "<table id='chart'> <thead><tr id='row2'><th id='dw'></th><th id='song'>Artiest</th><th id='song'>Titel</th></tr></thead><tbody>";
  var x=json.tracks;
  for (i=0;i<x.length;i++)
    { 
    HTML += "<tr id='row1'><td id='dw'>";
    HTML += i+1;
    HTML += "</td><td id='song'>";
    HTML += x[i].artist_name;
    HTML += "</td><td id='song'>";
    HTML += x[i].track_name;
    HTML += "</td></tr>";
    }
  HTML += "</tbody></table>";
  document.getElementById("spotifylist").innerHTML = HTML; 
} // function jsonParser(json)

使用从表单构建的url生成json

3 个答案: