Question

我来自你用jQuery做Ajax的世界。现在我正在尝试一个数据绑定框架，例如React。

无论如何，我有一个问题。你如何使用React进行Ajax调用？

我发现的例子this或this似乎使用jQuery进行Ajax调用，因为他们使用的是$.get()和$.ajax()

但是，当我尝试这些代码段时，我得到了ReferenceError: $ is not defined。我是否需要引用jQuery在React中使用Ajax？

这是我的代码段

import React from 'react'
import ReactDOM from 'react-dom'

var MyApp = React.createClass({
    getInitialState: function() {
        console.log("getInitialState")
        return {
            username: 'stardustz'
        };
    },

    componentDidMount: function() {
        console.log("componentDidMount");
        $.ajax({
            url: this.props.source,
            dataType: 'json',
            success: function() {
                console.log("success");
            }.bind(this)
        });
        console.log(this.props.source);
        console.log(this.serverRequest);
    },
    componentWillUnmount: function() {
        console.log("componentWillUnmount");
    },

    render: function() {
        console.log("render");
        return (
            <div>
                Hello {this.state.username}.
            </div>
        );
    }
});

ReactDOM.render(
    <MyApp source="http://localhost:8080/api/person/getAll" />,
    document.getElementById('myapp')
);

Answer 1

React as a library没有为AJAX提供内置机制。如果要在React组件中使用jQuery，则需要通过脚本标记包含它或将其作为节点模块导入。 jQuery的无处不在使它成为教程的常见选择，但这是你看到它的唯一原因。您可以自由使用任何您喜欢的AJAX库。

Answer 2

不需要包含JQuery库来使用Ajax超过95％的Jquery函数在React应用程序中将无用，因为React与DOM操作库（如JQuery）不兼容

最好使用库进行http调用Request

Answer 3

在React中没有内置的方法来执行AJAX请求，因为React是一个View层库，而不是一个完整的框架。

使用React时不需要使用jQuery，因为它只会增加你的整体JavaScript大小。可能你会发现https://github.com/github/fetch polyfill有用。

Answer 4

在React中没有内置的方法来执行AJAX请求，因为React是一个View层库，而不是一个完整的框架。

使用React时不需要使用jQuery，因为它只会增加你的整体JavaScript大小。可能你会发现https://github.com/github/fetch polyfill有用。

＆＃34; fetch＆＃34;它是XMLHttpRequest的现代替代品，您必须关注浏览器兼容性。

在我使用fetch调用做了一个很好的React App之后，我不得不修改它，因为它在最新版本的Safari和IOS Safari和IE 11上都没有用。

请在此处查看浏览器兼容性：http://caniuse.com/#search=fetch

用React调用Ajax

4 个答案: