Question

我尝试使用jQuery ajax填充表单并且php不起作用。代码取自其他人，只使用jQuery填充表单并且它有效。这是我的html / jquery代码和我的PHP代码。请帮忙！

<!DOCTYPE html>
<html>
<head>


<link rel="stylesheet" type="text/css"   href="https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.css"/>
<script type="text/javascript"   src="jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.js"></script>
</head>
<body>

  <form name="form_simple" action="details.html" method="get">
     <input type="hidden" name="ID" />
    <br/>
<label for="Name">Name</label>
<input name="Name" type="text" />
<br/>
<label for="Address">Address</label>
<textarea name="Address" rows="5" cols="20"></textarea>
<br/>
<label for="Country">Country</label>
<select name="Country" multiple="multiple">
    <br/>
    <option value="">-</option>
    <option value="UK">United Kingdom</option>
    <option value="SRB">Serbia</option>
    <option value="USA">United States of America</option>
    <option value="FRA">France</option>
</select>
<br/>
<label for="IsFeatured">Is Featured</label>
<input name="IsFeatured" type="checkbox" value="true" />
<br/>
<label for="Town">Town</label>
<select name="Town">
    <option value="" selected="selected">-</option>
    <option value="London">London City</option>
    <option value="Liverpool">Liverpool City</option>
    <option value="Lothian">Lothian City</option>
    <option value="Newcastle">Newcastle City</option>
    <option value="Buckinghamshire">Buckinghamshire City</option>
    <option value="Essex">Essex City</option>
</select>
<br/>
<label for="Contact">Contact</label>
<input name="Contact" type="radio" value="Email" />Email
<input name="Contact" type="radio" value="Phone" />Phone
<input name="Contact" type="radio" value="Post" />Post
<br/>
<input type="submit" value="Save" class="submit-button" />

<script>
/*
data = {
    "ID": 17,
    "Name": "Emkay Entertainments",
    "Address": "Nobel House, Regent Centre",
    "Town": "Lothian",
     "Country":["UK","USA"],
    "Contact": "Phone",
    "IsFeatured": true
};
*/
$(document).ready(function() {
//alert("get here");
$.getJSON("fill_form.php" ,
function(data){
 alert(data);
 // reset form values from json object
 $.each(data, function (name, val) {
    var $el = $('[name="' + name + '"]'),
        type = $el.attr('type');

    switch (type) {
        case 'checkbox':
            $el.attr('checked', 'checked');
            break;
        case 'radio':
            $el.filter('[value="' + val + '"]').attr('checked', 'checked');
        break;
      default:
        $el.val(val);
    }
});
});


});


</script>
</html>

--------------- PHP代码------------------------------ --------------

  $row_data = array(
        "ID" => 17,
        "Name" => "Emkay Entertainments",
        "Address" => "Nobel House, Regent Centre",
        "Town" => "Lothian",
        "Country" => ['UK','USA'],
        "Contact" => "Phone",
        "IsFeatured" => true
  );

  array_push($data, $row_data);   



  echo json_encode($data);
?>

Answer 1

$.getJSON("fill_form.php" , function(data){
  alert(data);
  $.each(data, function (name, val) {

此代码循环遍历第一个数组索引。因为您使用array_push()，所以PHP会创建一个如下数组：

Array(
  [0] => Array(
    "ID" => 17,
    // etc
  )
)

这意味着它会转换为[{而非{，因此您将迭代索引并不内部数组键。

删除你的array_push()或在js代码中添加第二个foreach循环以循环键。

Answer 2

作为替代方案，您可以下载https://jocapc.github.io/jquery-view-engine/，以便将JSON对象加载到以下表单中：

$(document).ready(function() {
     $.getJSON("fill_form.php" ,
          function(data){
                 $("#form_simple").view(data);
          });
});

它将处理表单元素，请参阅https://jocapc.github.io/jquery-view-engine/docs/form

jQuery ajax php填充表单字段并不起作用

2 个答案: