ajax.html 1.73 KB
Newer Older
zhangyibo's avatar
zhangyibo committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/3.2.31/vue.global.min.js"></script>
<script src="https://cdn.staticfile.org/axios/1.5.0/axios.min.js"></script>
</head>
<body>
<div id="app">
  <input type="text" v-model = 'msg'>
  <input type="text" v-model = 'body'>
  <div>{{ info }}</div>
  
<button @click="click">hhhh</button>
</div>


<script>

// const axiosInstance = axios.create({
//   // baseURL: 'http://192.168.40.219:8080',
//   // withCredentials: true, // 允许携带cookie进行跨域请求
// });
const app = Vue.createApp({
  /* 根组件选项 */
  data(){
    return {
      msg:'',
      body:'',
      info:''
    }
  },
  methods:{
    click(){    
      console.log(this.info);
      this.info = "loading";
      axios
    .post(this.msg,this.body, {
  headers: {
    'Content-Type': 'application/json'
  }
})
    // .get(this.msg,{params:{usrname:'hhh',psword:'test1'}})
    .then(response => (this.info = response.data))
    .catch(function (error) { // 请求失败处理
      console.log(error);
    });
  }
  }
  
})
  
// const msg = Vue.ref('')
// const info = Vue.ref('')

app.mount('#app')

// function  click(event){

//     }

// const app = {
//   data() {
//     return {
//       info: null
//     }
//   },
//   methods:{
    // click(event){
    //   console.log("click");
    //       axios
    //   .post('http://192.168.40.219:8080/login',{'usrname':'hhh','psword':'test1'})
    //   .then(response => (this.info = response.data))
    //   .catch(function (error) { // 请求失败处理
    //     console.log(error);
    //   });
//     }
//   }
// }

// Vue.createApp(app).mount('#app')
</script>
</body>
</html>