必要なデータを隠しリストボックス( 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 );
?>
※ 処理の結果は、開発者ツールのコンソールで確認して下さい。
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
