Question

我需要一个如何动态更改HTML数据的建议。

我的网页将有一些表单，它将调用PHP函数，我计划返回JSON数组（我也可以接受其他输出，原始HTML除外）。比我想要用JSON值替换页面内容。

这样做的想法是将HTML代码与PHP函数分开。

请告诉我这是不是很好的做法，如果是的话，请你举一些例子吗？

感谢您的建议！

Answer 1

是的，这实际上是一种很好的做法 - 我每天都这样做。看到网络正在快速发展，我们分离的关注越多，我们就越灵活。现在这里是事实：

随着Progressive Web Apps的推出，创建了一个app shell （建议基本上是没有数据的网站的骨架）从ajax / fetch see this link
加载新数据
想象一下，当你想要制作你的网站/ webapp的电视版时 - 你只需要创建一个JSON数据所在的应用程序shell 用于填写数据

我主张分离关注点，因为添加更多平台和更容易设备支持，因为您只会担心模板/ shell而不是数据

以下是一个例子：

filename / url：localhost：8080 / index.php

<?php
  $myObj->name = "John";
  $myObj->age = 30;
  $myObj->city = "New York";
  $myJSON = json_encode($myObj);
  echo $myJSON;
?>

然后在客户端

的index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.getJSON demo</title>
  <style>
  #userInfo{
    height: 100px;
    float: left;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div id="userInfo"></div>

<script>
(function() {

  var myUrl = "https://localhost:8080/index.php";

  $.getJSON( myUrl)
    .done(function( data ) {

  /*
   {"name":"John","age":30,"city":"New York"}

  */
     var userInfo = document.getElementById('userInfo');
     userInfo.innerHTML = '<p>Name :'+ data.name +'</p>
                           <p>Age:'+ data.age+'</p>
                           <p>City:'+ data.city+'</p>';

    });

})();
</script>

</body>
</html>

用于动态替换内容的Javascript建议

1 个答案: