ajax模拟百度搜索

#ajax

1、$.get(url,data,success,dataType)

2、$.post()

3、$.ajax(settings)

settings:对象，里面包含前面方法的四个参数

			$.get("js/province.json",function(res){
				console.log(res);
			})

post不能够请求本地模拟的数据

			/*$.post("js/city.json",function(res){
				console.log(res)
			})*/

			$.ajax({
				"type":"get",
				"url":"js/city.json",
				"success":function(res){
					console.log(res);
				},
				"dataType":"json"
			});
			var basUrl =" https://easy-mock.com/mock/5b7bc59750a6182006a198e5/018test";
			$.ajax({
				type:"post",
				url:basUrl+"/lunbotu",
				success:function(res){
					console.log(res);
					//Object.keys()可以把对象的键名提取出来，并返回一个数组
					var arr = Object.keys(res.data)
					console.log(arr)
					for (var i=0;i<arr.length;i++) {
						var img =$("<img />")
						img.prop("src",res.data[arr[i]]);
						$("body").append(img);
					}
				}
			});

			$.ajax({
				type:"post",
				url:basUrl+"/test?name=小明&garde=123",
				data:{
					name:"小明",
					grade:"123"
				},
				success:function(res){
					console.log(res);
					var h1 = $("<h1>");
					$("body").append(res.data.result.name);
				}
			})

#跨域请求 模拟百度搜索框

		<input type="text" id="search" placeholder="请输入搜索内容" value=""/>

		var baseurl = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=1&cb=callback";
			$("#search").on("keyup",function(){
				console.log($(this).val());
				var val = $(this).val();
				$.ajax({
					type:"get",
					url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
					dataType:"jsonp",
					data:{
						wd:val
					},
					jsonp:"cb",
					jsonpCallback:"callback",
					success:function(res){
						console.log(res);
						search(res.s);
					}
				})
			})
			//将相关搜索渲染到页面
			function search(arr){
				console.log(arr)
				$(".relaton").html("");//每次搜索的时候清空一次
				$(arr).each(function(index,item){
					if(index<5){
						var li = $("<li>"+item+"</li>");
						console.log(li)
						$(".relaton").append(li);
					}
				})
			}