JS原生Ajax操作(XMLHttpRequest)
GET请求
1 var xmld=new XMLHttpRequest(); 2 xmld.open("GET","wan.php"+"?dd1=dong11&dd2=dong22"); //打开页面 3 xmld.setRequestHeader("dh","donghhhh");设置请求头 4 xmld.send(null); 发送数据需要手动在url添加 5 xmld.onreadystatechange=function(){ 6 if(xmld.readyState == 4){ 7 获取返回数据 8 alert(xmld.getResponseHeader("Server"));获取响应头 9 alert(xmld.status+"--"+xmld.statusText);得到如200:ok、404:Not Found 等等 10 alert(xmld.responseText); 得到字符串 11 var xx=xmld.responseXML //得到HTML对象 12 } 13 };
POST请求
2 xmld.open("POST","wan.php"); 3 xmld.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 4 xmld.send("dd1=dong11&dd2=dfikij"); 发送数据 6 } 13 };
兼容性问题
if(XMLHttpRequest){ 系列操作 }else{ alert("浏览器不支持"); }
利用iframe模拟ajax
实现表单提交的返回结果在iframe中进行显示,实现主页面不刷新效果,也可以模拟上传文件,推荐使用,兼容性最好
<iframe id="ifd" name="dongff"></iframe> 2 form action="wan.php" method="post" target 3 input type="text"="dd1" 4 ="dd2" 5 ="submit" onClick="subd()"> </form 7 //获取返回内容 8 script src="jquery-3.3.1.min.js"script 9 10 //在点击提交按钮时给iframe添加加载完毕事件 11 function subd(){ 12 等待iframe内容加载完毕时进入 13 $("#ifd).on('load,(){ 14 得到iframe的内容 15 var ifdtext=$().contents().find(body).text(); 16 alert(ifdtext); 17 }); 18 } 19 >
基于jquery的ajax
Get请求,参数(URL,数据,回调函数)
$.get("wan.php",{namex:"myname",passwd:"123"},function(datax){
$("p").text(datax);//datax为返回的数据
});
Post请求,参数与get一致
$.post("wan.php",function(datax){
$("p").text(datax);//datax为返回的数据
});
加载HTML碎片,返回结果会覆盖掉id为div1id标签的内容
$("#div1id").load("uu.html",(a,b,c){ if(b=="error"){ $("#div1id").text("加载失败"); } });
结合版:
$.ajax({ 2 url:"wan.php" 3 type:"POST"headers:{"dongh":"dongssssss"},//设置请求头,涉及跨域时不要进行设置 5 data:{"xx":123456,"user":"dddd"},1)"> 6 success: (data) { alert(data); },1)"> 9 error: (XMLHttpRequest,textStatus,errorThrown) { 10 状态码 11 alert(XMLHttpRequest.status); 12 状态 13 alert(XMLHttpRequest.readyState); 14 错误信息 15 alert(textStatus); 16 17 18 });
Ajax的跨域请求
如果在浏览器控制台看到类似如下的错误,表示存在跨域请求数据,即两个网页不是在同一个服务器上
Access to XMLHttpRequest at 'http://193.112.87.66/add.php?namex=myname&passwd=123' from origin 'http://192.168.43.21:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. |
解决方法如下,在访问的页面中添加响应头内容
1 <?php 2 指定允许其他域名访问 3 header('Access-Control-Allow-Origin:*'); 4 响应类型 5 header('Access-Control-Allow-Methods:POST'6 响应头设置 7 header('Access-Control-Allow-Headers:x-requested-with,content-type');
异步文件上传
自定义文件上传按钮(点击试试效果):
东文件
利用页内标签定位浮动,实现等大的input标签浮于div标签之上,并将自身透明度设置为零,span的标签为显示的文字
1 div style="height: 50px;width: 80px;background-color:aqua;text-align: center;line-height: 50px;position: relative"span>东文件="file" id="infileid" style="height: 50px;width: 80px;position: absolute;opacity: 0; bottom: 0px;left: 0px;top: 0px;right: 0px"div>
原生ajax文件上传
2 3 var fileobjx=document.getElementById("infileid").files[0];得到文件对象 4 创建form表单对象 5 var formobjx= FormData(); 6 formobjx.append("namexx","dong111" 7 formobjx.append("dongfile" 8 9 10 xmld.open("POST",1)">11 xmld.send(formobjx); 发送form数据 12 xmld.onreadystatechange=13 14 alert(xmld.responseText); 16 };
Jquery的ajax文件上传
2 5 formobjx.append("namexx",1)"> 6 formobjx.append("dongfile" $.ajax({ 8 url:"wan.php" 9 type:"POST"10 data:formobjx,1)">11 processData: false12 contentType: 13 success:14 16 error: 17 18 20 21 }); 22 23 };
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。