原生Ajax 用post请求数据报错 415

最新推荐文章于 2023-02-10 15:40:15 发布

LWishuE

最新推荐文章于 2023-02-10 15:40:15 发布

阅读量1.1k

点赞数

分类专栏：日常code记录文章标签： ajax 前端 javascript

本文链接：https://blog.youkuaiyun.com/Insomnia_again/article/details/122634642

版权

日常code记录专栏收录该内容

4 篇文章

订阅专栏

如图根据一下接口文档,使用【原生】 ajax 调用接口,并且调用成功

答题:

let btn=document.querySelector('button')
        let p=document.querySelector('p')
        btn.addEventListener('click',function(){
            // --------------------------post请求
            // post请求的实例化，监听状态和get请求一样，区别在于建立连接后，要设置请求头
            // 再发送请求，并将要请求的数据写再send(里面)
            // ------1，实例化对象
            let xhr = new XMLHttpRequest()

            // ------2,建立链接
            // 不同于get请求，post请求建立链接时，请求的数据不写在请求地址里,写在send里
            xhr.open('post','http://139.9.177.51:3333/api/testPost')

            // ------3，设置请求头
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

            // -------4发送请求
            xhr.send('name=张三')


            // --------5，监听状态
            xhr.onreadystatechange=function(){
                // 当xhr.readyState 和 xhr.status 都成功时，才能请求到数据
                if(xhr.readyState===4 && xhr.status === 200){
                    // 接收到的是字符串，要用JSON接口转化为变量
                    let data=JSON.parse(xhr.responseText)
                    console.log(data);
                    p.innerHTML=data['data']
                }
            }
        })
</script>

此时会报错,显示415 仔细排解bug

下面接口文档显示参数类型是 application/jason

但是我们现在所设置的请求头是这样:

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

很明显就是这个问题,因为接口文档显示的是json 所以我们要把后面的改成json

// 3.1加请求头
        xhr.setRequestHeader('Content-Type', 'application/json')

但是这时候还是请求不到数据.这是因为 json对象最明显的一个特征就是

是一个必须由双引号包裹,属性名属性值都必须有双引号包裹,所以在这个时候我们需要在全局定义一个空对象,把我们需要传的参数,放进去

let obj={
            "account":"22222222222220",
            "password" : "123456"
        }

因为我们在前面的obj当中就已经给了属性名属性值,所以在后面请求数据的时候就要把obj转换

        // 3.2发送请求 
        xhr.send(JSON.stringify(obj))

接下来就是一对转换...

 // 4.监听请求状态
        xhr.onreadystatechange=function(){
            if(xhr.readyState===4 && xhr.status===200){
            let data =JSON.parse(xhr.responseText) 
            JSON.stringify("参数",data)
            console.log(data);
            text.innerHTML=data['msg']
            }
        }

这样就会解决了

完整代码如下

<body>
    <button id="btn">接受数据</button>
    <p id="text">

    </p>
    <script>
        let obj={
            "account":"22222222222220",
            "password" : "123456"
        }
        // 获取dom
        let btn = document.querySelector('#btn')
        // 文本
        let text = document.querySelector('#text')
        btn.addEventListener('click',function(){
        // 接口: http://139.9.177.51:8099/users/add
        // 1.创建实例对象
        let xhr = new XMLHttpRequest()
        // 2.建立链接
        xhr.open("post","http://139.9.177.51:8099/users/add")
        // 3.1加请求头
        xhr.setRequestHeader('Content-Type', 'application/json')
        // 3.2发送请求 必须是字符串
        xhr.send(JSON.stringify(obj))
        // 4.监听请求状态
        xhr.onreadystatechange=function(){
            if(xhr.readyState===4 && xhr.status===200){
            let data =JSON.parse(xhr.responseText) 
            JSON.stringify("参数",data)
            console.log(data);
            text.innerHTML=data['msg']
            }
        }
    })
    </script>
</body>