如果我使用AJAX加载php文件,则函数的内容返回[object HTMLDivElement]

Heeelo,

如果我使用AJAX加载php文件,则函数的内容返回[object HTMLDivElement],但是如果不加载php文件而加载函数,则视图正常。

index.php

    <h1>API Football</h1>
    <nav>
      <ul>
        <li>INDEX</li>
        <li onclick="loadComponents()">Live fixtures</li>
      </ul>
    </nav>

    <h2>Live fixtures</h2>
    <div id="content">
    </div>

    <script src="javascript.js"></script>

javascript.js

var data = null;

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange",function () {
    if (this.readyState === this.DONE) {

        let liveFixtures = this.responseText;
        let fixtures = liveFixtures.api.fixtures;
        let content = "";

        for (fixture of fixtures) {
            content += "<tr>";
            content += "<td>"+fixture.fixture_id+"</td>";
            content += "<td>"+fixture.homeTeam.team_name+" - "+fixture.awayTeam.team_name+"</td>";
            content += "</tr>";
        }

    }
});

xhr.open("GET","https://api-football-v1.p.rapidapi.com/fixtures/live?timezone=Europe%2FLondon");
xhr.setRequestHeader("x-rapidapi-host","api-football-v1.p.rapidapi.com");
xhr.setRequestHeader("x-rapidapi-key","e8118d13f1msh0edd004389b2d85p1b89c2jsn0cd40324ddec");

xhr.send(data);

//Load content.php
function loadComponents() {
  var xhttp = new XMLHttpRequest();

  xhttp.onreadystatechange = function() {

    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("content").innerHTML = this.responseText;
      document.getElementById("myDiv").innerHTML = content;
    }
  };
  xhttp.open("GET","content.php",true);
  xhttp.send();
}

content.php

<div id="myDiv">
</div>
<p><strong>Načetl jsem content.php</strong></p>

它也位于http://javascript.4fan.cz/上。

API Football的输出

