自定义封装的ajax框架,能处理类似jquery中ajax格式的内容

拼搏现实的明天。 2021-07-25 01:36 368阅读 0赞

**传送后台的路径需要时修改**

需要传入的json参数格式：

{
    		type:'post',
    	 	dataType:"json",
    	 	url:"4.php",
    	 	data:{
    	 		uname:'哈哈',
    	 		upwd:'123'
    	 	},
    	 	success:function(res)
    	 	{
    	 		console.log(res);
    	 	}
     }

(function (){ function myajax(jsonObj)
    		{ 
    			//根据请求类型处理参数
    			if(jsonObj.type.toLowerCase()=="get")
    			{ 
    		
    				var arr=[]
    				//将json的data参数变成数组
    				for(var i in jsonObj.data)
    				{ 
    					//键名与键值拼接
    					var str=i+"="+jsonObj.data[i];
    					arr.push(str);
    					//将数组中每个键值对按&分隔成字符串
    					var vstr=arr.join("&");
    					//判断url中是否已有参数，如果有直接加上之前的参数字符串，若无则添加
    					jsonObj.url+=jsonObj.url.indexOf("?")==-1 ? "?"+vstr:'&'+vstr;
    					
    				}
    				
    				
    			}else if(jsonObj.type.toLowerCase()=="post")
    			{ 
    			
    				var formdata=new FormData();
    				for(var i in jsonObj.data)
    				{ 
    					formdata.append(i,jsonObj.data[i]);
    				}
    
    			}else{ 
    
    				 console.log("请求类型错误");
    			}
    
    			//准备xhr开始传输
    			
    			//准备接收后台返回的数据
    			var xhr=new XMLHttpRequest();
    			xhr.onreadystatechange=function()
    			{ 
    				if(xhr.readyState==4)
    				{ 
    					if(xhr.status==200)
    					{ 
    						//将请求回来的数据，作为参数，传入json对象中success属性的方法中,并调用
    						
    						jsonObj.success(JSON.parse(xhr.responseText));
    					}
    				}
    			}
    
    			//准备设置发送
    			xhr.open(jsonObj.type,jsonObj.url,true);
    			//开始发送
    			if(jsonObj.type.toLowerCase=="get")
    			{ 
    				xhr.send(null);
    			}else if(jsonObj.type.toLowerCase()=="post")
    			{ 
    				xhr.send(formdata);
    			}else{ 
    				console.log("请求类型错误");
    			}
    
    			
    			
    		}
    		//将该方法放在window属性里,使得可通过window.myajax()直接调用,也可省略window.
    			window.myajax=myajax;
    
    	}());

发表评论取消回复

表情：

评论列表（有 0 条评论，368人围观）

还没有评论，来说两句吧...

相关阅读

相关 AJAX的跨域问题使用jQuery封装的JsonP的方式实现跨域------AJAX

> <!DOCTYPE html> > <html lang="en"> > <head> > <meta charset="UTF-8

布满荆棘的人生/ 2024年02月18日 12:10/ 0 赞/ 66 阅读

相关【Ajax】jQuery中Ajax的使用

【Ajax】jQuery Ajax的使用简介：jQuery提供多个与Ajax有关的方法。通过jQuery Ajax方法，能够使用HTTP Get和 HTTP Post从

╰+攻爆jí腚メ/ 2023年10月08日 15:17/ 0 赞/ 135 阅读

相关 axios的ajax封装的js插件

axios的ajax封装的js插件地址：[http://www.axios-js.com/zh-cn/docs/][http_www.axios-js.com_zh-cn_

亦凉/ 2023年05月30日 06:24/ 0 赞/ 73 阅读

相关 php处理ajax请求json格式的方法

web应用，使用ajax调用，请求参数类型为json时，php仅用$\_POST或$\_REQUEST方式时，会出现接受不到请求参数，因为是json格式需要一定的转

电玩女神/ 2022年12月26日 08:24/ 0 赞/ 267 阅读

相关 ajax详解，四种方式发送ajax请求，ajax原生、jQuery封装的ajax、axios封装的ajax、fetch函数

ajax详解，四种方式发送ajax请求 ajax简介：ajax全称为Asynchronous JavaScript And XML，就是异步的JS和XML 通过aja

系统管理员/ 2022年11月30日 15:54/ 0 赞/ 362 阅读

相关 jquery框架的ajax,原生ajax和jquery框架ajax的使用

创建一个异步调用对象，XMLHttpRequest 创建一个新的 HTTP 请求，并且指定方法，url 及参数等(XMLHttpRequest.open(‘GET/POST’

我不是女神ヾ/ 2022年09月03日 11:17/ 0 赞/ 298 阅读

相关 jquery封装的ajax

具体操作： GET请求 > `$.get(url [,data][,function(msg){}回调函数][, dataType]);` > > `data`:给服务器

「爱情、让人受尽委屈。」/ 2022年06月02日 04:00/ 0 赞/ 336 阅读

相关 layer框架中自定义ajax验证

利用layui的form.verify实现自定义验证规则 //自定义验证规则 form.verify({ name: function(value,

布满荆棘的人生/ 2022年05月28日 02:56/ 0 赞/ 249 阅读

相关 JQuery封装的ajax、ajax上传文件、JSON对象、ajax提交表单

JQuery模式的ajax调用 $(function()\{ $('input\[name=username\]').change(function()\{

怼烎@/ 2022年04月05日 03:56/ 0 赞/ 521 阅读

相关自定义封装的ajax框架,能处理类似jquery中ajax格式的内容

传送后台的路径需要时修改需要传入的json参数格式： { type:'post', dataType:"json", ur

拼搏现实的明天。/ 2021年07月25日 01:36/ 0 赞/ 369 阅读