AJAX请求

原生AJAX

const xhr =new XMLHttpRequest();
         //        请求方式        路径           					 是否异步,默认true
         xhr.open( "GET", "http://musicapi.leanapp.cn/search?keywords=天空之城", true ); 
		  xhr.send("")            // 发送的内容
           //请求头
         xhr.setRequestHeader( "Content-type","application/json; charset=utf-8" );
		 xhr.onreadystatechange = function () {
             if ( xhr.readyState === 4  &&  xhr.status >= 200 && xhr.status<300 || xhr.status ) {
                 console.log(xhr.responseText);				//返回的内容
         	}
         };

post
    const xhr =new XMLHttpRequest();
         //                                                 请求方式        路径         是否异步,默认true
         xhr.open("POST","http://musicapi.leanapp.cn/search?",true);
                        // method         url         boolean  
          xhr.setRequestHeader ("Content-type", "application/x-www-from-urlencoded" );       
		  xhr.send("keywords=天空之城")            // 发送的内容
         
        
		 xhr.onreadystatechange = function () {
             if (xhr.readyState === 4 && xhr.status >= 200 && xhr.status<300 || xhr.status) {
                 console.log(xhr.responseText);
         	}
         };     

jquery

jQuery Ajax 常用方法有三个:get、post、ajax:

$.ajax({                                                               // 默认是GET请求
            "url": "http://musicapi.leanapp.cn/search",
            "data": {
                "keywords": "天空之城"
            },
            "dataType": "json", // 其实是jQuery帮你调用了JSON.parse()
            "success": function(data) {
                console.log(data);
            }
        });

POST 请求

$.post({
            "type": "post",                                                          //请求方式
            "url": "http://musicapi.leanapp.cn/search",                      //请求地址
            "data": {                                                                 //发送的参数
                "keywords": "天空之城"
            },
            "dataType": "json", // 其实是jQuery帮你调用了JSON.parse()  //返回数据格式
            "success": function(data) {                                           //返回的数据
                console.log(data);
            }
        });

GET 请求

$.get({
            "type": "get",                                                         //请求方式
            "url": "http://musicapi.leanapp.cn/search",,                   //请求地址
            "data": {                                                               //发送的参数
                "keywords": "天空之城"
            },
            "dataType": "json", // 其实是jQuery帮你调用了JSON.parse()    返回数据格式
            "success": function(data) {                                          //返回的数据
                console.log(data);
            }
        });

fetch

	fetch("http://musicapi.leanapp.cn/search?keywords=天空之城",{   
		   method:"GET"                                                         //请求方式
           // body: JSON.stringify({ keywords: "天空之城"})             
		})
		.then (response => response.json())
		.then (data => console. log(data))
		.catch(e => console. log ("Oops, error", e));           //错误捕获

POST

fetch("http://musicapi.leanapp.cn/search",{
	   		   method:"POST",
	       body: new URLSearchParams( [ [ "keywords",  "天空之城" ] ] ).toString(), // 这里是请求对象
		   headers: new Headers({}),                     //请求头
	   })
	   		.then (response => response.json())          //格式化数据  
	   		.then (data => console. log(data))
	   		.catch(e => console. log ("Oops, error", e));

axios

GET

axios({
            url: 'http://musicapi.leanapp.cn/search?keywords=天空之城"',
            method: 'get',//默认就是get请求
          })
            .then( res => console.log( res ))
            .catch( error => conosle.log( error ))

POAT

axios({
          url: 'http://musicapi.leanapp.cn/search',
		    method: "POST",
            headers: { },	//请求头
            params: {
              keywords: "天空之城",
            }
          })
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值