前端用ajax调接口怎么破啊？

Question

本人前端刚培训完不久找到一份实习的工作，这几天公司让我练习用ajax调接口，上网找资料了根本弄不懂啊，还是不会用啊，急死了现在感觉好费劲啊！！就想问问大家当初都是怎么学的,有什么好的方法或例子吗？

Answer 1

基本上都是固定的模式吧，比如：

this.ajax({   
    method: 'post',   
    url: 接口,   
    data: 给后台传的数据 
}).then(response => {   
    //请求成功执行的内容
} 
}).catch(function () {
    //请求失败执行的内容
})

Answer 2

好比你js写一个类似的

const URL = 'xxx/queryPeople'   //请求地址

function res(obj){ //模拟后端的接受地址
    if(obj.url === URL){
        return {
            name:'cnyballk',
            age:20
        }
      }
}
const params = { //参数
    id:1
}
function ajax(url,params){ //延迟请求，模拟异步
    setTime(function(){
        const res = res(url,params)  //返回请求数据
       console.log(res )//打印
    },1e3)
}
ajax(URL,params);  //1s后打印{
            name:'cnyballk',
            age:20
        }
        
        
  没错，ajax就是和这个类似，访问你服务器上的一个指定的url
  请求成功就返回定好的数据，失败也返回失败，
  至于ajax具体方法，原生你就没必要去写了，如果jquery的话封装的挺好了
  或者也可以使用axios，例子很多

 

Answer 3

1. 
   

ajax调接口  我经常使用的有两种。

第一种是 表单提交时 将输入的数据提交给后台 代码类似这种

//提交按钮的id submit

 $('#submit').click(function(){

            var x = {};

           //获取相关组件的输入值封装到x对象中

            x.a1=$('#a1').val();

            x.a2=$('#a2').val();

            var formData=new FormData();

            //将数据解析成为字符串 封装到 xx中

            formData.append('xx',JSON.stringify(x));

           //将数据提交至后台处理相关操作

            $.ajax({

                url:处理这些数据的url地址或者叫接口,

                type:'POST',

                data:formData,

                success:function(data){

                 //后台处理完成后 返回处理结果

                 //success属性为后台定义的 可以更改为任意名称

                    if(data.success){

                        $.toast('提交成功！');

                    }else{

                        $.toast('提交失败！'+data.errMsg);

                    }

                }

            });

        });

第二种是获取后台的数据 并赋值给表单 大概类似这种代码

$.getJSON(处理这些数据的url地址或者叫接口(url),function(data){

//success同上

if(data.success){

//从返回的JSON当中获取x对象信息,并赋值给表单

//这个data.x的x是后台定义的 xName xDesc都是x的属性 均为后台定义

var x = data.x;

$('#a1').val(x.xName);

$('#a2').val(x.xDesc);

}

});

}

最好还是看点后台的知识   我学这种东西都是看博客和视频

希望能帮到你

Answer 4

楼主会了吗？我现在刚转行老板也是让我弄这个，完全看不懂啊