PHP7留言板开发之 Ajax异步提交-PHP7-PHP中文网

首页

后端开发

PHP7

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

coldplay.xixi

Dec 18, 2020 am 09:10 AM

ajax异步提交php7

PHP7教程介绍关于留言板开发的Ajax异步提交

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

推荐（免费）：php7教程，ajax教程

前言

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

在前面课程讲过js验证，课件代码是在老友记之PHP7留言板开发（JS验证）基础上改动，只需加入ajax异步操作部分即可轻松完成。

需要注意的是，这里不再详细讲解什么是XMLHttpRequest对象，为什么要用它等等，相信你再能运用的情况下再去深入了解它会印象更加深刻，这里就尽可能的少一些文字类的应试教学并能达到学会效果。

打开编辑器开始动手吧！

Ajax异步的核心部分讲解

// 第一步 创建 XMLHttpRequest 对象，为了更容易理解，变量就用ajax
var ajax = new XMLHttpRequest();

// 第二步 初始化一个Ajax请求，url参数是远程请求地址ajax.php
ajax.open('POST', url, true); // 这里用到post提交留言，所以用post方式提交给服务器
// ajax.open('GET', url, true); // get方式请求服务器

// 第三步 发送请求；如果该请求是异步模式(默认)，该方法会立刻返回。
ajax.send(inputdata);

// 第四步 发送请求总该要知道有没收到吧，这里就需要用到Ajax的事件监听器onreadystatechange 
ajax.onreadystatechange = function(){
    // 这里判断服务器是否有数据响应，如果有则做些你要处理的逻辑，比如提示用户操作成功
}

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

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

HTML+JS页面代码

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>留言板_科科分享</title>
        <!-- 2.新建css样式文件并根据效果图编写css代码 -->
        <link rel="stylesheet" href="feedback.css">
        <!-- 3.js表单验证 -->
        <script type="text/javascript">
            function checkform(){
                var nickname = document.getElementsByTagName('input')[0].value; // 获取用户输入的姓名
                var tel = document.getElementsByTagName('input')[1].value; // 获取用户输入的联系方式
                var content = document.getElementsByTagName('textarea')[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('textarea')[0].focus(); // 将光标定位到留言内容输入框
                    return false;  // 阻止冒泡 输入留言内容才能通过
                }
                
                // js已经拿到了用户提交的数据，那接下来就是AJAX（页面无刷新提交数据到服务器-异步通信）
                // 异步请求 start
                var 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 = 'nickname='+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('留言信息已提交成功！感谢您的宝贵意见。');
                        }
                    }
                }
                // 异步请求 end
                return false; // 这里是为了方式submit点击后表单自动提交
                // document.feedback_form.submit(); // 提交用户数据到后端action中的地址
            }
        </script>
    </head>
    <body>
        <!-- 工作区，呈现给用户看的 -->
        <!-- 1.开始搭建脚手架 -->
        <p class="container_box">
            <p class="up">
                <h3 class="title">留言板</h3>
                <h5 class="subtitle">FEEDBACK</h5>
            </p>
            <p class="down">
                <form name="feedback_form" action="/#" method="post" onsubmit="return false;">
                    <p class="input">
                        <input type="text" class="fl" name="name" placeholder="输入您的姓名" /> 
                        <input type="text" class="fr" name="tel" placeholder="输入您的联系方式" />
                    </p>
                    <textarea class="content" cols="30" rows="10" name="nr"></textarea>
                    <input type="submit" onclick="checkform()" value="提交您的留言" class="sub" />
                </form>
            </p>
        </p>
    </body>
</html>

PHP代码（ajax.php）

<?php
include &#39;config.php&#39;;

