ajax函数封装与调用

最新推荐文章于 2020-11-24 14:14:11 发布

从人到猿

最新推荐文章于 2020-11-24 14:14:11 发布

阅读量582

点赞数 1

分类专栏：函数封装文章标签： ajax封装与调用实例

本文链接：https://blog.csdn.net/qq_39200185/article/details/96371779

版权

函数封装专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML+CSS

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		html,body{
			height: 100%;
		}

		#box{
			position: relative;
			width:500px;
			height: 35px;
			/*border: 1px solid black;*/
		}

		#querystr{
			width: 100%;
			height: 100%;
			outline:none;
			margin:0;
			/*border: none;*/
		}
		
		#btnQuery{
			position: absolute;
			left:500px;
			top:0px;
			height: 35px;
		}

		#musicBox{
			position: absolute;
			left:0px;
			top:35px;
			width: 500px;
			list-style: none;
		}

		#musicBox li{
			padding: 0;
		}


	</style>
</head>
<body>
		百度logo：
		<div id="box">
			<input type="text" id="querystr" /><input id="btnQuery" type="button"  value="百度一下" />
			<ul id="musicBox">

			</ul>
		</div>
		
	</form>
</body>
</html>

//接口文档：
//1、请求地址：getMusic.php
//2、请求方式:get
//3、请求参数:
/*
参数名数据类型描述是否必须
musicname String 音乐名称（的一部分）是
/
//4、响应数据
/
符合musicname的所有音乐的名字，
如（加入前端传入musicname=你），后端响应如下数据：
‘[
“你是我的眼”,
“你是我的心”,
“你是我的宝贝”,
“你是我的手”,
“你是我的头”,
“我是你的优乐美”
]’

*/
Js代码：

<script type="text/javascript" src="js/ajaxTools.js"></script>
<script type="text/javascript">

var myTimer;

$("#querystr").oninput = function(){
	if(!myTimer){//myTimer不是undefined。
		window.clearTimeout(myTimer);
	}
	myTimer = setTimeout(function(){
		//发ajax请求
		getData();
	},200);
}

function getData(){
	// url,method,params,func,isAsync
	ajax190502({
		"url":"getMusic.php",
		"params":{
			"musicname":$("#querystr").value
		},
		"func":showMusic
	});
}

function showMusic(str){
	var arr = JSON.parse(str);
	let htmlStr ="";
	for(var i in arr){
		htmlStr += `<li>${arr[i]}</li>`;
		// htmlStr += "<li>"+arr[i]+"</li>";
	}
	$("#musicBox").innerHTML = htmlStr;
}


function $(str){
	if(str.charAt(0)=="#"){
		return document.getElementById(str.substring(1));
	}else if(str.charAt(0)=="."){
		return document.getElementsByClassName(str.substring(1));
	}else{
		return document.getElementsByTagName(str);
	}
}		

</script>

ajax封装函数：

/* 
封装ajax
参数：
    请求参数：url
    请求方式：method
    请求参数：params
        参数的两种写法：
        key1=value1&key2=value2
        {
            key1:value1,
            key2:value2
        }
    回调函数：
    是否异步
返回值：无
*/
function ajaxMy(url,method,params,func,isAsync){
    //1.创建对象
    let xhr=new XMLHttpRequest();
    //产生请求参数的字符串：循环把json对象转换为： key1=value1&key2=value2 这样的形势
    let sendstr='';
    for(let key in params){
        sendstr+=`${key}=${params[key]}&`;
    }
    if(sendstr.length>0){
        sendstr = sendstr.substring(0,sendstr.length-1);//musicname=你
    }

    let urlAndParam=url;//getMusic.php
    //如果是get方式，并且有请求参数，那么就把url和请求参数用问号隔开
    if(method.toLowerCase()=="get"&&sendstr!=""){
        urlAndParam+='?'+sendstr;//getMusic.php?musicname=你
    }

    //2.设置请求参数
    xhr.open(method,urlAndParam,isAsync);

    //3.设置回调函数
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4&&xhr.status==200){
            //调用回调函数（如下的 && 表示，逻辑短路，如果func是真，才调用func函数）
            func&&func(xhr.responseText);
            //也可以写成如下：
            if(func){
                func(xhr.responseText);
            }
        }
    }

    if(method.toLowerCase()=="post"){
        xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
        xhr.send(sendstr);
    }else{
        //4.发送请求
        xhr.send();
    }
}



function Myajax(obj){
    let defaultObj={
        "url":"#",
        "method":"get",
        "params":{},
        "func":null,
        "isAsync":true
    };

    ajaxObj={};
    for(let key in defaultObj){
        ajaxObj[key]=obj[key]||defaultObj[key];
    }

    ajaxMy(ajaxObj.url,ajaxObj.method,ajaxObj.params,ajaxObj.func,ajaxObj.isAsync);
}

getMusic.php：

<?php
	header("Content-type:text/html;charset=utf-8");

	//1、得到关键字

	$key = $_GET['musicname'];

	if($key=='你'){
		echo '["你是我的眼前的你","你是我的小鲜肉","你是我的鼻子","我是你的优乐美"]';
	}else if($key=='你是'){
		echo '["你是我的眼前的你","你是我的小鲜肉","你是我的鼻子"]';
	}else {
		echo '[]';
	}
?>

效果：
在这里插入图片描述

从人到猿

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ajax函数封装与调用

HTML+CSS<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> html,body{ height: 100%; } #box{ positio...
复制链接

扫一扫