私の写真ポートフォリオの管理ページでは、各写真にキャプション、キーワード、クレジットを付けるツールを作成しました。これまで、複数のフォームを動的にリストし、それぞれに送信ボタンが含まれていました。ページに 20 以上の写真/フォームがあると、これは退屈な作業になる可能性があり、ページの下部にボタンを追加してすべてを送信することで、これを構築したいと考えていました.
私は先に進み、良いアプローチだと思うものを作成し、すべてのフォームを 1 つずつループして、AJAX を使用してデータを PHP ページに投稿しました。これはうまくいきましたが、前述したように、20 枚以上の写真で、20 件の AJAX リクエストと 20 件の SQL 更新を実行しており、今ではこれは不十分な作業だと感じています。
私は現在、各フォームをループし、配列またはオブジェクトを作成し、それを 1 つの要求で送信し、すべての行を一度に更新する 1 つの気の利いた SQL クエリを使用する他の方法を検討しています。
これが私が今いるところです。PHP が読み取れるように、フォーム フィールドを読み取り可能で使用可能なオブジェクトにするのに苦労しています。
私のフォーム構造
<form name="12344">
<div class="input_wrap">
<textarea id="12344_caption"></textarea>
</div>
<div class="input_wrap">
<input type="text" id="12344_keywords" />
</div>
<div class="input_wrap">
<input type="text" id="12344_credit" />
</div>
<div class="input_wrap">
<input type="text" id="12344_credit_url" />
</div>
</form>
<form name="12345">
<div class="input_wrap">
<textarea id="12345_caption"></textarea>
</div>
<div class="input_wrap">
<input type="text" id="12345_keywords" />
</div>
<div class="input_wrap">
<input type="text" id="12345_credit" />
</div>
<div class="input_wrap">
<input type="text" id="12345_credit_url" />
</div>
</form>
これまでの私のJQUERY
var photo_annotations = {};
$('form').each(function(i) {
var id = $(this).attr('id');
var caption = $('#'+id+'_caption').val();
var keywords = $('#'+id+'_keywords').val();
var credit = $('#'+id+'_credit').val();
var credit_url = $('#'+id+'_credit_url').val();
// create object to post
photo_annotations[id].push({});
(help)
}
$.ajax({
type: 'POST',
url: 'ajax/save-annotations.php',
data: { json: JSON.stringify(photo_annotations) }
});
これは私が構築したい種類のデータです:
photo_annotations = {
"12344": {
"caption": "This is a caption for the photo ID 12344.",
"keywords": "Keyword1, Keyword2, Keyword3",
"credit": "John Doe",
"credit_url": "http://www.johndoe.com"
},
"12345": {
"caption": "This is a caption for the photo ID 12345.",
"keywords": "Keyword4, Keyword5, Keyword6",
"credit": "Joe Bloggs",
"credit_url": "http://www.joebloggs.com"
}
}
上記で示した形式で、フォーム フィールドを JSON に正しく変換するのに苦労しています。誰かがこのフォーマットを実現する方法を教えてくれることを願っています。