Ajax递交post恳求实例剖析

摘要: 网页页面中关键有一个表格,应用了onsubmit恶性事件,在onsubmit恶性事件中最先获得提前准备post的內容,随后建立XMLHttpRequest目标,然后明确恳求主要参数,随后重新写过回调函数涵数,...

<文档:

网页页面中关键有一个表格,应用了onsubmit恶性事件,在onsubmit恶性事件中最先获得提前准备post的內容,随后建立XMLHttpRequest目标,然后明确恳求主要参数,随后重新写过回调函数涵数,在涵数中关键是依据恳求的情况来应用网络服务器端回到值,随后推送恳求,最终回到false,让表格没法递交,进而网页页面都不会自动跳转。

 !DOCTYPE html html head meta charset="utf-8" meta http-equiv="X-UA-Compatible" content="IE=edge" title 无更新客户申请注册页面 /title link rel="stylesheet" href="" /head script //建立XMLHttpRequest目标 function createXhr(){ var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest();//Google、火狐浏览器等访问器 }else if(window.ActiveXObject){ xhr = new ActiveXObject("Microsoft.XMLHTTP");//ie低版本号 } return xhr; } //申请注册方式 function reg(){ //1、获得提前准备Post內容 var username = document.getElementsByName('username')[0].value; var email = document.getElementsByName('email')[0].value; //2、建立XMLHttpRequest目标 var xhr = createXhr(); //3、明确恳求主要参数 xhr.open('POST','./06-ajax-reg.php',true); xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); //4、重新写过回调函数涵数 xhr.onreadystatechange = function(){ if(this.readyState == 4 && this.status == 200){ //应用网络服务器端回到值 var regres = document.getElementById('regres'); regres.innerHTML = this.responseText; } } //5、推送恳求 var content = 'username='+username+'&email='+email; xhr.send(content); return false;//不自动跳转网页页面 } /script body h1 无更新客户申请注册页面 /h1 form onsubmit="return reg();" 客户名: input type="text" name="username" / br/  input type="text" name="email" / br/ input type="submit" value="申请注册" / /form div id="regres" /div /body /html 

06-ajax-reg.php文档:

编码较为简易,关键是分辨內容是不是为空,为空则回到“內容填好不详细”,不以空则复印递交的內容,回到“申请注册取得成功”。

 php/** * ajax申请注册程序 * @author webbc */header('Content-type:text/html;charset=utf-8');if(trim($_POST['username']) == '' || trim($_POST['email']) == ''){ echo '內容填好不详细';}else{ print_r($_POST); echo '申请注册取得成功';} 

实际效果图:

这里写图片描述

留意事宜:

时尚博主之前应用过Jquery的Ajax,应用$.post涵数时不用特定恳求头的Content-Type內容为application/x-www-form-urlencoded,是由于jquery里边内嵌了,可是应用原生态的Ajax,也便是XMLHttpRequest涵数时务必再加。

XMLHttpRequest推送post恳求时务必设定下列恳求头:

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

大量有关ajax有关內容很感兴趣的阅读者能查看本网站专题讲座:《jquery中Ajax使用方法小结》、《JavaScript中ajax实际操作方法小结》、《PHP+ajax方法与运用总结》 ajax方法小结专题讲座》

期待文中上述对大伙儿ajax编程设计有一定的协助。



联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:自助建站