//let liveFixtures = {"api":{"results":18,"fixtures":[{"fixture_id":95187,"league_id":358,"league":{"name":"Serie B","country":"Brazil","logo":"https:\/\/media.api-football.com\/leagues\/358.PNG","flag":"https:\/\/media.api-football.com\/flags\/br.svg"},"event_date":"2019-11-08T22:15:00+00:00","event_timestamp":1573251300,"firstHalfStart":1573251300,"secondHalfStart":1573254900,"round":"Regular Season - 34","status":"Second Half","statusShort":"2H","elapsed":90,"venue":"Durival Britto e Silva,Curitiba","referee":null,"homeTeam":{"team_id":122,"team_name":"Parana","logo":"https:\/\/media.api-football.com\/teams\/122.png"},"awayTeam":{"team_id":136,"team_name":"Vitoria","logo":"https:\/\/media.api-football.com\/teams\/136.png"},"goalsHomeTeam":0,"goalsAwayTeam":0,"score":{"halftime":"0-0","fulltime":null,"extratime":null,"penalty":null},"events":[{"elapsed":9,"team_id":136,"teamName":"Vitoria","player_id":9879,"player":"L. Candido","assist_id":null,"assist":null,"type":"Card","detail":"Yellow Card"},{"elapsed":32,"team_id":122,"teamName":"Parana","player_id":9424,"player":"Fernando Neto",{"elapsed":45,"player_id":9756,"player":"Anselmo","player_id":117160,"player":"Ramon","player_id":64032,"player":"L. Gomes",{"elapsed":64,"player_id":54028,"player":"Pimentinha","assist":"Vitinho","type":"subst","detail":"Vitinho"},{"elapsed":69,"player_id":54248,"player":"Judivan","assist_id":9445,"assist":"B. R. Rodrigues do Nascimento","detail":"B. R. Rodrigues do N"},{"elapsed":79,"player_id":9743,"player":"L. Principe",{"elapsed":80,"player_id":69188,"player":"F. Gedoz","assist_id":9552,"assist":"F. Garcia","detail":"F. Garcia"},{"elapsed":90,"player_id":16590,"player":"J. Caicedo","assist_id":9756,"assist":"Anselmo","detail":"Anselmo"}]},{"fixture_id":245836,"league_id":935,"league":{"name":"COnmEBOL Sudamericana","country":"World","logo":"https:\/\/media.api-football.com\/leagues\/935.png","flag":null},"event_date":"2019-11-09T20:30:00+00:00","event_timestamp":1573331400,"firstHalfStart":1573331400,"secondHalfStart":1573335000,"round":"Final","elapsed":88,"venue":"Estadio General Pablo Rojas","referee":"Raphael Claus,Brazil","homeTeam":{"team_id":448,"team_name":"Colon Santa Fe","logo":"https:\/\/media.api-football.com\/teams\/448.png"},"awayTeam":{"team_id":1153,"team_name":"Independiente del Valle","logo":"https:\/\/media.api-football.com\/teams\/1153.png"},"goalsHomeTeam":2,"score":{"halftime":"2-0","events":[{"elapsed":25,"team_id":448,"teamName":"Colon Santa Fe","player_id":16357,"player":"F. Leon","assist_id":16368,"assist":"C. pellerano","type":"goal","detail":"Normal goal"},{"elapsed":42,"player_id":16371,"player":"J. Sanchez","assist_id":16366,"assist":"E. Mera",{"elapsed":50,"player_id":16364,"player":"A. Landazuri",{"elapsed":55,"team_id":1153,"teamName":"Independiente del Valle","player_id":6663,"player":"L. M. Rodriguez","detail":"Missed Penalty"},{"elapsed":67,"player_id":70774,"player":"J. Ortega","assist_id":6645,"assist":"A. Vigo","detail":"A. Vigo"},{"elapsed":70,"player_id":6649,"player":"G. Esparza","assist_id":6637,"assist":"G. Escobar","detail":"G. Escobar"},{"elapsed":75,"player_id":16374,"player":"A. Cabeza","assist_id":16371,"assist":"J. Sanchez","detail":"J. Sanchez"},{"elapsed":76,"player_id":16376,"player":"C. Dajome","player_id":16361,"player":"R. Garces","detail":"E. Mera"},{"elapsed":86,"player_id":16375,"player":"W. Corozo","assist_id":2984,"assist":"G. Torres","detail":"G. Torres"}]},{"fixture_id":234108,"league_id":899,"league":{"name":"Primera B Nacional","country":"Argentina","logo":"https:\/\/media.api-football.com\/leagues\/96.png","flag":"https:\/\/media.api-football.com\/flags\/ar.svg"},"event_date":"2019-11-09T22:00:00+00:00","event_timestamp":1573336800,"firstHalfStart":1573336800,"secondHalfStart":1573340400,"round":"Regular Season - 12","elapsed":57,"venue":"Estadio Juan Domingo Per\u00f3n","homeTeam":{"team_id":478,"team_name":"Instituto Cordoba","logo":"https:\/\/media.api-football.com\/teams\/478.png"},"awayTeam":{"team_id":475,"team_name":"Santamarina","logo":"https:\/\/media.api-football.com\/teams\/475.png"},"goalsHomeTeam":1,"events":[{"elapsed":45,"team_id":475,"teamName":"Santamarina","player_id":6612,"player":"J. Acevedo","assist_id":119135,"assist":"G. Iturra Matus","detail":"G. Iturra Matus"},{"elapsed":47,"team_id":478,"teamName":"Instituto Cordoba","player_id":null,"player":"","detail":"Normal goal"}]},{"fixture_id":95182,"elapsed":58,"venue":"Bento Mendes de Freitas,pelotas","homeTeam":{"team_id":141,"team_name":"Brasil DE pelotas","logo":"https:\/\/media.api-football.com\/teams\/141.png"},"awayTeam":{"team_id":143,"team_name":"Oeste","logo":"https:\/\/media.api-football.com\/teams\/143.png"},"goalsAwayTeam":1,"score":{"halftime":"0-1","events":[{"elapsed":19,"team_id":143,"teamName":"Oeste","player_id":80734,"player":"W. Rocha","assist_id":125652,"assist":"Jussa","detail":"Jussa"},{"elapsed":33,"player_id":9395,"player":"Mazinho",{"elapsed":38,"team_id":141,"teamName":"Brasil DE pelotas","player_id":119272,"player":"E. Person",{"elapsed":46,"player_id":9815,"player":"E. Pereira","assist_id":9818,"assist":"D. Oliveira","detail":"D. Oliveira"}]},{"fixture_id":95183,"venue":"Est\u00e1dio Rei pel\u00e9,Maceio","homeTeam":{"team_id":146,"team_name":"CRB","logo":"https:\/\/media.api-football.com\/teams\/146.png"},"awayTeam":{"team_id":144,"team_name":"Atletico Goianiense","logo":"https:\/\/media.api-football.com\/teams\/144.png"},"score":{"halftime":"1-0","events":[{"elapsed":20,"team_id":146,"teamName":"CRB","player_id":9526,"player":"V. Ramos",{"elapsed":43,"team_id":144,"teamName":"Atletico Goianiense","player_id":9697,"player":"Nathan","player_id":9550,"player":"L. Ceara",{"elapsed":51,{"elapsed":57,"player_id":9774,"player":"E. Pascoa","assist_id":9771,"assist":"D. Borges","detail":"D. Borges"}]},{"fixture_id":246312,"league_id":984,"league":{"name":"Primera Division - Clausura","country":"Uruguay","logo":null,"flag":"https:\/\/media.api-football.com\/flags\/uy.svg"},"round":"Clausura - 11","elapsed":52,"venue":"Estadio Campe\u00f3n del Siglo","homeTeam":{"team_id":2348,"team_name":"Penarol","logo":"https:\/\/media.api-football.com\/teams\/2348.png"},"awayTeam":{"team_id":2351,"team_name":"CA River Plate","logo":"https:\/\/media.api-football.com\/teams\/2351.png"},"team_id":2351,"teamName":"CA River Plate","player_id":51736,"player":"J. Fernandez","detail":"Red Card"}]},{"fixture_id":94789,"league_id":357,"league":{"name":"Serie A","logo":"https:\/\/media.api-football.com\/leagues\/357.png","round":"Regular Season - 32","elapsed":61,"venue":"Allianz Parque","referee":"Vinicius Goncalves Dias Araujo,"homeTeam":{"team_id":121,"team_name":"Palmeiras","logo":"https:\/\/media.api-football.com\/teams\/121.png"},"awayTeam":{"team_id":131,"team_name":"Corinthians","logo":"https:\/\/media.api-football.com\/teams\/131.png"},"events":[]},{"fixture_id":250214,"league_id":285,"league":{"name":"Primera A","country":"Colombia","logo":"https:\/\/media.api-football.com\/leagues\/285.png","flag":"https:\/\/media.api-football.com\/flags\/co.svg"},"round":"Clausura - Quadrangular - 1","venue":"Estadio Nemesio Camacho El Camp\u00edn","referee":"Bismark Elias Santiago Pitalua,Colombia","homeTeam":{"team_id":1139,"team_name":"Santa Fe","logo":"https:\/\/media.api-football.com\/teams\/1139.png"},"awayTeam":{"team_id":1138,"team_name":"America de Cali","logo":"https:\/\/media.api-football.com\/teams\/1138.png"},"team_id":1138,"teamName":"America de Cali","player_id":13177,"player":"M. Torres",{"elapsed":30,"team_id":1139,"teamName":"Santa Fe","player_id":13783,"player":"S. Salazar",{"elapsed":35,"player_id":13769,"player":"F. Torijano","player_id":13676,"player":"E. Velasco","player_id":13778,"player":"A. Perez","assist_id":13783,"assist":"S. Salazar","detail":"S. Salazar"},"player_id":13436,"player":"D. Giraldo",{"elapsed":56,"player_id":13363,"player":"R. Carrascal","detail":"Yellow Card"}]},{"fixture_id":215703,"league_id":780,"league":{"name":"Primera Division","logo":"https:\/\/media.api-football.com\/leagues\/86.png","event_date":"2019-11-09T23:00:00+00:00","event_timestamp":1573340400,"firstHalfStart":1573340400,"secondHalfStart":null,"round":"Regular Season - 13","status":"First Half","statusShort":"1H","elapsed":17,"venue":"Estadio Malvinas Argentinas","referee":"Ariel Penel,Argentina","homeTeam":{"team_id":439,"team_name":"Godoy Cruz","logo":"https:\/\/media.api-football.com\/teams\/439.png"},"awayTeam":{"team_id":453,"team_name":"Independiente","logo":"https:\/\/media.api-football.com\/teams\/453.png"},"events":[{"elapsed":7,"team_id":439,"teamName":"Godoy Cruz","player_id":36357,"player":"N. Breitenbruch",{"elapsed":12,"player_id":6325,"player":"S. Garcia","assist_id":6295,"assist":"A. Aleo",{"fixture_id":209608,"league_id":756,"league":{"name":"Liga Paname\u00f1a de F\u00fatbol","country":"Panama","flag":"https:\/\/media.api-football.com\/flags\/pa.svg"},"round":"Apertura - 17","elapsed":19,"venue":"Estadio Los Milagros","homeTeam":{"team_id":2888,"team_name":"Deportivo Universitario","logo":"https:\/\/media.api-football.com\/teams\/2888.png"},"awayTeam":{"team_id":2885,"team_name":"Tauro FC","logo":"https:\/\/media.api-football.com\/teams\/2885.png"},{"fixture_id":209610,"elapsed":14,"venue":"Estadio Agust\u00edn Muquita S\u00e1nchez","homeTeam":{"team_id":2890,"team_name":"Independiente de La Chorrera","logo":"https:\/\/media.api-football.com\/teams\/2890.png"},"awayTeam":{"team_id":2886,"team_name":"Costa del Este","logo":"https:\/\/media.api-football.com\/teams\/2886.png"},{"fixture_id":209611,"venue":"Estadio Armando Dely Vald\u00e9s","homeTeam":{"team_id":2882,"team_name":"CD Arabe Unido","logo":"https:\/\/media.api-football.com\/teams\/2882.png"},"awayTeam":{"team_id":4675,"team_name":"Atl\u00e9tico Chiriqu\u00ed","logo":"https:\/\/media.api-football.com\/teams\/4675.png"},{"fixture_id":209612,"elapsed":16,"venue":"Nuevo Estadio Maracan\u00e1 de Panam\u00e1","homeTeam":{"team_id":2883,"team_name":"Plaza Amador","logo":"https:\/\/media.api-football.com\/teams\/2883.png"},"awayTeam":{"team_id":2887,"team_name":"San Francisco FC","logo":"https:\/\/media.api-football.com\/teams\/2887.png"},{"fixture_id":232943,"league_id":875,"country":"El-Salvador","flag":"https:\/\/media.api-football.com\/flags\/sv.svg"},"round":"Apertura - 18","elapsed":15,"venue":"Estadio Las Delicias","homeTeam":{"team_id":4308,"team_name":"Santa Tecla","logo":"https:\/\/media.api-football.com\/teams\/4308.png"},{"fixture_id":169227,"league_id":584,"league":{"name":"Liga MX","country":"Mexico","logo":"https:\/\/media.api-football.com\/leagues\/297.png","flag":"https:\/\/media.api-football.com\/flags\/mx.svg"},"elapsed":18,"venue":"Estadio Alfonso Lastras Ram\u00edrez","referee":"Luis Santander,Mexico","homeTeam":{"team_id":2314,"team_name":"Atletico San Luis","logo":"https:\/\/media.api-football.com\/teams\/2314.png"},"awayTeam":{"team_id":2288,"team_name":"Necaxa","logo":"https:\/\/media.api-football.com\/teams\/2288.png"},{"fixture_id":169793,"league_id":587,"league":{"name":"Ascenso MX","logo":"https:\/\/media.api-football.com\/leagues\/300.png","round":"Apertura - 13","venue":"Estadio Universitario Alberto Chivo C\u00f3rdoba","homeTeam":{"team_id":2302,"team_name":"Potros Uaem","logo":"https:\/\/media.api-football.com\/teams\/2302.png"},"awayTeam":{"team_id":2304,"team_name":"Tampico Madero","logo":"https:\/\/media.api-football.com\/teams\/2304.png"},{"fixture_id":234093,"venue":"Estadio Jos\u00e9 Mar\u00eda Minella","homeTeam":{"team_id":1962,"team_name":"Alvarado","logo":"https:\/\/media.api-football.com\/teams\/1962.png"},"awayTeam":{"team_id":466,"team_name":"Atletico Mitre","logo":"https:\/\/media.api-football.com\/teams\/466.png"},{"fixture_id":234100,"event_date":"2019-11-09T23:10:00+00:00","event_timestamp":1573341000,"firstHalfStart":1573341000,"venue":"Estadio Ciudad de Vicente L\u00f3pez","homeTeam":{"team_id":1064,"team_name":"Platense","logo":"https:\/\/media.api-football.com\/teams\/1064.png"},"awayTeam":{"team_id":454,"team_name":"Temperley","logo":"https:\/\/media.api-football.com\/teams\/454.png"},"events":[{"elapsed":11,"team_id":454,"teamName":"Temperley","detail":"Yellow Card"}]}]}};
xin34140 回答:如果我使用AJAX加载php文件,则函数的内容返回[object HTMLDivElement]

