Ajax请求

浮光跃金.free

于 2023-07-13 11:26:44 发布

阅读量107

点赞数

文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/qq_52040402/article/details/131697597

版权

一. 发送一个Ajax请求

1.创建一个请求实例

 var xhr = new XMLHttpRequest()

2.打开一个链接

 xhr.open('get', '')

3.发起请求

xhr.send()

4.接收响应

监听状态改变onreadystatechange

响应数据 readystate 4 表示响应完成 status 200表示响应成功

readyState

0是open未调用

1是open已经调用

2是接收响应头信息

3是接收响应体信息

4是响应完成


 <script>
        window.onload = function(){
            // 发送一个Ajax请求
            // 1.创建一个请求实例
            var xhr = new XMLHttpRequest()
            // var xhr = new XMLHttpRequest()
            console.log(xhr);

            // 2.打开一个链接
            xhr.open('get', 'http://121.199.0.35:8888/index/carousel/findAll')
            // xhr.open('get', 'http://121.199.0.35:8888/index/carousel/findAll')

            // 3.发起请求
            xhr.send()
            // xhr.send()

            // 4.接收响应 监听状态改变onreadystatechange
            // 相应数据 readystate  4 表示响应完成  status 200表示响应成功
            // readyState 0 open未调用 1 open已经调用  2接收响应头信息  3接收响应体信息 4响应完成
            xhr.onreadystatechange = function(){
                // 表示响应完成     表示响应成功
                if(xhr.readyState === 4 && xhr.status === 200){
                    console.log(xhr.response, '打印响应体');

                    // 后端返回的数据格式是json字符串
                    var res = JSON.parse(xhr.response)
                    console.log(res);
                    // Object { status: 200, message: "success", data: (3) […], timestamp: 1688634652889 }

                    // 循环创建图片和div  将url给到img  src属性
                    // 循环
                    res.data.forEach(function(item){
                        console.log(item, '打印data里的东西');
                        // 创建图片和div  将url给到img  src属性
                        var img = document.createElement('img')
                        var div = document.createElement('div')
                        // 给img src加图片链接 控制图片大小
                        img.src = item.url
                        img.style.width = '300px'
                        // 给div加说明
                        div.innerHTML = item.status + '444' +item.introduce
                        // 给浏览器加img div
                        document.body.appendChild(div)
                        document.body.appendChild(img)
                    })
                }
            }
        }
    </script>

二.Ajax-get有参

get请求带参数分页查询
一页查询10条数 page1 pageSize 10

<script>
        window.onload = function(){
            // get请求带参数 分页查询
            // 一页查询10条数 page1 pageSize 10
            // 1.创建一个xmlHttpRequest请求实例
            var xhr = new XMLHttpRequest()
            var params = {
				page:1,
				pageSize:10
			}
            // 将对象转为查询字符串 Qs.stringify()
			var paramsString = Qs.stringify(params);
            // ?page=1&pageSize=11 查询字符串  
            // 2.打开一个链接 
            xhr.open('get', 'http://121.199.0.35:8888/index/article/pageQuery?page=1&pageSize=11')

            // 3.发送请求
            xhr.send()

            // 4.监听状态改变 接收响应
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4 && xhr.status){
                    // 后端返回的数据格式是json字符串
                    var response = JSON.parse(xhr.response)
                    console.log(response);

                    var dl = document.createElement('dl')

                    response.data.list.forEach(function(item){
                        var dt = document.createElement('dt')
                        var dd = document.createElement('dd')
                        dt.innerHTML = item.title
                        dd.innerHTML = item.content

                        dl.appendChild(dt)
                        dl.appendChild(dd)

                        document.body.appendChild(dl)
                    })
                }
            }
        }
    </script>

