对于这个演示,我从表单获取输入,将它们放在json对象中并通过ajax发送到服务器。如何使用服务器上的数据重新填充表单?我可以让它在控制台中打印,但似乎无法弄清楚如何在表单中获取它。是否像在表单字段中的某处放置jsonObject.firstName之类的东西一样简单?
形式:
div class="form">
<form method="GET" action="demo.html">
<section class="formSection">
<div class="dataChunk">
<label for="firstName">First Name:</label>
<input type="text" id="jsonObject.firstName" maxlength="50" />
</div>
<div class="dataChunk">
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" maxlength="50" />
</div>
<div class="dataChunk">
<label for="phoneNumber">Phone:</label>
<input type="text" id="phoneNumber" maxlength="10" />
</div>
<div class="dataChunk">
<label for="address">Address:</label>
<input type="text" id="address" maxlength="50" />
</div>
</section>
</form>
</div>
json对象
var jsonObject = {
"firstName" : firstName,
"lastName" : lastName,
"phone" : phone,
"address" : address
};
PHP
$name = $_REQUEST['firstName']." ".$_REQUEST['lastName'];
$phone = $_REQUEST['phone'];
$address = $_REQUEST['address'];
$person = Array();
$person['name'] = $name;
$person['phone'] = $phone;
$person['address'] = $address;
$returnObj = json_encode($person);
echo $returnObj;
?>
答案 0 :(得分:2)
你需要使用$ .each迭代你的php json编码返回并通过选择器更新你的表单元素
$(document).ready(function() {
$('form').submit( function(){
var values = serialize( $(this) );
$.ajax({
url: 'demo.php'
data: values,
Success: function(result){
$.each(result, function( key, value ) ({
$('#'+key).val(value);
});
}
});
});
});
未经测试,因为我在移动设备上,但总体布局在那里,如果我发出任何语法错误,我会更新
将jsonobject放在元素id前面不会自动解析json返回的对象
答案 1 :(得分:0)
使用jQuery你会说
$('#yourInputId').val(jsonObject.firstname);
或者:(抱歉,我对普通的JS有点生疏)类似
document.getElementById('yourInputId').value(jsonObject.firstname);
当jsonObject可用时使用。
为了清楚起见,我更改了输入ID的名称。希望这有帮助