首页 > 其他分享 >GET请求和POST请求方式

GET请求和POST请求方式

时间:2022-09-18 19:35:10浏览次数:59  
标签:function 请求 GET res xhr POST click log

 $(() => {
            const getUrl = 'http://www.liulongbin.top:3006/api/getbooks';
            const postUrl = 'http://www.liulongbin.top:3006/api/addbook';

            // 传统方式GET
            $('#b1').on('click', function () {
                const xhr = new XMLHttpRequest();
                xhr.open('GET', getUrl);
                xhr.send();
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        console.log(JSON.parse(xhr.responseText));
                    }
                }
            })

            // 传统方式POST
            $('#b2').on('click', function () {
                const xhr = new XMLHttpRequest();
                xhr.open('POST', postUrl);
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                xhr.send('bookname=lwhlss&author=4758ad1&publisher=asdfgasd');
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        console.log(xhr.responseText);
                    }
                }
            })

            // jQuery的GET
            $('#b3').on('click', function () {
                $.get(getUrl, { id: 1 }, res => console.log(res));
            })

            // jQuery的POST
            $('#b4').on('click', function () {
                $.post(postUrl, { bookname: 'qweads', author: 'lwh', publisher: '123' }, res => console.log(res));
            })

            // jQuery的Ajax的GET
            $('#b5_1').on('click', function () {
                $.ajax({
                    method: 'GET',
                    url: getUrl,
                    data: {
                        id: 1,
                    },
                    success: res => console.log(res)
                })
            })

            // jQuery的Ajax的POST
            $('#b5_2').on('click', function () {
                $.ajax({
                    method: 'POST',
                    url: postUrl,
                    data: {
                        bookname: 'lwhqwer',
                        author: 'asxz',
                        publisher: '123'
                    },
                    success: res => console.log(res)
                })
            })

            // axios的GET
            $('#b6').on('click', function () {
                axios.get(getUrl, { params: { id: 1 } }).then(res => console.log(res.data));
            })

            // axios的POST
            $('#b7').on('click', function () {
                axios.post(postUrl, { bookname: 'qwasdz', author: '72ad', publisher:'L47' }).then(res => console.log(res.data));
            })

            // axios综合的GET
            $('#b8_1').on('click', function () {
                axios({
                    method: 'GET',
                    url: getUrl,
                    params: {
                        id: 1,
                    }
                }).then(res => console.log(res.data));
            })

            // axios综合的POST
            $('#b8_2').on('click', function () {
                axios({
                    method: 'POST',
                    url: postUrl,
                    data: {
                        bookname: 'lousnz',
                        author: '7q2ad',
                        publisher: 'w47'
                    }
                }).then(res => console.log(res.data));
            })
        })

 

标签:function,请求,GET,res,xhr,POST,click,log
From: https://www.cnblogs.com/LWHCoding/p/16705528.html

相关文章