React JS 请求服务端接口

最新推荐文章于 2024-04-27 09:59:20 发布

mxc40700229

最新推荐文章于 2024-04-27 09:59:20 发布

阅读量1w

点赞数 1

分类专栏： React

本文链接：https://blog.csdn.net/mxc40700229/article/details/47342377

版权

React 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

(1) web端请求接口：

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/JSXTransformer.js"></script>
    <script src="../build/jquery.min.js"></script>
  </head>
  <body>
    <script type="text/jsx">
var TestRequest = React.createClass({
  getInitialState: function() {
    return {
    };
  },
 componentDidMount: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'text',
      success: function(data) {
        alert('aa' + data);
      }.bind(this),
      error: function(xhr, status, err) {
        alert('err==='+err+"---status===="+status+"---");
      }.bind(this)
    });
  },

  render: function() {
    return (
      <div>
        {this.state.response}
      </div>
    );
  }
});
//https://api.github.com/users/octocat/gists    http://localhost:8080/emalldemo/ProductsServlet?action=productlist
React.render(
  <TestRequest url="http://localhost:8080/emalldemo/ProductsServlet" />,
  document.body
);
    </script>
  </body>
</html>

(2) React Native 请求接口:

var Follow = React.createClass({
	//构造数据源
	getInitialState: function() {
		return {
		};
	},
	componentDidMount:function(){
		this.fetchData();
	},
	fetchData: function() {
		fetch("http://localhost:8080/emalldemo/ProductsServlet?action=productlist")
		.then(response => response.text())
		.then(responseText => {
			alert(responseText);
		})
		.catch((error) => {
			alert("error");
		});
	},
	render: function() {
		var HouseCell = require('./HouseCell');
		var nav = this.props.navigator;
 		return (
 
				<ScrollView style = {styles.container}>
				   <HouseCell nav={nav} message= {datasource[0]}/>
 					 
				</ScrollView>

			);
	}
});

mxc40700229

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
React JS 请求服务端接口

(1) web端请求接口： var TestRequest = React.createClass({ getInitialState: function() { return { }; }, componentDidMount: function() { $.ajax({ url: thi
复制链接

扫一扫