JS前后端交互例子-项目BotBattle

目录

• 交互逻辑图解
• 后端
• 前端

jQuery的ajax的编程

项目地址

交互逻辑图解

图片来源：XZHongAN

后端

RequestMapping("/pk/")
public class BotInfoController {
  @RequestMapping(" getbotinfo/")
  public Map<String , String> getBotInfo(){
    Map<String,String> bot1 = new HashMap<>();
    bot1.put( "name " , "bot1");
    bot1.put( "rating "，"1500");
    return bot1;
  }
}

前端

App.vue执行到这段代码的时候：

setup:() => {
  let bot_name = ref("");
  let bot_rating = ref("");
  $.ajax({
    url:"http://127.0.0.1:3000/pk/getbotinfo/",
    type:"get",
    success:resp=>{
      console.log(resp);
      bot_name.value = resp.name;
      bot_rating.value = resp.rating;
      }
    });
    return{
      bot_name,
      bot_rating
};

setup:()可以认为是整个组件的入口

用户浏览器拿到了结果：

success:resp=>{
console.log(resp);
bot_name.value = resp.name;
bot_rating.value = resp.rating;
}
});

数据动态绑定到前端页面中

• 来源 https://gitee.com/XZHongAN