HTML formフォーム提出まとめ
23370 ワード
HTML Formフォーム提出概要
一、最も基本的なフォームの提出.のコードは非常に簡単です.fromフォームのonsubmitプロパティにはreturnが必要です.そうしないと効果がありません. onsubmitプロパティはオプションで、jsがフォームを簡単に検証する必要がある場合は、jsが検証に失敗した場合falseに戻ると、フォームはコミットされません. の上で少し修正して、form要素にidを追加して、onsubmitを削除して、もう一つのtypeがsubmitのinputボタンも削除して、代わりにfromの外に普通のボタンを追加しました. このボタンをクリックするとjsがトリガーされ、このjsではデータ検証が可能になります.検証が通過した場合、jsを通じてフォームを提出し、formフォームにidを追加する役割はjsがフォーム要素を取得するために便利になります.
以上の2つの方法はいずれも最も基本的なフォームの提出方法であり、実際の仕事では勝手に選択することができます.
二、FormDataフォームの提出.
次に、
この方式の提出は前の2つに比べて
三、jqueryを使用してFormDataフォームを送信する
四、直接バイナリファイルデータを送信する
サーバ受信:
HTML5の勃興に伴い、フロントエンドはますます多様化しています.例えば、フォームの提出など、今ではいろいろな方法が選択できます.次に、一般的なフォームの提出方法をまとめます.一、最も基本的なフォームの提出.
<html>
<head>
<meta charset="UTF-8">
<title> - title>
head>
<body>
<form action="/server_url" method="post" onsubmit="return beforeSubmit()">
：<input id="username" type="text" name="username" />
：<input id="password" type="password" name="password" />
<input type="submit" value=" " />
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>
<html>
<head>
<meta charset="UTF-8">
<title> - 2title>
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()">Submitbutton>
<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>以上の2つの方法はいずれも最も基本的なフォームの提出方法であり、実際の仕事では勝手に選択することができます.
二、FormDataフォームの提出.
次に、
HTML5 FormData によって、このフォームの提出方式は であり、ブラウザのアドレスは変化しないことを見てみましょう.
<html>
<head>
<meta charset="UTF-8">
<title> - FormDatatitle>
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()">Submitbutton>
<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>この方式の提出は前の2つに比べて
であり、このようなメリットの1つは が爽やかであることである.フォームにtypeがfileのinput要素を追加すると、ファイルが直接アップロードされ、便利です.三、jqueryを使用してFormDataフォームを送信する
<html>
<head>
<meta charset="UTF-8">
<title> - JQuery FormDatatitle>
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()">Submitbutton>
<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>四、直接バイナリファイルデータを送信する
<html>
<head>
<meta charset="UTF-8">
<title>http title>
head>
<body>
<input id="avatar" type="file" name="avatar" />
<button id="btn-submit" onclick="beforeSubmit()">Submitbutton>
<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>サーバ受信:
$fp = fopen('avatar.png', 'wb');
$size = fwrite($fp, file_get_contents('php://input'));
print 'success';
?> で.完了!