后台取值页面显示——Vue.js

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

在实际的应用中，几乎90%的数据是来源于服务端的，前端和服务端之间的数据交互一般是通过ajax请求来完成的。 
说到ajax请求，第一反应肯定想到了jQuery，项目中如果引入jQuery会帮助我们简化很多操作，简化DOM操作，ajax方法获取后端数据等。 
然而，Vue.js和jQuery冲突吗？？？ 
答案显然是不冲突！！！ 
接下来会实现Vue.js组件中使用jQuery的ajax方法获取服务器端数据并绑定至组件的data中。

DOM

<table border="1" width="500" style="text-align:center" id="myView">
	    <tr>
	        <td>id</td>
	        <td>名字</td>
	        <td>性别</td>
	        <td>年龄</td>
	    </tr>
	    <tr v-for="user in userList"> //userList为后台保存在请求中的值
	    	<td>{{user.id}}</td>
	        <td>{{user.userName}}</td>
	        <td>{{user.sex}}</td>
	        <td>{{user.age}}</td>
	    </tr>
</table>

JS

<script>
var myModel = {userList:[]};
myViewModel = new Vue({
	el: \'#myView\',
	data: myModel
})
//写成函数的目的，为了【复用】
function getData(){
	$.ajax({
		url: "userAction_getAllUser",                //后端的API地址
		type: \'POST\',                                //http:POST/GET
		//data: postData,                            //指客户端提交给后台的参数
		dataType: \'json\',                            //服务端返回类型text，JSON
		timeout: 3000,
		success: function(result){
			myModel.userList = result.userList
		},
		error: function(){
			alert(\'服务器忙，请稍候\');
		}
	});
}
getData();
</script>

以上是 后台取值页面显示——Vue.js 的全部内容， 来源链接： utcz.com/z/376560.html

回到顶部