必要なデータを隠しリストボックス( multiple ) に jQuery で追加して配列として PHP に送る では、select 要素を使用しましたが、jQuery の ajax と FormData を使用すれば、もっと単純に送る事ができます。 送信用データ作成部分は結局4行です
// 新規送信用オブジェクト
var formData = new FormData();
// 送信フィールド作成
$("#row1_fld option").each( function(){
formData.append("ybp[]", $(this).val());
});
// **************************************
// サーバ呼び出し
// **************************************
$.ajax({
url: "./post_action.php",
type: "POST",
data: formData,
processData: false,
contentType: false
})
.done(function( data, textStatus ){
console.log( "status:" + textStatus );
console.log( "data:" + JSON.stringify(data, null, " ") );
options.info("処理が完了しました");
})
.fail(function(jqXHR, textStatus, errorThrown ){
console.log( "status:" + textStatus );
console.log( "errorThrown:" + errorThrown );
options.info("アップロードに失敗しました");
})
.always(function() {
})
;
デモページソースコードセットダウンロード メインソースコード(view_main.php)
<?php
// *************************************
// 表示コントロール
// *************************************
$GLOBALS['title'] = "jQuery Ajax POST : 配列";
$GLOBALS['comment'] = 'ようこそ jQuery + Bootstrap(css) + mmenu + FormData + PHP';
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<meta charset="utf-8">
<title><?= $GLOBALS['title'] ?></title>
<?php require_once('std/libs.php') ?>
<link rel="stylesheet" href="std/mmenu.css">
<link rel="stylesheet" href="std/basic.css">
<style>
/* タイトル部分 */
.fields {
width: 90px;
font-size: 12px;
/* vertical-align: middle!important; */
}
legend {
font-size: 18px;
padding-left: 6px;
}
</style>
<script>
<?php require_once('std/js.php') ?>
// -------------------------------------
// 画面とメッセージ
// -------------------------------------
var options = {
row1 : { title : "複数データ<br>(Yahoo!テレビ番組表地域コード)", pcss : { width: "400px" }, attr: { size : 6 } },
row_last : { title :"メッセージ" },
error : function(message){
$("#row_last").next().text( message );
toastr.error(message);
},
info : function(message){
$("#row_last").next().text( message );
toastr.success(message);
}
};
$(function(){
$("#wrapper").css({"visibility":"visible", "margin-bottom": "0px"});
// -------------------------------------
// 固定テンプレート
// -------------------------------------
// 1) options による行とフィールドの設定
// 2) Bootstrap 用 form-control クラスの追加
$(".fields").each(function(){
if ( options[ $(this).prop("id") ] ) {
$(this).html( options[ $(this).prop("id") ].title );
// 個別 css
if ( options[ $(this).prop("id") ].css ) {
$(this).next().find("input,select,textarea").css( options[ $(this).prop("id") ].css );
}
// 入力チェック用属性
if ( options[ $(this).prop("id") ].attr ) {
$(this).next().find("input,select,textarea").attr( options[ $(this).prop("id") ].attr );
}
// pc のみの css
if ( options[ $(this).prop("id") ].pcss ) {
if ( !$.isMobile ) {
$(this).next().find("input,select,textarea").css( options[ $(this).prop("id") ].pcss );
}
}
}
$(this).next().find("input,select,textarea").addClass("form-control");
});
// 初期フォーカス
setTimeout( function(){$('#row1_fld').focus();}, 100 );
// -------------------------------------
// *************************************
// 送信ボタン
// *************************************
$("#frm").submit( function(event){
// 本来の送信処理はキャンセル
event.preventDefault();
$("#post_check").modal();
} );
// **************************************
// Bootstrap OK ボタン
// **************************************
$("#data_post").on("click", function(){
// エラーメッセージエリアをクリア
$(".error").next().text( "" );
// 結果の表示エリアを全てクリア
$("#result").html( "" );
// **************************************
// サーバへ送信
// **************************************
// 新規送信用オブジェクト
var formData = new FormData();
// 送信フィールド作成
$("#row1_fld option").each( function(){
formData.append("ybp[]", $(this).val());
});
// **************************************
// サーバ呼び出し
// **************************************
$.ajax({
url: "./post_action.php",
type: "POST",
data: formData,
processData: false,
contentType: false
})
.done(function( data, textStatus ){
console.log( "status:" + textStatus );
console.log( "data:" + JSON.stringify(data, null, " ") );
options.info("処理が完了しました");
})
.fail(function(jqXHR, textStatus, errorThrown ){
console.log( "status:" + textStatus );
console.log( "errorThrown:" + errorThrown );
options.info("アップロードに失敗しました");
})
.always(function() {
})
;
});
// -------------------------------------
// 固定テンプレート
// -------------------------------------
$("#mmenu_left").mmenu({
navbar: {
title: "メニュー"
},
offCanvas: {
position : "left",
zposition : "next"
}
});
// -------------------------------------
});
</script>
</head>
<body>
<div id="wrapper">
<script>
$("#wrapper").css( {"visibility": "hidden", "margin-bottom" : "1000px" } );
</script>
<div id="head">
<?php require_once('std/view_hamburger.php') ?>
<div id="title"><?= $GLOBALS['title'] ?></div>
</div>
<div id="body">
<form id="frm" class="form-inline">
<fieldset>
<legend></legend>
<table class="table table-condensed">
<tr>
<td class="fields" id="row1"></td>
<td>
<select name="row1_fld" id="row1_fld">
<option value="43">和歌山</option>
<option value="44">奈良</option>
<option value="45">滋賀</option>
<option value="41">京都</option>
<option value="40">大阪</option>
<option value="42">兵庫</option>
</select>
</td>
</tr>
<tr>
<td class="fields" id="row2"></td>
<td>
<input id="action" type="submit" class="btn btn-primary btn-sm" value="送信">
</td>
</tr>
<tr>
<td class="fields error" id="row_last"></td>
<td></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>結果</legend>
<table id="result" class="table table-condensed">
</table>
</fieldset>
</form>
</div>
<div id="comment">
<?= $GLOBALS['comment'] ?>
</div>
<div class="modal fade" id="post_check" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">確認</h4>
</div>
<div class="modal-body">
送信しますか?
</div>
<div class="modal-footer">
<button id="data_post" type="button" class="btn btn-default" data-dismiss="modal">OK</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">キャンセル</button>
</div>
</div>
</div>
</div>
</div>
<?php require_once('unit_menu.php') ?>
</body>
</html>
※ jQuery + Bootstrap(css) + mmenu + FormData + PHP の総合テンプレートです post_action.php
<?php
// *************************************
// キャラクタセット
// *************************************
header( "Content-Type: application/json; charset=utf-8" );
// *************************************
// キャッシュ無効
// *************************************
session_cache_limiter('nocache');
session_start();
// *************************************
// 処理
// *************************************
// *************************************
// PHP の結果を result キーで
// JSON としてブラウザに返す
// *************************************
print json_encode($_POST , JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT );
?>
※ 処理の結果は、開発者ツールのコンソールで確認して下さい。
|
|
【jQueryの最新記事】
- jQuery の $.get を使用した ajax のテンプレート
- jquery.balloon.js を使用した簡単なバルーン( マウスオーバーで表示する追加説明用 )の作り方
- jQuery による link 要素の追加と削除を bootstrap.css でリアルタイムチェック
- FileReader で、ローカルの CSV を読み込んで(shift_jis)、jQuery でテーブルを作成して表示する
- jQuery + bootstrap.js で ajax の GET と POST を使用した DB テーブルを更新する UI テンプレート
- jQuery : 貼り付けるだけで、ページ右下にページ先頭にジャンプするリンクを表示させる( アニメーションは無し )
- STYLE 要素を追加して、CSS テキストをセットして、jQuery で CSS に important 指定を追加する。
- ページの右下に、ページの先頭へ移動するボタンを追加する(ページの先頭から 200px までは、スクロールボタンを表示しない)
- テーブルのTDをクリックしたら、INPUT で値を変更可能にして、元の値と違うものにはフラグを立てる処理を絵で書いて説明してみました
- jQuery を使用してサーバから取得した JSON データを元にテーブルを作成し、その後から列を加工する
- JSON 配列を WEB より読み出して jQuery で動的にテーブルを作成して表示する
- jQuery UI の Datepicker Widget のオプション
- 必要なデータを隠しリストボックス( multiple ) に jQuery で追加して配列として PHP に送る
- Android Studio の追加日本語化用に、キャラクタセットに依存しないコード文字列を作成するツールを作成しました
- 画像ファイルが存在した時のみ、表示する jQuery の記述
- jQuery で mobile(スマホ) かどうかのチェックをしたくて調べたら、Stack Overflow の記事でいろんな方法が答えられていました。
- jQuery と FileReader オブジェクトによる、ローカルの複数画像ファイルのプレビュー表示
- とても面白くて簡単な jQuery のクリックしたコンテンツ以外を暗転(Blackout) するサンプル
- jQuery で、左右に並んだリストボックスの右側のデーターをダブルクリックしたら左へ転送してソートする処理
- jQuery でコンボボックスの選択されたオプションのテキストを取得する場合、optgroup を使っている場合は子孫選択でないと取得されないというお話 / find(子孫) と children(直..
