通过ajax请求传递json对象实现页面局部修改

最新推荐文章于 2021-09-18 10:33:49 发布

感谢一切给予

最新推荐文章于 2021-09-18 10:33:49 发布

阅读量158

点赞数

本文链接：https://blog.youkuaiyun.com/qmxqing/article/details/118973594

版权

这篇博客展示了如何利用JavaScript的Ajax技术从服务器获取JSON数据，并动态地将数据填充到HTML表格中。通过点击按钮触发异步请求，接收到响应后遍历JSON对象，逐行插入表格，实现了页面局部更新的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$(function () {

/通过ajax请求实现页面局部修改/

   $("#btn").click(function () {
         $.ajax({
           url:"testJson",
           type:"POST",
           dataType:"json",
           success: function (msg) {


             $("body").append("  <table></table>");
             $("table").append("<tr><td>LASTNAME</td><td>EMAIL</td><td>GENDER</td><td>DEPARTMENT</td></tr>");
             for (let i in msg) {
               var emp=msg[i];

               //  alert("id="+emp.id+"lastName="+emp.lastName+"departmentName="+emp.department.departmentName);
             $("table").append("  <tr><td>"+emp.LastName+"</td><td>"+emp.email+"</td><td>"+emp.gender+"</td><td>"+emp.department.departmentName+"</td></tr>\n");
             }
           }
         });
   });

  });