提交方式表单

几种HTML表单提交方式介绍

编程开发 2020-10-09 07:08:41 35

导读

1、最基本的表单提交。<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>表单提交示例 - 基本表单提交</title> </head> <body> <form action="/server_url……

1、最基本的表单提交。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>表单提交示例 - 基本表单提交</title>
</head>
<body>
<form action="/server_url" method="post" onsubmit="return beforeSubmit()">
    ID:<input id="username" type="text" name="username" />
    Password:<input id="password" type="password" name="password" />
    <input type="submit" value="Submit" />
</form>
<script type="text/JavaScript">
    function beforeSubmit() {
        var username = document.getElementById('username').value;
        var password = document.getElementById('password').value;
        if (username.length < 6 || password.length < 6) {
            alert('格式不正确!');
            return false;
        } else {
            return true;
        }
    }
</script>
</body>
</html>

上面的代码非常简单,注意from表单中的onsubmit属性一定要有return,否则是没有效果的。onsubmit属性是可选的,如果需要js对表单做一些简单的验证,那么可以使用这种方式来做,js如果验证不通过则返回false,那么表单是不会提交的。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单提交示例 - 基本表单提交2</title>
</head>
<body>
<form id="form_login" action="/server_url" method="post">
    ID:<input id="username" type="text" name="username" />
    Password:<input id="password" type="password" name="password" />
</form>
<button id="btn-submit" onclick="beforeSubmit()">Submit</button>
<script type="text/javascript">
    var loginForm = document.getElementById('form_login');
    function beforeSubmit() {
        var username = document.getElementById('username').value;
        var password = document.getElementById('password').value;
        if (username.length < 6 || password.length < 6) {
            alert('格式不正确!');
        } else {
            loginForm.submit();
        }
    }
</script>
</body>
</html>

上面稍微做了一点点修改,form元素增加了id,去掉了onsubmit,还有一个type为submit的input按钮也去掉了,取而代之的是在from的外面增加了一个普通按钮。

这个按钮点击会触发一段js,在这个js中可以做数据校验,如果验证通过,则通过js提交表单,form表单增加id的作用就是为了js获取表单元素变的方便。

以上两种方式都是最基本的提交表单的方式,实际工作中可以随意选择。

2、FormData表单提交。

下面,我们来看通过HTML5的FormData来提交表单,这种表单的提交方式是异步的,浏览器的地址是不会发生变化的。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单提交示例 - FormData</title>
</head>
<body>
<form name="login_form" action="/server_url" method="post">
    ID:<input id="username" type="text" name="username" />
    Password:<input id="password" type="password" name="password" />
</form>
<button id="btn-submit" onclick="beforeSubmit()">Submit</button>
<script type="text/javascript">
    function beforeSubmit() {
        var username = document.getElementById('username').value;
        var password = document.getElementById('password').value;
        if (username.length < 6 || password.length < 6) {
            alert('格式不正确!');
            return;
        }
        
        // 1.创建一个FormData对象,直接把我们的表单传进去  
        var formData = new FormData(document.forms.namedItem("login_form"));
        
        // 2.创建一个http请求对象
        var xmlHttpRequest = new XMLHttpRequest();
        
        xmlHttpRequest.open('post', '/server_url');
        xmlHttpRequest.onload = function(resp) {
            if (xmlHttpRequest.status == 200) {
                alert('提交成功!');
            } else {
                alert('Error:' + xmlHttpRequest.status);
            }
        };
        xmlHttpRequest.send(formData);
    }
</script>
</body>
</html>

这种方式提交相对前面的两种来说,异步是最大的不同,这样带来的一个好处就是异步上传文件就很爽了。表单中添加一个type为file的input元素,文件就直接可以上传了,非常方便。

3、使用jquery发送FormData表单。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单提交示例 - JQuery发送FormData</title>
</head>
<body>
<form name="login_form" action="/server_url" method="post">
    ID:<input id="username" type="text" name="username" />
    Password:<input id="password" type="password" name="password" />
</form>
<button id="btn-submit" onclick="beforeSubmit()">Submit</button>

<script type="text/javascript" src="/res/lib/jquery-1.11.3.js"></script>
<script type="text/javascript">
    function beforeSubmit() {
        var username = document.getElementById('username').value;
        var password = document.getElementById('password').value;
        if (username.length < 6 || password.length < 6) {
            alert('格式不正确!');
            return;
        }
        
        // 1.创建一个FormData对象,直接把我们的表单传进去  
        var formData = new FormData(document.forms.namedItem("login_form"));
        
        // 2.通过jquery发送出去
        $.ajax({
            url: "/server_url.PHP",
            type: "POST",
            data: formData,
            processData: false,  
            // 告诉jQuery不要去处理发送的数据
            contentType: false   
            // 告诉jQuery不要去设置Content-Type请求头
        }).done(function(resp) {
            alert('success!');
        }).fail(function(err) {
            alert('fail!')
        });
        
    }
</script>
</body>
</html>

4、直接发送二进制文件数据。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>http请求发送二进制文件</title>
</head>
<body>
<input id="avatar" type="file" name="avatar" />
<button id="btn-submit" onclick="beforeSubmit()">Submit</button>
<script type="text/javascript" src="/res/lib/jquery-1.11.3.js"></script>
<script type="text/javascript">
    function beforeSubmit() {
        var avatar = document.getElementById('avatar').files[0];
        if (typeof avatar === 'undefined') {
            alert('请选择一个图片!');
            return;
        }
        var reader = new FileReader();
        // reader.readAsDataURL(avatar);
         // 读取的是图片的base64字符串,可以直接设置给图片的src属性
        // reader.readAsBinaryString(avatar); 
        // 读取的是图片的二进制数据
        // reader.readAsText(avatar); 
        // 以字符串读取文件内容,一般用于读取字符文件
        reader.readAsArrayBuffer(avatar);
        reader.onload = function() {
            var data = this.result;

            // 原生http请求发送二进制文件
            var xmlHttpRequest = new XMLHttpRequest();
            xmlHttpRequest.open('post', '/server_url.php');
            xmlHttpRequest.onload = function() {
                if (xmlHttpRequest.status == 200) {
                    alert('success!');
                } else {
                    alert('Error:' + xmlHttpRequest.status);
                }
            };
            xmlHttpRequest.send(data);

            // 用jquery发送二进制文件
            $.ajax({
                url: "/server_url.php",
                type: "POST",
                data: data,
                processData: false,  
                // 告诉jQuery不要去处理发送的数据
                contentType: false  
                 // 告诉jQuery不要去设置Content-Type请求头
            }).done(function(resp) {
                alert('success!');
            }).fail(function(err) {
                alert('fail!')
            });
        };        
    }
</script>
</body>
</html>

服务器接收:

<?php
$fp = fopen('avatar.png', 'wb');
$size = fwrite($fp, file_get_contents('php://input'));
print 'success';

以流的方式接收二进制数据。


1253067 TFnetwork_cn