![PHP7留言板开发之 Ajax异步提交](https://1200zi.500zi.com/uploadfile/img/14/615/49e4f732437056f542978cf5ddb6a026.jpg)
后端开发|PHP7
PHP7,留言板开发,Ajax异步提交
后端开发-PHP7
微信分销源码下载 php,vscode突然没有代码了,ubuntu 怎么拷贝,tomcat 分隔日志,爬虫伪元素,php第三方登录原理,seo第十五节讲解视频,手机端学校网站模板下载不了lzw
PHP7教学介绍关于留言板开发的Ajax异步提交
易语言字体设置源码,vscode没有只能感知,ubuntu打开监听,win下tomcat设置,爬虫赚钱秘籍,php技术路线,沈阳seo排名优化方式,网站响应式后台,帝国cms模板门户lzw
推荐(免费):php7教学,ajax教学
云划算 试客 源码,ubuntu生物信息实验,企查查爬虫失败,php extend,seo站长新秀lzw
前言
在前面课程讲过js验证,课件代码是在老友记之PHP7留言板开发(JS验证)基础上改动,只需加入ajax异步操作部分即可轻松完成。
需要注意的是,这里不再详细讲解什么是XMLHttpRequest对象,为什么要用它等等,相信你再能运用的情况下再去深入了解它会印象更加深刻,这里就尽可能的少一些文字类的应试教学并能达到学会效果。
打开编辑器开始动手吧!
Ajax异步的核心部分讲解
// 第一步 创建 XMLHttpRequest 对象,为了更容易理解,变量就用ajaxvar ajax = new XMLHttpRequest();// 第二步 初始化一个Ajax请求,url参数是远程请求地址ajax.phpajax.open(POST, url, true); // 这里用到post提交留言,所以用post方式提交给服务器// ajax.open(GET, url, true); // get方式请求服务器// 第三步 发送请求;如果该请求是异步模式(默认),该方法会立刻返回。ajax.send(inputdata);// 第四步 发送请求总该要知道有没收到吧,这里就需要用到Ajax的事件监听器onreadystatechange ajax.onreadystatechange = function(){ // 这里判断服务器是否有数据响应,如果有则做些你要处理的逻辑,比如提示用户操作成功}
好了就到这里,下面是完整代码。
HTML+JS页面代码
留言板_科科分享function checkform(){var nickname = document.getElementsByTagName(input)[0].value; // 获取用户输入的姓名var tel = document.getElementsByTagName(input)[1].value; // 获取用户输入的联系方式var content = document.getElementsByTagName( extarea)[0].value; // 获取用户输入的留言内容// 如果没有输入姓名 则提示if(nickname == \){ alert(请输入您的姓名); document.getElementsByTagName(input)[0].focus(); // 将光标定位到姓名输入框 return false; // 阻止冒泡 输入姓名后才能通过}// 如果没有输入联系方式 则提示if(tel == \){ alert(请输入您的联系方式); document.getElementsByTagName(input)[1].focus(); // 将光标定位到联系方式输入框 return false; // 阻止冒泡 输入联系方式才能通过}// 如果没有输入留言内容 则提示if(content == \){ alert(请输入您的联系方式); document.getElementsByTagName( extarea)[0].focus(); // 将光标定位到留言内容输入框 return false; // 阻止冒泡 输入留言内容才能通过}// js已经拿到了用户提交的数据,那接下来就是AJAX(页面无刷新提交数据到服务器-异步通信)// 异步请求 startvar ajax, url, inputdata;// 创建 XMLHttpRequest 对象if(window.XMLHttpRequest){ ajax = new XMLHttpRequest();}else{ // 兼容Internet Explorer(IE5 和 IE6)使用 ActiveX 对象 ajax = new ActiveXObject("Microsoft.XMLHTTP");}url = ajax.php;ajax.open(POST, url, true);ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded;"); // 用POST的时候一定要有这句inputdata =
ickname=+nickname+&tel=+tel+&content=+content;ajax.send(inputdata);// 接收服务器返回的数据ajax.onreadystatechange = function(){ // 获取服务器响应状态码 if(ajax.readyState == 4 && ajax.status==200){ // 获取服务器返回的响应返回的数据 var retdata = ajax.responseText; if(retdata == 1){ alert(留言信息已提交成功!感谢您的宝贵意见。); } }}// 异步请求 endreturn false; // 这里是为了方式submit点击后表单自动提交// document.feedback_form.submit(); // 提交用户数据到后端action中的地址 }
留言板
FEEDBACK
PHP代码(ajax.php)
0){ // 如果入库成功,这里可以处理其他想要的逻辑 echo 1; exit; // 退出程序,使其不再往下执行代码}// 这是错误的时候返回0echo 0;exit;
记得动手练习哦!欢迎下面评论区涂鸦!~