PHP7 메시지 보드 개발을 위한 Ajax 비동기 제출-PHP7-php.cn

머리말

Ajax 비동기 핵심 부분에 대한 설명

HTML+JS 페이지 코드

PHP 코드(ajax.php)

집

백엔드 개발

PHP7

PHP7 메시지 보드 개발을 위한 Ajax 비동기 제출

coldplay.xixi

Dec 18, 2020 am 09:10 AM

아약스 비동기 제출 php7

PHP7 Tutorial메시지 보드 개발 시 Ajax 비동기 제출 소개

PHP7 메시지 보드 개발을 위한 Ajax 비동기 제출

권장(무료): php7 Tutorial, ajax Tutorial

머리말

이 튜토리얼은 이 앨범 Bar의 가장 중요한 부분입니다. 프런트엔드 기술의 지속적인 반복 업데이트로 인해 웹사이트의 많은 기능 구현이 프런트엔드로 이전되었습니다. 2018년 1분기 프로그래밍 언어 순위에 따르면 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(){
    // 这里判断服务器是否有数据响应，如果有则做些你要处理的逻辑，比如提示用户操作成功
}

로그인 후 복사

위의 4단계를 아직도 이해하지 못한다면 이메일을 보낼 친구 A를 찾는 첫 번째 단계, 친구 A를 찾는 두 번째 단계라고 생각하시면 됩니다. 친구 A에게 편지 내용을 작성하고 주소로 캡슐화한 후 3단계에서 메일을 전달합니다. (물론 인터넷 연결이 가능하면 즉시 응답됩니다.) 네 번째 단계에서 친구 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으로 문의하세요.

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7523

Cakephp 튜토리얼

1378

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

php7에서 tcp 포트가 작동하지 않는 것을 감지했을 때 문제를 해결하는 방법 Mar 22, 2023 am 09:30 AM

php5에서는 fsockopen() 함수를 사용하여 TCP 포트를 감지할 수 있습니다. 이 기능은 네트워크 연결을 열고 일부 네트워크 통신을 수행하는 데 사용할 수 있습니다. 그러나 php7에서는 fsockopen() 함수에 포트를 열 수 없거나 서버에 연결할 수 없는 등의 몇 가지 문제가 발생할 수 있습니다. 이 문제를 해결하기 위해, 우리는 소켓_create() 함수와 소켓_연결() 함수를 사용하여 TCP 포트를 감지할 수 있습니다.

php7.0에 mongo 확장을 설치하는 방법 Nov 21, 2022 am 10:25 AM

php7.0에서 mongo 확장을 설치하는 방법: 1. mongodb 사용자 그룹 및 사용자를 생성합니다. 2. mongodb 소스 코드 패키지를 다운로드하고 소스 코드 패키지를 "/usr/local/src/" 디렉터리에 넣습니다. "src/" 디렉터리를 입력합니다. 4. 소스 코드 패키지의 압축을 풉니다. 5. mongodb 파일 디렉터리를 생성합니다. 6. "mongodb/" 디렉터리에 파일을 복사합니다. 7. mongodb 구성 파일을 생성하고 구성을 수정합니다.

php7.0에 플러그인이 설치되어 있는데 여전히 설치되지 않은 것으로 표시되면 어떻게 해야 합니까? Apr 02, 2024 pm 07:39 PM

PHP 7.0에서 설치된 플러그인이 표시되지 않는 문제를 해결하려면: 플러그인 구성을 확인하고 플러그인을 활성화하세요. 구성 변경 사항을 적용하려면 PHP를 다시 시작하세요. 플러그인 파일 권한이 올바른지 확인하세요. 플러그인이 올바르게 작동하도록 하려면 누락된 종속성을 설치하세요. 다른 모든 단계가 실패하면 PHP를 다시 빌드하세요. 다른 가능한 원인으로는 호환되지 않는 플러그인 버전, 잘못된 버전 로드 또는 PHP 구성 문제 등이 있습니다.

PHP 서버 환경 FAQ 가이드: 일반적인 문제를 신속하게 해결 Apr 09, 2024 pm 01:33 PM

PHP 서버 환경에 대한 일반적인 솔루션에는 올바른 PHP 버전이 설치되어 있는지, 관련 파일이 모듈 디렉터리에 복사되었는지 확인하는 것이 포함됩니다. SELinux를 일시적으로 또는 영구적으로 비활성화합니다. 필요한 확장이 추가되고 올바르게 설정되었는지 확인하려면 PHP.ini를 확인하고 구성하십시오. PHP-FPM 서비스를 시작하거나 다시 시작합니다. 해결 문제에 대해서는 DNS 설정을 확인하세요.

php7.0을 설치하고 배포하는 방법 Nov 30, 2022 am 09:56 AM

php7.0 설치 및 배포 방법: 1. PHP 공식 웹사이트로 이동하여 로컬 시스템에 해당하는 설치 버전을 다운로드합니다. 2. 다운로드한 zip 파일을 지정된 디렉터리에 추출합니다. 3. 명령줄 창을 열고 다음으로 이동합니다. "E:\php7" 디렉토리 "php -v" 명령을 실행하세요.

시스템 재시작 후 UnixSocket의 권한을 자동으로 설정하는 방법은 무엇입니까? Mar 31, 2025 pm 11:54 PM

시스템이 다시 시작된 후 UnixSocket의 권한을 자동으로 설정하는 방법. 시스템이 다시 시작될 때마다 UnixSocket의 권한을 수정하려면 다음 명령을 실행해야합니다.

php8과 php7 중 어느 것이 더 낫나요? Nov 16, 2023 pm 03:09 PM

PHP7과 비교하여 PHP8은 성능, 새로운 기능 및 구문 개선, 유형 시스템, 오류 처리 및 확장 측면에서 몇 가지 장점과 개선 사항을 가지고 있습니다. 그러나 사용할 버전을 선택하는 것은 특정 요구 사항과 프로젝트 상황에 따라 다릅니다. 자세한 소개: 1. 성능 향상, PHP8은 코드 실행 속도를 향상시킬 수 있는 JIT(Just-in-Time) 컴파일러를 도입합니다. 2. 새로운 기능 및 구문 개선, PHP8은 명명된 매개 변수 및 선택적 매개 변수 선언을 지원합니다. 함수 만들기 호출이 더 유연해졌습니다. 익명 클래스, 속성 유형 선언 등이 도입되었습니다.