首页-教程-开发语言

PHP7留言板开发之 Ajax异步提交

 4559

PHP7留言板开发之 Ajax异步提交


前言

这节教程算是这个专辑的重中之重吧。随着前端技术的不断迭代更新，网站很多功能的实现都转移到前端去实现，2018年第一季度编程语言排名来看，JavaScript仍然是最受欢迎的编程语言。所以想要深入学习js，那么Ajax是必不可少的。

Ajax异步的核心部分讲解

  1. // 第一步 创建 XMLHttpRequest 对象，为了更容易理解，变量就用ajax
  2. var ajax = new XMLHttpRequest();
  3. // 第二步 初始化一个Ajax请求，url参数是远程请求地址ajax.php
  4. ajax.open('POST', url, true); // 这里用到post提交留言，所以用post方式提交给服务器
  5. // ajax.open('GET', url, true); // get方式请求服务器
  6. // 第三步 发送请求；如果该请求是异步模式(默认)，该方法会立刻返回。
  7. ajax.send(inputdata);
  8. // 第四步 发送请求总该要知道有没收到吧，这里就需要用到Ajax的事件监听器onreadystatechange 
  9. ajax.onreadystatechange = function(){
  10.     // 这里判断服务器是否有数据响应，如果有则做些你要处理的逻辑，比如提示用户操作成功
  11. }

上面四步骤还理解不了的话，可以认为是第一步找个朋友A发邮件，第二步给这位A朋友写信件内容并封装写上地址贴邮票，第三步投递邮件，过了一阵（当然网络通的情况下立即有响应的），第四步收到A朋友的回信了，很开心。接下来就可以根据回信内容做事啦，比如见（网）面（约）...

好了就到这里，下面是完整代码。

HTML+JS页面代码

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.         <title>留言板_科科分享</title>
  6.         <!-- 2.新建css样式文件并根据效果图编写css代码 -->
  7.         <link rel="stylesheet" href="feedback.css">
  8.         <!-- 3.js表单验证 -->
  9.         <script type="text/javascript">
  10.             function checkform(){
  11.                 var nickname = document.getElementsByTagName('input')[0].value; // 获取用户输入的姓名
  12.                 var tel = document.getElementsByTagName('input')[1].value; // 获取用户输入的联系方式
  13.                 var content = document.getElementsByTagName('textarea')[0].value; // 获取用户输入的留言内容
  14.                 // 如果没有输入姓名 则提示
  15.                 if(nickname == ''){
  16.                     alert('请输入您的姓名');
  17.                     document.getElementsByTagName('input')[0].focus(); // 将光标定位到姓名输入框
  18.                     return false; // 阻止冒泡 输入姓名后才能通过
  19.                 }
  20.                 // 如果没有输入联系方式 则提示
  21.                 if(tel == ''){
  22.                     alert('请输入您的联系方式');
  23.                     document.getElementsByTagName('input')[1].focus(); // 将光标定位到联系方式输入框
  24.                     return false;  // 阻止冒泡 输入联系方式才能通过
  25.                 }
  26.                 // 如果没有输入留言内容 则提示
  27.                 if(content == ''){
  28.                     alert('请输入您的联系方式');
  29.                     document.getElementsByTagName('textarea')[0].focus(); // 将光标定位到留言内容输入框
  30.                     return false;  // 阻止冒泡 输入留言内容才能通过
  31.                 }
  32.                 // js已经拿到了用户提交的数据，那接下来就是AJAX（页面无刷新提交数据到服务器-异步通信）
  33.                 // 异步请求 start
  34.                 var ajax, url, inputdata;
  35.                 // 创建 XMLHttpRequest 对象
  36.                 if(window.XMLHttpRequest){
  37.                     ajax = new XMLHttpRequest();
  38.                 }else{
  39.                     // 兼容Internet Explorer（IE5 和 IE6）使用 ActiveX 对象
  40.                     ajax = new ActiveXObject("Microsoft.XMLHTTP");
  41.                 }
  42.                 url = 'ajax.php';
  43.                 ajax.open('POST', url, true);
  44.                 ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");  // 用POST的时候一定要有这句
  45.                 inputdata = 'nickname='+nickname+'&tel='+tel+'&content='+content;
  46.                 ajax.send(inputdata);
  47.                 // 接收服务器返回的数据
  48.                 ajax.onreadystatechange = function(){
  49.                     // 获取服务器响应状态码
  50.                     if(ajax.readyState == 4 && ajax.status==200){
  51.                         // 获取服务器返回的响应返回的数据
  52.                         var retdata = ajax.responseText;
  53.                         if(retdata == 1){
  54.                             alert('留言信息已提交成功！感谢您的宝贵意见。');
  55.                         }
  56.                     }
  57.                 }
  58.                 // 异步请求 end
  59.                 return false; // 这里是为了方式submit点击后表单自动提交
  60.                 // document.feedback_form.submit(); // 提交用户数据到后端action中的地址
  61.             }
  62.         </script>
  63.     </head>
  64.     <body>
  65.         <!-- 工作区，呈现给用户看的 -->
  66.         <!-- 1.开始搭建脚手架 -->
  67.         <p class="container_box">
  68.             <p class="up">
  69.                 <h3 class="title">留言板</h3>
  70.                 <h5 class="subtitle">FEEDBACK</h5>
  71.             </p>
  72.             <p class="down">
  73.                 <form name="feedback_form" action="/#" method="post" onsubmit="return false;">
  74.                     <p class="input">
  75.                         <input type="text" class="fl" name="name" placeholder="输入您的姓名" /> 
  76.                         <input type="text" class="fr" name="tel" placeholder="输入您的联系方式" />
  77.                     </p>
  78.                     <textarea class="content" cols="30" rows="10" name="nr"></textarea>
  79.                     <input type="submit" onclick="checkform()" value="提交您的留言" class="sub" />
  80.                 </form>
  81.             </p>
  82.         </p>
  83.     </body>
  84. </html>
