本文介绍了如何利用 jQuery 和 JavaScript，在不使用循环的情况下，根据 JSON 数据动态填充 HTML input 框。核心思路是利用正则表达式从 jQuery 选择器字符串中提取 input 框的 name 属性，然后根据 name 属性从 JSON 数据中获取对应的值，并将其赋值给 input 框。文章提供了两种实现方式，并附带了完整的示例代码。
动态填充 Input 框的两种方法
在前端开发中，经常需要根据后端返回的 JSON 数据动态填充 HTML 表单。如果数据量很大，手动为每个 input 框赋值显然效率低下。本文将介绍两种利用 jQuery 和 JavaScript 实现动态填充 input 框的方法，避免使用循环，提高代码的可读性和可维护性。
方法一：使用立即执行函数表达式 (IIFE)
这种方法的核心是利用立即执行函数表达式，将 jQuery 选择器作为参数传递给函数，然后在函数内部使用正则表达式提取 input 框的 name 属性，并根据该属性从 JSON 数据中获取对应的值。
let data = { "foobar": "data foobar", "foo": "data foo", "bar": "data bar", "baz": "data baz", "qux": "data qux", "quux": "data quux", "corge": "data corge", "grault": "data grault", "garply": "data garply", "waldo": "data waldo", "fred": "data fred", "plugh": "data plugh", "xyzzy": "data xyzzy", "thud": "data thud" };(s => s.val(data[/=(w+)]/.exec(s.selector)[1]]))($('input[name=foobar]'));(s => s.val(data[/=(w+)]/.exec(s.selector)[1]]))($('input[name=foo]'));(s => s.val(data[/=(w+)]/.exec(s.selector)[1]]))($('input[name=bar]'));
代码解释：
data： 包含需要填充到 input 框的数据的 JSON 对象。(s => s.val(data[/=(w+)]/.exec(s.selector)[1]]))：这是一个立即执行函数表达式。s：是传递给函数的 jQuery 对象。s.selector： 获取 jQuery 选择器字符串 (例如: “input[name=foobar]”)。[/=(w+)]/.exec(s.selector)[1]：使用正则表达式从选择器字符串中提取 name 属性的值。正则表达式 /=(w+)]/ 匹配 name=属性值 的模式，(w+) 捕获属性值。data[/=(w+)]/.exec(s.selector)[1]]：使用提取的 name 属性值从 data 对象中获取对应的值。s.val(…)：将获取的值赋值给 input 框。($(‘input[name=foobar]’))：将 jQuery 对象 $(‘input[name=foobar]’) 作为参数传递给 IIFE。
方法二：使用变量存储选择器字符串
这种方法将 jQuery 选择器字符串存储在一个变量中，然后使用该变量来获取 jQuery 对象，并提取 name 属性。
let data = { "foobar": "data foobar", "foo": "data foo", "bar": "data bar", "baz": "data baz", "qux": "data qux", "quux": "data quux", "corge": "data corge", "grault": "data grault", "garply": "data garply", "waldo": "data waldo", "fred": "data fred", "plugh": "data plugh", "xyzzy": "data xyzzy", "thud": "data thud" };var s = "input[name=foobar]";$(s).val(data[/=(w+)]/.exec(s)[1]]);var s = "input[name=foo]";$(s).val(data[/=(w+)]/.exec(s)[1]]);var s = "input[name=bar]";$(s).val(data[/=(w+)]/.exec(s)[1]]);
代码解释：
var s = “input[name=foobar]”;：将选择器字符串存储在变量 s 中。$(s)：使用变量 s 创建 jQuery 对象。data[/=(w+)]/.exec(s)[1]]：使用正则表达式从选择器字符串 s 中提取 name 属性的值，并从 data 对象中获取对应的值。$(s).val(…)：将获取的值赋值给 input 框。
完整 HTML 示例代码：
Dynamic Input Filling let data = { "foobar": "data foobar", "foo": "data foo", "bar": "data bar", "baz": "data baz", "qux": "data qux", "quux": "data quux", "corge": "data corge", "grault": "data grault", "garply": "data garply", "waldo": "data waldo", "fred": "data fred", "plugh": "data plugh", "xyzzy": "data xyzzy", "thud": "data thud" }; (s => s.val(data[/=(w+)]/.exec(s.selector)[1]]))($('input[name=foobar]')); (s => s.val(data[/=(w+)]/.exec(s.selector)[1]]))($('input[name=foo]')); (s => s.val(data[/=(w+)]/.exec(s.selector)[1]]))($('input[name=bar]'));
注意事项：
确保引入 jQuery 库。正则表达式的正确性至关重要，需要根据实际的 HTML 结构进行调整。这两种方法虽然避免了循环，但在数据量很大时，多次执行正则表达式可能会影响性能。在实际应用中，需要根据具体情况权衡性能和代码可读性。
总结：
本文介绍了两种在不使用循环的情况下，利用 jQuery 和 JavaScript 动态填充 input 框的方法。这两种方法都利用正则表达式从 jQuery 选择器字符串中提取 input 框的 name 属性，然后根据该属性从 JSON 数据中获取对应的值。您可以根据实际情况选择最适合您的方法。
以上就是使用 jQuery 根据选择器字符串动态填充 Input 框的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1517666.html
微信扫一扫 
支付宝扫一扫 
