ReactJS - URLからjsonオブジェクトデータを取得する

Question

URLからReactJSにデータを取得する方法を教えてください。 、ブラウザに入力した場合、JSONオブジェクトを表示します http://www.domain.com/api/json/x/a/search.php?s=category

：

URLは、次の型です。

どのようにReactJSにロードしますか？で開始する

は、私がすることによって開始：

const dUrl = "http://www.the...."; 

console.log(dUrl); 

が、明らかにそれは私がフィルタリングできるようになる、（URLではないコンテンツを表示する - それはオブジェクトにロードするだけで、この最初のステップだと私は知らない）

編集：私はむしろjQueryを使いたくない。

Answer 1

これにはAJAXを使用する必要があります。これはjQueryを使用すると簡単です。

const dUrl = "http://www.domain.com"; 

$.ajax(
    { 
    url: dUrl, 
    success: function(result){ 
     console.log(result); 
    } 
    } 
); 

jQueryを追加/インポートする必要があります。

あなたは、AJAXを追加したくない場合は、次の

function loadData(url) { 
    var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
    if (xhttp.readyState == 4 && xhttp.status == 200) { 
     console.log(xhttp.responseText); 
    } 
    }; 
    xhttp.open("GET", url, true); 
    xhttp.send(); 
} 

はまあuはアヤックスを使用する必要がありますAJAX

Answer 2

http://www.w3schools.com/ajax/ajax_xmlhttprequest_create.asp

の詳細については、thisを参照してください。 上記のリンクを確認してください。 コンポーネントライフサイクルメソッドの1つで呼び出しを試みます。 これはJQueryを使用しません。

Answer 3

Fetch APIを使用してみてください。Facebookによって推奨されています。 jQueryとReactJSを混在させずに、ReactJSのDOM操作方法に固執する必要があります。

function getMoviesFromApiAsync() { 
    return fetch('https://facebook.github.io/react-native/movies.json') 
    .then((response) => response.json()) 
    .then((responseJson) => { 
    return responseJson.movies; 
    }) 
    .catch((error) => { 
    console.error(error); 
    }); 
} 

またはasync /待つ

async function getMoviesFromApi() { 
    try { 
    let response = await fetch('https://facebook.github.io/react-native/movies.json'); 
    let responseJson = await response.json(); 
    return responseJson.movies; 
    } catch(error) { 
    console.error(error); 
    } 
} 

https://facebook.github.io/react-native/docs/network.html

を使用して、私はURLが反応ネイティブのドキュメントのためであるが、これは、同様ReactJSの申請を承知しています。