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

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 个解决方案

解决方案1
2 已采纳 2017-05-30 23:49:02

解决方案2
0 2017-12-03 15:17:14

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2017-05-30 23:49:02

解决方案2 0 2017-12-03 15:17:14

解决方案1
2 已采纳 2017-05-30 23:49:02

解决方案2
0 2017-12-03 15:17:14