勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

ajaxを使わずに非同期っぽくsubmitする

      2014/05/19

ajaxを使わずに見た目はページ遷移せず、
画像を含めたformをsubmitしているソースがあり、
なるほどと思ったのでメモ。

■index.php(formを置いているところ)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transtional//EN" "http://www.w3c.org/TR/html4/loose.dtd">
<meta http-equiv="content-type" content="text/html"/>
<meta cherset = "UTF-8">
<html lang="ja">
<head>
<title>index</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
$(document).on('click', '#submitBtn', function(){
if ($('#name').val() != '') {
$('#postForm').submit();
}
});
});
</script>
</head>
<body>
<h1>index</h1>
<form action="receive.php" target="submitTarget" method="post" name="postForm" id="postForm">
<input type="text" name="name" id="name">
<input type="button" value="submit" id="submitBtn">
</form>
<iframe scr="iframe.php" width="1" height="1" id="submitTarget" name="submitTarget" style="opacity:0;"></iframe>
</body>
</html>

■iframe.php
<!--ソースは空でOK-->

■recieve.php
<?php
$mysqli = new mysqli($dbhost, $dbuser, $dbpass, $dbname);
$mysqli->set_charset('utf8');

if ($_POST['name']) {
$sql = '
INSERT INTO form
(name)
VALUES
("'. $mysqli->real_escape_string($_POST['name']) .'")
';
$row = $mysqli->query($sql);
echo (!$row) ? 'false' : 'true';
}
?>

■その他
formをiframe対して投げているっぽい。
結果のtrue or falseについてはiframeのbody内に
表示されるから、

$('#submitTarget').contents().find('body').html('');

とかで取って処理の分岐が行える。

 - HTML, 画像

  関連記事

other
faviconの取得と生成

AというサイトのfaviconをBというサイトで使いたかった。 ただ、favic ...

images
PHPで画像のサイズや拡張子等、詳細情報を取得

PHPで画像のサイズや拡張子等、詳細情報を取得する際 いつもググってしまっていた ...

javascript_logo_unofficial-300x300
JavaScriptで画像に光沢をつける(glossy.js)

凄く簡単に光沢がつけられるライブラリがあったのでメモ。 ライブラリを呼び出してc ...

110126-HTML5_Logo
navタグ

デザイナーさんより受け取ったファイルにて navという見慣れないタグがあったので ...

images
フォルダにリンク制限をかける

imgというフォルダがあり、直接URLを叩いても 中身を見られないけど、同一サー ...

images
独自タグを変換して画像を表示させる

やりたい事↓↓ ----- {$IMG1}~{$IMG5}までの独自タグがある。 ...

images
画像をアップロードすると複数サムネイルを生成する方法

フォームで画像をアップロードすると、予め定めておいた大中小のサイズでサムネイル画 ...

images
ファイルの更新日付取得とリネーム

やりたかった事は、画像ファイルの更新日時取得と リネーム。 ■参考サイト htt ...

110126-HTML5_Logo
baseタグ

<base>という見かけないタグがあったのでメモ。 相対パスの基準U ...

110126-HTML5_Logo
tableにスクロールバーを付ける

レイアウト的にiframeじゃなくtableにスクロールバーを つけたかった。 ...