上一篇
场景引入:
凌晨3点,你盯着屏幕里那个死活不肯自动填值的表单输入框😤,后端API明明返回了数据,但前端就像个叛逆期的孩子,死活不显示内容,别慌!今天我们就用jq
(命令行JSON处理神器)和jQuery
(前端老牌工具库)联手解决这个难题,保你代码如丝般顺滑~
// 根据ID赋值 $("#username").val("我是预填值"); // 根据name属性赋值 $("input[name='email']").val("test@example.com"); // 清空输入框 $("#reset-btn").click(function() { $(".form-input").val(""); // 批量清空所有class为form-input的输入框 });
💡 技巧:
val()
方法比直接操作value
属性更可靠(兼容动态生成的DOM) $("#input1, #input2").val("同步赋值")
假设后端返回的JSON数据长这样:
{"user": {"name": "张三", "age": 25}}
$.get("/api/user", function(data) { $("#name").val(data.user.name); $("#age").val(data.user.age); });
# 先用jq在命令行预处理JSON(比如提取嵌套值) curl /api/user | jq '.user.name' > name.txt
// 前端读取处理后的数据 fetch("name.txt").then(res => res.text()).then(name => { $("#name").val(name.trim()); // 注意去除jq输出的换行符 });
🌟 适用场景:
jq '.users[] | select(.age > 18)'
) // 由于安全限制,不能直接设置value,但可以这样替换 $("#file-input").replaceWith('<input type="file" id="file-input">');
$("#hidden-field").val("秘密值🤫"); // 虽然用户看不见,但表单提交时会带上
// 比如Bootstrap Datepicker $("#datepicker").datepicker("setDate", "2025-08-20");
时机问题:
// 错误示范:DOM还没加载就赋值 $(document).ready(function() { // ✅ 必须包裹 $("#input").val("现在安全了"); });
特殊字符转义:
// 如果值包含引号 $("#quote").val('他说:"你好"'.replace(/"/g, '\\"'));
React/Vue等框架警告:
直接jQuery操作可能被框架拦截,建议用ref
或原生JS:
document.getElementById("framework-input").value = "绕过框架控制";
jq --stream
) document.querySelector()
替代部分简单操作 🎯 一句话总结:
选对工具(jq预处理 + jQuery操作),
看准时机(DOM加载后),
避开雷区(安全限制/框架冲突),
表单赋值就是小菜一碟~ 🍰
(完)
本文由 谷梁凝雨 于2025-08-01发表在【云服务器提供商】,文中图片由(谷梁凝雨)上传,本平台仅提供信息存储服务;作者观点、意见不代表本站立场,如有侵权,请联系我们删除;若有图片侵权,请您准备原始证明材料和公证书后联系我方删除!
本文链接:https://vps.7tqx.com/wenda/503319.html
发表评论