Ajax实现无刷新表单提交

最新推荐文章于 2021-04-14 18:38:29 发布

Yeoman92

最新推荐文章于 2021-04-14 18:38:29 发布

阅读量1.5k

点赞数

分类专栏： web前端文章标签： ajax 无刷新表单提交 FormData

本文链接：https://blog.csdn.net/yeoman92/article/details/53174199

版权

web前端专栏收录该内容

46 篇文章 0 订阅

订阅专栏

一般方式实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8">
        <title></title>
        <script language = "javascript">
            function f1(){
                //创建xmlHttp对象
                var xmlHttp;
                if(window.ActiveXObject){
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                else if(window.XMLHttpRequest){
                    xmlHttp = new XMLHttpRequest();
                }

                //获取表单值
                var username = document.form1.username.value;
                var password = document.form1.password.value;
                var email = document.form1.email.value;
                var datastr = "username=" + username + "&password=" + password + "&email=" + email;
                var url = "./004.php";

                xmlHttp.onreadystatechange = function(){
                    if(xmlHttp.readyState == 4){
                        alert(xmlHttp.responseText);
                    }
                }

                //提交数据
                xmlHttp.open("POST",url,false);
                xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xmlHttp.send(datastr);
                document.getElementById("p1").innerHTML = "表单已提交";
            }
        </script>
    </head>
    <body>
        <h2>Ajax无刷新提交表单</h2>
        <p id="p1"></p>
        <form name="form1">
            <p>用户名：<input type = "text" name = "username" /></p>
            <p>密码：<input type = "password" name = "password" /></p>
            <p>邮箱：<input type = "text" name = "email" /></p>
            <p><input type = "button" value = "提交" name = "Submit" onclick = "f1()"/></p>
        </form>
    </body>
</html>

服务端页面 004.php

//004.php
<?php
//收集form表单传递过来的post信息
print_r($_POST);

运行效果
这里写图片描述

　　2.利用FormData表单数据对象，可以实现快速收集表单信息。FormData是html5的新技术，在主流浏览器中都可以正常使用。

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8">
        <title></title>
        <script language = "javascript">
            function f1(){
                //创建xmlHttp对象
                var xmlHttp;
                if(window.ActiveXObject){
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                else if(window.XMLHttpRequest){
                    xmlHttp = new XMLHttpRequest();
                }

                //获取表单值
                //利用FormData表单数据对象，快速收集表单信息
                var form = document.form1;
                var fd = new FormData(form);//收集fm的表单信息

                //提交数据
                xmlHttp.open("POST","./004.php",false);
                xmlHttp.send(fd);
            }
        </script>
    </head>
    <body>
        <h2>Ajax无刷新提交表单</h2>
        <form name="form1">
            <p>用户名：<input type = "text" name = "username" /></p>
            <p>密码：<input type = "password" name = "password" /></p>
            <p>邮箱：<input type = "text" name = "email" /></p>
            <p><input type = "button" value = "提交" name = "Submit" onclick = "f1()"/></p>
        </form>
    </body>
</html>