ReactJS - 从URL获取json对象数据

How do I get data from an URL into ReactJS.

如何从URL获取数据到ReactJS。

The url is of the following type: http://www.domain.com/api/json/x/a/search.php?s=category

该网址具有以下类型:http://www.domain.com/api/json/x/a/search.php?s = category

which, if typed in a browser, will display a json object.

如果在浏览器中键入,将显示一个json对象。

How do I load it to ReactJS.

如何将其加载到ReactJS。

To start with, I started by:

首先,我开始:

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

console.log(dUrl);

but obviously it displays the url not the content (which, I will be able to filter - it's just this initial step of loading it into an object that I don't know)

但显然它显示的是url而不是内容(我将能够过滤 - 这只是将它加载到我不知道的对象中的第一步)

Edit: I'd rather not use jQuery.

编辑:我宁愿不使用jQuery。

5 个解决方案

#1

You will need to use AJAX for that. This is easy using jQuery.

你需要使用AJAX。使用jQuery很容易。

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

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

You will need to add/import jQuery to make it work.

您需要添加/导入jQuery才能使其正常工作。

If you don't want to add ajax then:

如果您不想添加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();
}

refer this for more information about AJAX

有关AJAX的更多信息,请参阅此处

#2

Try using Fetch API, it's recommended by Facebook. You should avoid mixing in jQuery with ReactJS and stick to the ReactJS way of manipulating the DOM.

尝试使用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);
   });
}

Or using async/await

或者使用async / await

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

I'm aware the URL is for React Native's documentation, but this apply for ReactJS as well.

我知道这个URL是针对React Native的文档的,但这也适用于ReactJS。

#3

Hi Wasteland (best game of all time, btw - but that's for a different post :)

嗨Wasteland(有史以来最好的游戏,顺便说一句 - 但这是一个不同的帖子:)

Easiest way:

Use axios library: //cdnjs.cloudflare.com/ajax/libs/axios/0.8.1/axios.min.js

使用axios库://cdnjs.cloudflare.com/ajax/libs/axios/0.8.1/axios.min.js

componentDidMount: function() {
    var th = this;
    this.serverRequest = 
      axios.get(this.props.source)
         .then(function(result) {    
          th.setState({
            jobs: result.data.modules
          });
       })
 }

Example https://codepen.io/motekim/pen/RJPgRK

#4

In React version 16 or higher, the following function can be used:

在React版本16或更高版本中,可以使用以下函数:

 yourFunctionName = async() => {
    const api_call = await fetch(`yourUrl`);
    const data = await api_call.json();
    console.log(data);
    }

#5

-1

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

Well u will have to use Ajax. Check the link above. Try to make a call during one of the component lifecycle methods. This does not use JQuery.

那么你将不得不使用Ajax。检查上面的链接。尝试在其中一个组件生命周期方法中进行调用。这不使用JQuery。

#1