一步步走出坑的感觉真不错,希望所帮助!
使用firefox浏览器,axios跨域,且不降级设置,试了很多方法,结果还是传统的:
<meta name="referrer" content="origin-when-crossorigin">
使用Vue时,对Vue定义数据的访问,需要在mount之后,应该是这是,对象才真正被创建生效吧,继续学习中。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="referrer" content="origin-when-crossorigin"> <title>Vue + jquery ajax</title> <script src="vue.global.min.js"></script> <script type="text/javascript" src="jquery-3.6.4.js"></script> <script src="axios.min.js"></script> </head> <body> <div id="hello-vue" class="demo"> <h1>This is a good test!</h1><br/> <form name="user" id="userform" method="post" action=""> <table border="1" width="50%" align="center"> <tr> <td width="30%"> <label>user name:</label> </td> <td width="70%"> <input v-model="name"> </td> <tr> <td> <label>user mail:</label> </td><td> <input v-model="mail"> </td> </tr> <tr> <td> <label>user address:</label> </td><td> <input v-model="address"> </td> </tr> <tr> <td colspan=2> {{ message }} </td> </tr> <tr><td><button @click="handleClick">send ajax</button></td><td></td></tr> </table> {{ info }} </form> </div> <script> const HelloVueApp = { data() { return { message: 'Hello Vue!!', name: 'Jane Brown', mail: 'Jb@qq.com', address: 'dashiqiaok, LiaoNing', info: 'this is the begin' } }, mounted () { axios( {method: 'post', url: 'http://localhost:8764/user/findUser', params: {name:"flying green cat"}, data:{name:'flying blue cat', desc:'happy day'} }).then( (response) =>{ this.name=response.data.name; this.mail=response.data.mail; this.address=response.data.address; this.info=response+ this.info; }) .catch(function (error) { // 请求失败处理 console.log(error); }); }, methods: { handleClick(event) { event.preventDefault(); $.ajax({ url: 'http://localhost:8764/user/findUser', type: 'post', data: {name:'flying blue cat', desc:'happy day'} , success: function(response) { showData(response); } }); } } } var bvue=Vue.createApp(HelloVueApp).mount('#hello-vue') function showData(data){ bvue.mail=data.mail; bvue.name=data.name; bvue.address=data.address; } </script> </body> </html> |