您永远不会在使用content的函数中定义document.getElementById("myDiv").innerHTML = content;,因此JS引擎将查找范围,直到找到匹配项。该匹配项是 global 变量,它是通过<div id="content">的存在而隐式创建的 ,因此content是HTML元素对象,而不是字符串。 / p>

由于它是一个对象,因此可以通过元素的toString()方法将其转换为字符串,默认情况下,该方法将返回字符串"[object HTMLDivElement]"

如果需要其他值,则需要在某个位置定义它。

请注意,在其他地方,您使用content定义了let变量,但这属于不同函数的范围。该函数是异步的,因此为进一步阅读,您可能还应该参阅How do I return the response from an asynchronous call?

,

我现在将数据直接加载到Div getAjax

function loadComponents() {
let data = null;
let xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.addEventListener("readystatechange",function () {
    if (this.readyState === this.DONE) {
        console.log(this.responseText);
        let obsah = this.responseText;
        document.getElementById("getAjax").innerHTML = obsah;
    }
});
xhr.open("GET","https://api-football-v1.p.rapidapi.com/v2/fixtures/live?timezone=Europe%2FLondon");
xhr.setRequestHeader("x-rapidapi-host","api-football-v1.p.rapidapi.com");
xhr.setRequestHeader("x-rapidapi-key","e8118d13f1msh0edd004389b2d85p1b89c2jsn0cd40324ddec");
xhr.send(data);
};
本文链接:https://www.f2er.com/3128813.html

大家都在问