Ajax php,页面无刷新提交表单

最新推荐文章于 2021-08-05 17:52:04 发布

原创最新推荐文章于 2021-08-05 17:52:04 发布 · 524 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#php #ajax #javascript

JavaScript 同时被 3 个专栏收录

140 篇文章

订阅专栏

PHP

130 篇文章

订阅专栏

Ajax

23 篇文章

订阅专栏

本文介绍两种使用JavaScript实现表单无刷新提交的方法：一种是传统方式收集表单数据并使用AJAX提交；另一种是利用HTML5的FormData API简化数据收集过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

05-reg.html（传统方式收集表单数据）:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>新建网页</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />

        <script type="text/javascript">
        window.onload= function(){
            var fm = document.getElementsByTagName('form')[0];
            fm.onsubmit = function(event){
                //① 收集全部的表单域信息
                var nm = document.getElementById('username').value;
                var pw = document.getElementById('userpwd').value;
                var em = document.getElementById('useremail').value;
                var info = "name="+nm+"&pwd="+pw+"&email="+em;
                //② 利用ajax无刷新方式提交表单信息到服务器
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function(){
                    if(xhr.readyState==4){
                        alert(xhr.responseText);
                    }
                }
                xhr.open('post','./05.php');
                xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");  //post方式请求要加该请求头。
                xhr.send(info);

                event.preventDefault();//通过事件对象阻止浏览器默认动作
                //return false;//阻止浏览器form表单的提交动作
            }
        }
        </script>
    </head>
    <body>
        <h2>无刷新方式form表单提交实现</h2>
        <!--form表单的提交会使得浏览器页面跳转，是浏览器默认动作-->
        <form method="post" action="./05.php">
            <p>用户名：<input type="text" id="username" name="mingzi" /></p>
            <p>密码：<input type="password" id="userpwd" name="mima" /></p>
            <p>邮箱：<input type="text" id="useremail" name="youxiang" /></p>
            <p><input type="submit" value="注册" /></p>
        </form>
    </body>
</html>

055-reg.html（利用FormData收集表单数据）:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>新建网页</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />

        <script type="text/javascript">
        window.onload= function(){
            var fm = document.getElementsByTagName('form')[0];
            fm.onsubmit = function(event){
                //① 收集全部的表单域信息
                //   利用FormData收集表单信息
                //   this关键字：代表事件元素节点对象本身
                var fd = new FormData(this);  //this就是fm。this可以换成fm。FormData是HTML5的新技术，用于收集表单数据(需要name属性值)。

                //② 利用ajax无刷新方式提交表单信息到服务器
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function(){
                    if(xhr.readyState==4){
                        alert(xhr.responseText);
                    }
                }
                xhr.open('post','./05.php');
                //xhr.setRequestHeader("content-type","application/x-www-form-urlencoded"); //FormData不需要设置该请求头
                xhr.send(fd);  //FormData当做参数发送到服务端。

                event.preventDefault();//通过事件对象阻止浏览器默认动作
                //return false;//阻止浏览器form表单的提交动作
            }
        }
        </script>
    </head>
    <body>
        <h2>无刷新方式form表单提交实现(FormData优化表单信息收集)</h2>

        <form method="post" action="./05.php">
            <p>用户名：<input type="text" id="username" name="mingzi" /></p>
            <p>密码：<input type="password" id="userpwd" name="mima" /></p>
            <p>邮箱：<input type="text" id="useremail" name="youxiang" /></p>
            <p><input type="submit" value="注册" /></p>
        </form>
    </body>
</html>

05.php（后端服务器）:

<?php

print_r($_POST);
//解析表单信息，连接数据库，拼装insert语句.......