从json php填充表单

时间:2012-10-23 20:09:09

标签: php json html-form

对于这个演示,我从表单获取输入,将它们放在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;
?>

2 个答案:

答案 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的名称。希望这有帮助