本文介绍了如何利用 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 示例代码：
<!DOCTYPE html> <html> <head> <title>Dynamic Input Filling</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> </head> <body> <input name="foobar" /> <input name="foo" /> <input name="bar" /> <script> 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]')); </script> </body> </html>
注意事项：
- 确保引入 jQuery 库。
- 正则表达式的正确性至关重要，需要根据实际的 HTML 结构进行调整。
- 这两种方法虽然避免了循环，但在数据量很大时，多次执行正则表达式可能会影响性能。在实际应用中，需要根据具体情况权衡性能和代码可读性。
总结：
本文介绍了两种在不使用循环的情况下，利用 jQuery 和 JavaScript 动态填充 input 框的方法。这两种方法都利用正则表达式从 jQuery 选择器字符串中提取 input 框的 name 属性，然后根据该属性从 JSON 数据中获取对应的值。您可以根据实际情况选择最适合您的方法。
评论（已关闭）
评论已关闭