vue-ajax

向右看齐 2024-04-17 05:23 38阅读 0赞

# vue-ajax #

1.异步提交Ajax的方式把数据提交到后台，得阻止表单默认提交行为

#### 2.收集表单中的数据 ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    		<script type="text/javascript">
    			window.onload=function(){
    				new Vue({
    					el:'#box',
    					data:{
    						username:'',
    						password:'',
    						sex:'0' ,//给value 的值表示默认中
    						hobby:['run','sing'], //复选框是个数组
    						xueli:'3',
    						miaoshu:'个人描述'
    						
    					},
    					methods:{
    						tijao(){
    							//alert("表单提交")
    							//收集表单中的数据
    						console.log(this.username);
    						console.log(this.password);
    						console.log(this.sex);
    						console.log(this.hobby);
    						console.log(this.xueli);
    						console.log(this.miaoshu);
    						//Ajax 请求 把表单中的数据提交到后台
    							
    							
    						}
    						
    					}
    					
    				});
    			}
    		</script>
    	</head>
    	<body>
    		<div id="box" align="center">
    			
    			<form action="123.html" method="get"  @submit.prevent="tijao()">
    				用户名：<input type="text" name="username" v-model="username"/><br>
    				密码：<input type="password" name="password" v-model="password"/><br>
    				性别：<input type="radio" name="sex" value="1" v-model="sex"/> 男 
    				<input type="radio" name="sex" value="0" v-model="sex"/> 女
    				<br>
    				爱好：<input type="checkbox"  name="hobby" value="run" v-model="hobby"/> 跑步
    				<input type="checkbox"  name="hobby" value="game" v-model="hobby"/> 玩游戏
    				<input type="checkbox"  name="hobby" value="sing" v-model="hobby"/> 唱歌
    				<br>
    				学历：
    				<select name="xl" v-model="xueli">
    					<option value="1">小学</option>
    					<option value="2">中学</option>
    					<option value="3">大学</option>
    				</select>
    				<br>
    				<textarea rows="10" cols="15" v-model="miaoshu">
    					
    				</textarea>
    				<br>
    				<input type="submit" value="提交"/>
    			</form>
    		</div>
    	</body>
    </html>

### 表单数据收集到JSON对象. ###

### （三）原生的Ajax请求 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script type="text/javascript">
    			//创建异步请求对象
    			var xmlhttp;
    			if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
    				xmlhttp = new XMLHttpRequest();
    			}
    
    			// 向服务器发送请求
    			// 如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
    			//打开连接 GET
    			xmlhttp.open("GET", "https://api.github.com/search/users?q=a", true);
    			//发送请求
    			xmlhttp.send();
    
    			//准备好介绍,服务器的相应
    			xmlhttp.onreadystatechange = function() {
    				if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    					//接收服务器响应的文本数据
    					 var text=xmlhttp.responseText;
    					document.getElementById("myDiv").innerHTML =text;
    					//alert(text);
    				}
    			}
    		</script>
    	</head>
    	<body>
    		
    		<div id="myDiv">
    			
    		</div>
    	</body>
    </html>

### （四）vue的Ajax请求 ###

### vue的Ajax请求. ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    		<script src="js/vue-resource.js" type="text/javascript" charset="utf-8"></script>
    		<script type="text/javascript">
    			window.onload = function() {
    				new Vue({
    					el: '#box',
    					data: {
    						myarr: []
    					},
    					methods: {
    						get: function() {
    							//发送get请求
    							this.$http.get('https://api.github.com/search/users', {
    								params: {
    									q: 'aa'
    								}
    							}).then(function(res) {
    								//document.write(JSON.stringify(res.body));
    								this.myarr = res.body.items;
    							}, function() {
    								console.log('请求失败处理');
    							});
    						}
    					}
    				});
    			}
    		</script>
    	</head>
    	<body>
    		<div id="box">
    			<button type="button" @click="get()">请求后台</button>
    			<ul>
    				<li v-for="(obj,index) in myarr" :key="index">
    					{
       {index}}----{
       {obj.login}}----{
       {obj.id}}---{
       {obj.url}}
    				</li>
    			</ul>
    		</div>
    	</body>
    </html>
    
    
    
    Get 请求
    
    以下是一个简单的 Get 请求实例，请求地址是一个简单的 txt 文本：
    实例
    window.onload = function(){
        var vm = new Vue({
            el:'#box',
            data:{
                msg:'Hello World!',
            },
            methods:{
                get:function(){
                    //发送get请求
                    this.$http.get('/try/ajax/ajax_info.txt').then(function(res){
                        document.write(res.body);    
                    },function(){
                        console.log('请求失败处理');
                    });
                }
            }
        });
    }
    
    
    
    如果需要传递数据，可以使用 this.$http.get('get.php',{params : jsonData}) 格式，第二个参数 jsonData 就是传到后端的数据。

vue-ajax

发表评论取消回复

还没有评论，来说两句吧...

相关阅读