0

我正在尝试使用按钮的 onClick 在 reactJs 组件中执行正常的 ajax get 调用。当我尝试使用以下代码时，没有任何反应，但 api 是实时的并且正在工作。它甚至不会将任何内容记录到浏览器控制台。我做错了什么？我是 reactjs 的新手，所以我很抱歉。我正在将 reactJS.net 与 mvc 5 和 web api 2 一起使用。我只是想看看我是否可以通过它的路由访问 webapi v2 函数。路由本身可以正常工作，我可以触发断点，但不能从 reactJs onClick 事件触发

var HomeReact = React.createClass({
getInitialState: function () {
    return {
        welcomeMsg: this.props.welcomeMsg,
    };
},

testApi: function () {
    console.log("Clicking");
    $.ajax({
        url: "/api/reg/testapi",
        type: 'GET',
        cache: false,
        dataType: 'json',
        success: function (response) {
            alert(response)
        },
        error: function (error) {
            alert("fail - " + error);
        }

    });
},

render() {
    return (
        <div id="welcomeHolder" align="center">
            {this.state.welcomeMsg}
            <br />
            <button onClick={this.testApi}>React Learning Api Test</button>
        </div>
    );
}

});

4

2 回答 2

0

你的api有问题。如果您使用工作网址"https://facebook.github.io/react-native/movies.json",，它将起作用。

class Test extends React.Component {
		constructor(props){
    	super(props);
      
      this.state = {
      	welcomeMsg: "Welcome message"
      }
    }
    
    testApi(){
      $.ajax({
          url: "https://facebook.github.io/react-native/movies.json",
          type: 'GET',
          cache: false,
          dataType: 'json',
          success: function (response) {
       				console.log(response);
          },
          error: function (error) {
              alert("fail - " + error);
          }

      });
    }
    
		render(){
    	return (
      	<div id="welcomeHolder" align="center">
            {this.state.welcomeMsg}<br />
            <button onClick={this.testApi.bind(this)}>React Learning Api Test</button>
        </div>
      )
    }
}

React.render(<Test />, document.getElementById('container'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

这是小提琴链接。

于 2017-06-14T09:47:11.110 回答
0

在这种情况下，您必须像这样在 ajax 调用中提供完整的 url

网址：“ http://localhost:666/api//reg/testapi ”，

于 2017-06-15T15:09:26.623 回答