目录

jQuery快速填充非form数据

jQuery快速填充非form数据

先看看jQuery根据name填充form表单数据

html 复制代码
<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>

  <form id="myForm">
    <input type="text" name="username" />
    <input type="email" name="email" />
    <input type="password" name="password" />
  </form>

  <script>
    // 模拟数据
    const formData = {
      username: 'JohnDoe',
      email: 'johndoe@example.com',
      password: 'secretpassword'
    };

    // 填充表单
    $('#myForm input').each(function () {
      const inputName = $(this).attr('name');
      if (formData[inputName]) {
        $(this).val(formData[inputName]);
      }
    });
  </script>

</body>

</html>

按照相同的思路,渲染<span>

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
  <table>
    <tr>
      <td class="tbox03tdr" width="20%"><span prop="salesOrgName"></span></td>
      <td class="tbox03tdr" width="20%"><span prop="clientName"></span></td>
    </tr>
  </table>
  <script>
    // 发起 Ajax 请求
    $.ajax({
      url: 'yourDataUrl', // 替换为实际的后端数据接口 URL,这里假设为给定的 JSON 数据的模拟 URL
      method: 'GET',
      success: function (data) {
        // 获取具有 prop 属性的 span 元素
        const spans = $('span[prop]');
        // 遍历 span 元素并设置内容
        spans.each(function () {
          const propValue = $(this).attr('prop');
          $(this).html(data[propValue]);
        });
      },
      error: function (error) {
        console.error('Ajax 请求失败:', error);
      }
    });
  </script>
</body>

</html>

通过这样的方式,只要将span中定义prop属性和json中的key保持一致,即可填充数据

本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
jamison_112 天前
文心一言与 DeepSeek 的竞争分析:技术先发优势为何未能转化为市场主导地位?
人工智能·ai·chatgpt·gpt-3·1024程序员节
NaZiMeKiY12 天前
HTML5前端第六章节
前端·html·html5·1024程序员节
jamison_116 天前
颠覆未来:解锁ChatGPT衍生应用的无限可能(具体应用、功能、付费模式与使用情况)
ai·chatgpt·1024程序员节
NaZiMeKiY21 天前
HTML5前端第七章节
1024程序员节
earthzhang202125 天前
《Python深度学习》第四讲:计算机视觉中的深度学习
人工智能·python·深度学习·算法·计算机视觉·numpy·1024程序员节
明明真系叻1 个月前
2025.3.2机器学习笔记:PINN文献阅读
人工智能·笔记·深度学习·机器学习·1024程序员节·pinn
bitenum1 个月前
【C++/数据结构】队列
c语言·开发语言·数据结构·c++·青少年编程·visualstudio·1024程序员节
IT学长编程1 个月前
计算机毕业设计 基于SpringBoot的智慧社区管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解
java·spring boot·后端·毕业设计·课程设计·论文笔记·1024程序员节
qq_382391332 个月前
WPF框架学习
学习·wpf·1024程序员节
✿ ༺ ོIT技术༻2 个月前
Linux:TCP和守护进程
linux·运维·服务器·网络·tcp/ip·1024程序员节