三.对象和查询字符串互转

 <script>
        var obj = {
            name: 'evan',
            age: 23,
            title:'标题'
        }
        // 转成查询字符串 ?name=evan&age=23&title=标题
        function queryString(obj){
            var str = ''
            for(let key in obj){
                // key 属性名 obj[key]属性值
                str += '&' + key + '=' + obj[key]
            }
            str = str.replace('&', '?')
            // console.log(str);//&name=evan&age=23&title=标题

            
            return str
        }
        queryString(obj)
        console.log(queryString(obj));//?name=evan&age=23
console.log('-----------------------------');

        var res = queryString(obj)
        // 查询字符串转成对象 
        function pares(res){
            var obj = {}
            var result = res.split('&')
            // console.log(result);//Array [ "?name=evan", "age=23", "title=标题"]
            res.split('&').forEach(function(item){
                if(item.includes('?')){
                    item = item.slice(1)
                }
                // console.log(item);// Array(3) [ "?name=evan", "age=23", "title=标题" ]
                let newArr = item.split('=')
                console.log(newArr);
                // Array [ "name", "evan" ]
                // Array [ "age", "23" ]
                // Array [ "title", "标题" ]
                obj[newArr[0]] = newArr[1]
            })
            return obj
        }
        pares(res)
        console.log(pares(res));//Object { name: "evan", age: "23", title: "标题" }
    </script>

四.Ajax-post请求

1.创建一个请求实例

var xhr = new XMLHttpRequest();

2.1打开一个链接

 xhr.open('post','http://121.199.0.35:8888/user/login');

2.2 设置请求头为json格式 setRequestHeader

1.Content-Type application/json 设置json格式

2.Content-Type application/x-www-form-urlencoded 设置为表单格式

3.Content-Type text/plain;charset=UTF-8 默认值

xhr.setRequestHeader('Content-type','application/json;charset=UTF-8');

3.发送请求

   xhr.send(JSON.stringify(obj));

4.监听状态改变接收响应 onreadystatechange

<script>
		// 1.创建一个请求实例
		var xhr = new XMLHttpRequest();
		// 2.1打开一个链接
		var obj = {
			username:'admin1',
			password:123321
		}
		xhr.open('post','http://121.199.0.35:8888/user/login');
		// 2.2 设置请求头为json格式 setRequestHeader 
		/**
		 * 1.Content-Type application/json 设置json格式
		 * 2.Content-Type application/x-www-form-urlencoded 设置为表单格式
		 * 3.Content-Type text/plain;charset=UTF-8 默认值
		*/
		xhr.setRequestHeader('Content-type','application/json;charset=UTF-8');
		// 3.发送请求
		xhr.send(JSON.stringify(obj));
		// 4.监听状态改变 接收响应
		xhr.onreadystatechange = function(){
			if(xhr.readyState === 4 && xhr.status === 200){
				console.log(JSON.parse(xhr.response));
// Object { status: 200, message: "success", data: {…}, timestamp: 1689218158803 }
			}
		}
	</script>

五.Ajax-post表单格式

<script>
		// 1.创建一个请求实例
		var xhr = new XMLHttpRequest();
		// 2.1打开一个链接
		xhr.open('post','http://121.199.0.35:8888/baseUser/saveOrUpdate');
		var obj = {
			username:'李白',
			password:'888888',
			telephone:15536332886
		};
		// 2.2设置请求头格式
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=UTF-8');
		// 3.发送请求
		xhr.send(Qs.stringify(obj));
		// 4.监听状态改变 接收响应
		xhr.onreadystatechange = function(){
			if(xhr.readyState === 4 && xhr.status===200){
				console.log(JSON.parse(xhr.response))
			// Object { status: 500, message: "该用户已经被占用", data: null, timestamp: 1689218635858 }
			}
		}
	</script>

浮光跃金.free

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax请求

2.Content-Type application/x-www-form-urlencoded 设置为表单格式。charset=UTF-8 默认值。1.Content-Type application/json 设置json格式。一页查询10条数 page1 pageSize 10。监听状态改变onreadystatechange。1是open已经调用。
复制链接

扫一扫