// POST接收用户提交的数据
$nickname = !empty($_POST[&#39;nickname&#39;])? addslashes(strip_tags($_POST[&#39;nickname&#39;])):&#39;&#39;; // 留言人名称
$tel = !empty($_POST[&#39;tel&#39;])?addslashes(strip_tags($_POST[&#39;tel&#39;])):&#39;&#39;; // 留言人的联系方式
$content = !empty($_POST[&#39;content&#39;])?addslashes(strip_tags($_POST[&#39;content&#39;])):&#39;&#39;; // 留言内容
$time = time(); // 当前系统时间，即用户留言时间

// 插入mysql语句
$sql = "INSERT INTO feedback (name, contact, content, addtime) VALUES (&#39;{$nickname}&#39;, &#39;{$tel}&#39;, &#39;{$content}&#39;, &#39;{$time}&#39;)";

// 立即执行mysql语句
$result = mysqli_query($mysqli, $sql); // 返回一个资源标识符，通常是数字
$insert_id = mysqli_insert_id($mysqli); // 返回数据表的自增长ID，比如新用户注册返回用户ID
// echo $insert_id; // 当你在调试的时候，你会发现echo是很好的帮手。
if($insert_id > 0){
    // 如果入库成功，这里可以处理其他想要的逻辑
    echo 1;
    exit;  // 退出程序，使其不再往下执行代码
}
// 这是错误的时候返回0
echo 0;
exit;

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

以上是PHP7留言板开发之 Ajax异步提交的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：简书。如有侵权，请联系admin@php.cn删除

php7检测tcp端口不好用怎么解决Mar 22, 2023 am 09:30 AM

在php5中，我们可以使用fsockopen()函数来检测TCP端口。这个函数可以用来打开一个网络连接和进行一些网络通信。但是在php7中，fsockopen()函数可能会遇到一些问题，例如无法打开端口、无法连接到服务器等。为了解决这个问题，我们可以使用socket_create()函数和socket_connect()函数来检测TCP端口。

php7.0怎么安装mongo扩展Nov 21, 2022 am 10:25 AM

php7.0安装mongo扩展的方法：1、创建mongodb用户组和用户；2、下载mongodb源码包，并将源码包放到“/usr/local/src/”目录下；3、进入“src/”目录；4、解压源码包；5、创建mongodb文件目录；6、将文件复制到“mongodb/”目录；7、创建mongodb配置文件并修改配置即可。

php7.0安装了插件还是显示未安装怎么办Apr 02, 2024 pm 07:39 PM

解决 PHP 7.0 中插件未显示已安装问题的方法：检查插件配置并启用插件。重新启动 PHP 以应用配置更改。检查插件文件权限，确保其正确。安装丢失的依赖项，以确保插件正常运行。如果其他步骤均失败，则重建 PHP。其他可能原因包括插件版本不兼容、加载错误版本或 PHP 配置问题。

php7.0怎么安装部署Nov 30, 2022 am 09:56 AM

php7.0安装部署的方法：1、到PHP官网下载与本机系统对应的安装版本；2、将下载的zip文件解压到指定目录；3、打开命令行窗口，在“E:\php7”目录下运行“php -v”命令即可。

php8和php7哪个好Nov 16, 2023 pm 03:09 PM

PHP8相较于PHP7在性能、新特性和语法改进、类型系统、错误处理和扩展等方面都有一些优势和改进。然而，选择使用哪个版本要根据具体的需求和项目情况来决定。详细介绍：1、性能提升，PHP8引入了Just-in-Time(JIT)编译器，可以提高代码的执行速度；2、新特性和语法改进，PHP8支持命名参数和可选参数的声明，使得函数调用更加灵活;引入了匿名类、属性的类型声明等等。

PHP 服务器环境常见问题指南：快速解决常见难题Apr 09, 2024 pm 01:33 PM

PHP服务器环境常见的解决方法包括：确保已安装正确的PHP版本和已复制相关文件到模块目录。临时或永久禁用SELinux。检查并配置PHP.ini，确保已添加必要的扩展和进行正确设置。启动或重启PHP-FPM服务。检查DNS设置是否存在解析问题。

记录一次用strace诊断php占用系统资源过高的问题May 03, 2024 pm 04:31 PM

本地环境：redhat6.7系统。nginx1.12.1，php7.1.0，代码使用yii2框架问题：本地的web站需要用到elasticsearch服务。当php使用本地服务器搭建的elasticsearch时，本地的负载都是正常。当我使用aws的elasticsearchservice服务时，本地服务器出现负载经常过高的情况。查看nginx和php日志，发现没有异常。系统的并发连接数也不高。这时候想到我们老大给我讲的一个strace诊断工具。调试过程：查找一个php的子进程idstrace-