频道澳门葡京手机版网址
登录注册
澳门葡京手机版网址 > 澳门葡京手机版网址 > web前端 > HTML/CSS > 正文
Ajax请求后台数据
2018-12-21 15:15:15           
收藏   我要投稿

一、前期准备

安装好XAMPPApp,并运行起来。本文代码是基于XAMPP开发环境,XAMPP是完全免费且易于安装的Apache发行版,其中包含MariaDB、PHP和Perl。XAMPP开放源码包的设置让安装和使用出奇容易。

二、前后台数据交互

前台部分
其中“process.php?name=Herry”,向后台传递name数据

 document.getElementById("button").addEventListener("click",function () {
        var xhr = new XMLHttpRequest();
        xhr.open("GET","process.php?name=Herry",true);
        xhr.onreadystatechange=function () {
            if(xhr.readyState==4&&xhr.status==200) {
                var data = xhr.responseText;
                console.log(data)
            }
        };
        xhr.send();
    })

后台PHP部分
后台接收了name数值,并向前台返回了"GET: 你的名字是". $_GET['name']



于是最后前台console里面得到:GET: 你的名字是Herry

 

三、正常表单提交到PHP与Ajax方式提交

正常表单GET提交数据到PHP

前台部分


 

后台PHP部分



表单输入名字Bucky,然后点击提交后,浏览器将数据打包后,传递给后台,最后后台返回大家想要的数据----GET: 你的名字是Bucky。整个过程中页面有刷新,数据点击提交后,页面跳转到这个网址https://localhost/ajax/process...

 

Ajax请求后台数据GET

Ajax异步请求数据,无需刷新页面。可以提高用户体验,较少网络数据的传输量。click事件改成submit事件(表单应该用submit事件),然后取消默认事件。

前台部分

//Html部分
 
//Javascript部分 document.getElementById("getForm").addEventListener("submit",function(e){ e.preventDefault();//阻止默认跳转事件 var name=document.getElementById("name1").value;//获取输入的值 var xhr = new XMLHttpRequest(); xhr.open("GET","process.php?name="+name,true); xhr.onreadystatechange=function () { if ( xhr.status == 200&&xhr.readyState == 4) { var data = xhr.responseText; console.log(data); } } xhr.send(); })

后台PHP部分



在表单输入Bucky,点击提交,最后在console显示:GET: 你的名字是Bucky。整个过程页面无刷新,有效提高页面性能。

 

正常表单POST提交数据到PHP

与GET提交数据差不多
前台部分


 

后台PHP部分



表单输入名字Bucky,然后点击提交后,浏览器将数据打包后,传递给后台,最后后台返回大家想要的数据----POST: 你的名字是Bucky。整个过程中页面有刷新,数据点击提交后,页面跳转到这个网址https://localhost/ajax/process...。与GET方式提交不同的是,POST方法数据并没有内嵌在url中,这样安全性比较高。

 

Ajax请求后台数据POST

POST请求与GET主要有两点不同:

①post请求一定要设置请求头的格式内容:

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");  

②post请求参数放在send里面,即请求体

xhr.send("name="+name" );  

前台部分

//HTML部分
 
//Javascript部分 document.getElementById("postForm").addEventListener("submit", function (e) { e.preventDefault(); var name=document.getElementById("name2").value; var params = "name="+name; var xhr = new XMLHttpRequest(); xhr.open("POST","process.php",true); xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xhr.onreadystatechange=function () { if(xhr.readyState==4&&xhr.status==200) { var data = xhr.responseText; console.log(data); } }; xhr.send(params); })

后台PHP部分



表单输入名字Bucky,然后点击提交后,最后在console显示:POST: 你的名字是Bucky。整个过程页面无刷新。

 

四、总结

1.在不需要重新刷新页面的情况下,Ajax 通过异步请求加载后台数据,提高用户体验和页面性能。
2.GET参数通过URL传递,POST放在Request body中,后者安全性比较高。

点击复制链接 与好友分享!回澳门葡京手机版网址澳门葡京手机版网址
上一篇:ECMAScript2015(ES6)有用的提示与技巧
下一篇:构建多页面应用——单个页面的处理
相关文章
图文推荐
点击排行

关于大家 | 联系大家 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 澳门葡京手机版网址_澳门新莆京娱乐_www.88807.com - 点此进入--致力于做实用的IT技术学习网站

XML 地图 | Sitemap 地图