【五子棋实战】第6章调用接口进行联调-阿里云开发者社区

【五子棋实战】第6章调用接口进行联调

2023-10-27 23

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【五子棋实战】第6章调用接口进行联调Ajax调用接口调用五子棋接口点击优化尾声更多待开发的功能

Ajax调用接口

引入Jquery，使用JQ封装的ajax，demo如下：

<script src="jquery-3.5.0.min.js"></script>
<script>
$.ajax({
  url: 'http://localhost:5000/api/next_step',
  type: 'POST',
  data: { 'board':board.value.toString(), 'depth': 3, 'ratio':1, 'length': 15},
  dataType: 'json',
  success: function(response) {
    console.log(response);
  },
  error: function(error) {
    console.log(error);
  }
});
</script>

调用五子棋接口

$.ajax({
  url: 'http://localhost:5000/api/next_step',
  type: 'POST',
  data: { 'board':board.value.toString(), 'depth': 3, 'ratio':1, 'length': 15},
  dataType: 'json',
  success: function(response) {
    console.log(response);
    if(response.code === 200){
      if(response.data.flag === true){
        alert(response.data.player + "win !!");
        return;
      }
      var data = response.data;
      var i = data.x;
      var j = data.y;
      if(currentPlayer == 1){
        var c = new Chess(i,j,black_flag);
        board.value[i][j]=black_flag;
      }else{
        var c = new Chess(i,j,white_flag);
        board.value[i][j]=white_flag;
      }
      board.chessList.push(c);
      draw.drawChessAll(board.chessList);
      currentPlayer = (currentPlayer === 1) ? 2 : 1;
    }else{
      alert(response.msg);
    }
    $("span").css("display","none");
  },
  error: function(error) {
    console.log(error);
  }
});

以上代码是一个使用 Ajax 进行 POST 请求的示例。请求发送到 http://localhost:5000/api/next_step，请求参数包括 board、depth、ratio 和 length。成功响应后，根据返回结果进行相应的处理。如果返回的 code 为 200，且 flag 为 true，则显示获胜信息；否则根据返回结果更新棋盘状态，并进行相应的绘制和切换玩家操作。若请求出错，则输出错误信息到控制台。