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. стоимость внутри текстон Девочка mytext2. стоимость внутри texttwo. Div использует данные JSON в _home.php
Намекать: Я использую Этот ответ Чтобы сделать то же самое задание на ссылку Click Event. Но как это сделать по поводу представления формы?
Спасибо
Решение
Вы просто хотите разобрать, что JSON и настроил Divs на значения, которые он содержит правильно?
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;
});