美文网首页
异步请求

异步请求

作者: benbensheng | 来源:发表于2020-03-20 12:16 被阅读0次

    来源

    jquery

    // 基本用法无参数get请求
    $.ajax({
        url:"demo_test.txt",
        success:function(result){
            console.log(result);
        }
    }
    // 需指定方法则增加method字段
    $.ajax({
        url:"demo_test.txt",
        method:"POST",
        success:function(result){
        console.log(result);
        }
    }
    // 有参数,则增加data字段,有请求头则增加headers字段,有错误处理增加error字段
    // 默认是按照表单提交post方法,data中虽然是json但是提交时转成表单
    $.ajax({
        url:"demo_test.txt",
        data:{a:10},
        success:function(result){
            console.log(result);
        },
        error:function(xhr,status,error){
            console.log(error);
        }
    });
    // data在post下是表单格式,在get下是querystring格式
    // 通过以下方法指定为json格式[json格式本质就是body里是json字符串,头里是application/json]
    $.ajax({
        url:"demo_test.txt",
        headers:{ contentType: "application/json"},
        method:"POST",
        data:JSON.stringify({a:10}),
        success:function(result){
        console.log(result);
        }
    });
    

    fetch

    // fetch的post表单数据用法
    fetch(url,{
        headers:{
             'content-type': "application/x-www-form-urlencoded"
        },
        method:"POST",
        body:"a=12&b=33",
    })
    .then(res=>res.json())
    .then(data=>console.log(res))
    .catch(e=>{})
    // fetch的post json数据用法
    fetch(url,{
        headers:{
             'content-type': "application/json"
        },
        method:"POST",
        body:JSON.stringify({a:100}),
    })
    .then(res=>res.json())
    .then(data=>console.log(res))
    .catch(e=>{})
    

    axios

    // axios默认是json类型的提交
    axios({
        url:"http://localhost:99?x=1",
        method:"POST",
        data:{a:12}
    })
    .then(res=>console.log(res.data))
    // 如果想改成form则需要修改headers和data格式
    axios({
        url:"http://localhost:99?x=1",
        method:"POST",
        headers:{"Content-Type":"application/x-www-form-urlencoded"},
        data:"a=12&b=23"
    })
    .then(res=>console.log(res.data))
    

    简写

    JQuery的get和post可以简写:

    $.get(url,data,callback)  // querystring格式
    $.post(url,data,callback) // x-www-form-urlencoded格式
    

    axios的get/post/put/delete等等都可以简写

    axios.post(url,data).then(callback)
    

    相关文章

      网友评论

          本文标题:异步请求

          本文链接:https://www.haomeiwen.com/subject/xqqjyhtx.html