PHP代码（ajax.php）
  1. <?php
  2. include 'config.php';
  3. // POST接收用户提交的数据
  4. $nickname = !empty($_POST['nickname'])? addslashes(strip_tags($_POST['nickname'])):''; // 留言人名称
  5. $tel = !empty($_POST['tel'])?addslashes(strip_tags($_POST['tel'])):''; // 留言人的联系方式
  6. $content = !empty($_POST['content'])?addslashes(strip_tags($_POST['content'])):''; // 留言内容
  7. $time = time(); // 当前系统时间，即用户留言时间
  8. // 插入mysql语句
  9. $sql = "INSERT INTO feedback (name, contact, content, addtime) VALUES ('{$nickname}', '{$tel}', '{$content}', '{$time}')";
  10. // 立即执行mysql语句
  11. $result = mysqli_query($mysqli, $sql); // 返回一个资源标识符，通常是数字
  12. $insert_id = mysqli_insert_id($mysqli); // 返回数据表的自增长ID，比如新用户注册返回用户ID
  13. // echo $insert_id; // 当你在调试的时候，你会发现echo是很好的帮手。
  14. if($insert_id > 0){
  15.     // 如果入库成功，这里可以处理其他想要的逻辑
  16.     echo 1;
  17.     exit;  // 退出程序，使其不再往下执行代码
  18. }
  19. // 这是错误的时候返回0
  20. echo 0;
  21. exit;

记得动手练习哦！欢迎下面评论区涂鸦！~


TAG标签：
本文网址：https://www.zztuku.com/index.php/detail-8601.html
站长图库 - PHP7留言板开发之 Ajax异步提交
申明：如有侵犯，请 联系我们 删除。

评论（0）条

您还没有登录，请 登录 后发表评论！

提示：请勿发布广告垃圾评论，否则封号处理！！

    编辑推荐