PHP:Ajax/JSONでフォームの提出に問題がありますか?
質問
現在、次のコードがあります:
home.php
<form name='myformname' id='myformid'>
<input type='text' name='mytext1' value='abc'>
<input type='text' name='mytext2' value='123'>
<input type='submit' value='Submit'>
</form>
<div id='textone'></div><div id='texttwo'></div>
_home.php
$arr = array( 'textone' => $_POST['mytext1'], 'texttwo' => $_POST['mytext2'] );
echo json_encode( $arr );
ajax.js
jQuery('#myformid').live('submit',function(event) {
$.ajax({
url: '_home.php',
type: 'POST',
data: $('#myformid').serialize(),
success: function( data ) {
// TODO: write code here to get json data and load DIVs instead of alert
alert(data);
}
});
return false;
});
送信時の出力:
{"textone":"abc","texttwo":"123"}
質問
ロードしたいです myText1 値 テキスト divと myText2 値 texttwo _home.phpでJSONデータを使用してdiv
ヒント: 使ってます この答え リンククリックイベントで同じタスクを実行します。しかし、フォームの提出でこれを行う方法は?
ありがとう
解決
JSONを解析して、Divを含む値に設定したいだけですか?
var divs = JSON.parse(data);
for (var div in divs) {
document.getElementById(div).innerHTML = divs[div];
}
(以前のポスターの構文は、おそらくあなたが望んでいるものに似ており、おそらくよりクロスブラウザー互換性がありますが、JSONの解析は含まれていません。)
JSONはJavaScriptのサブセットにすぎないため、評価するだけです。 json.parse()は基本的にそれを行いますが、「データ」に単純なオブジェクトの代わりに厄介なコードが含まれている場合、評価されないことを保証します。
他のヒント
成功関数
for (prop in data){
$('#' + prop).html(data[prop]);
}
これが私の完全なJSソリューションです:
jQuery('#myformid').live('submit',function(event) {
$.ajax({
url: '_home.php',
type: 'POST',
dataType: 'json',
data: $('#myformid').serialize(),
success: function( data ) {
for(var id in data) {
//jQuery('#' + id).html(data[id]); // This will also work
document.getElementById(id).innerHTML = data[id];
}
}
});
return false;
});
所属していません StackOverflow