本文共 2835 字，大约阅读时间需要 9 分钟。

Vue之两种插件处理ajax请求

一 axios插件处理ajax请求(推荐)

1 方式一处理get和post请求

1. 语法

get语法一：  axios({
        method : "get", //请求方式     url : "请求路径?参数"  //请求路径,如果带参数则 ？参数	   }).then(function (result) {
   });get语法二：ES6语法  axios({
        method : "get", //请求方式     url : "请求路径?参数"  //请求路径,如果带参数则 ？参数	   }).then(result => {
   });    axios({
        method : "post, //请求方式     url : "请求路径"  //请求路径，参数方式一	 params:{
   "":""....}    //参数方式二   }).then(function(result){
   });post语法二：ES6语法   axios({
        method : "post, //请求方式     url : "请求路径"  //请求路径	 params:{
   "":""....}    //参数方式   }).then(result => {
   });

2. jsp页面代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %><%    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";%>            
               
   
        
    点击取得学生信息        
    
        
    
        编号：
    {
   {
   id}}
    
        姓名：
    {
   {
   name}}
    
        年龄：
    {
   {
   age}}
    
    
   
    

2 方式二处理get和post请求

1. 语法

get请求：   axios.get(         "请求路径",  //请求路径            {
                   params : {
                       "name" : "aaabbb"                }            }  //请求参数        ).then(result=>{
   });post请求：             axios.post(         "请求路径",  //请求路径          "参数一":"值"//请求参数        ).then(result=>{
   });

2. jsp页面代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %><%    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";%>            
               
   
        
    点击取得学生信息        
    
        
    
        编号：
    {
   {
   id}}
    
        姓名：
    {
   {
   name}}
    
        年龄：
    {
   {
   age}}
    
    
   
    

二 vue-resource插件处理ajax请求

1 处理get请求

1. 语法

this.$http.get("请求路径?参数").then(function(result){
   });

2. jsp页面代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %><%    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";%>            
               
   
        
    点击取得学生信息        
    
        
    
        编号：
    {
   {
   id}}
    
        姓名：
    {
   {
   name}}
    
        年龄：
    {
   {
   age}}
    
    
   
    

2 处理post请求

1. 语法

this.$http.post("请求路径",参数如：{
   "name":"ls123"},{
   emulateJSON:true}).then(function (data) {
   }); 说明：{
   emulateJSON:true}设置，提交的内容类型就设置为了普通表单的格式传递参数

2. jsp页面代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %><%    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";%>                    
   
        
    点击取得学生信息        
    
        
    
        编号：
    {
   {
   id}}
    
        姓名：
    {
   {
   name}}
    
        年龄：
    {
   {
   age}}
    
    
   
    

转载地址：http://ikojz.baihongyu.com/