js获取form表单的值

输出 URL 编码的文本字符串

var o = $('form').serialize();

结果为

_token=1tBMFHKvmt93XAUNTF4WTrhezP17GWAY9YU6II4x&mall_code=135&merchant_id=2&vip_card_code=&code_coupon_name=&code_coupon_id=&start_at=&end_at=

可直接拼接在url上 如果想获取的是json对象数组 就用serializeArray()

var o = $('form').serializeArray();

结果为
在这里插入图片描述
可以用Ajax直接将该json数组post给后台,如果需要把这些数据以字符串形式给后台,并且后台处理后使用,则要转换为json字符串形式

var a=arrayToJson(o);
document.location.href = '/manage/merchant-coupon-record/export?where='+a;
function arrayToJson(o) {
                var r = [];
                if (typeof o == "string") return "\"" + o.replace(/([\'\"\\])/g, "\\$1").replace(/(\n)/g, "\\n").replace(/(\r)/g, "\\r").replace(/(\t)/g, "\\t") + "\"";
                if (typeof o == "object") {
                    if (!o.sort) {
                        console.log(1)
                        for (var i in o)
                            r.push('"'+i+'"' + ":" + arrayToJson(o[i]));
                        if (!!document.all && !/^\n?function\s*toString\s*\{\n?\s*\[native code\]\n?\s*\}\n?\s*$/.test(o.toString)) {
                            r.push("toString:" + o.toString.toString());
                        }
                        r = "{" + r.join() + "}";
                        console.log(r)
                    } else {
                        console.log(2)
                        for (var i = 0; i < o.length; i++) {
                            r.push(arrayToJson(o[i]));
                        }
                        r = "[" + r.join() + "]";
                        console.log(r)
                    }
                    return r;
                }
                return o.toString();
            }
//后台部分
public function getExport(Request $request)
    {
        $where = $request->input('where');   //where条件
        $where=json_decode($where,true);
       $where = array_combine(array_column($where, 'name'), array_column($where, 'value'));//将数组的第一个value值作为key 第二个value值作为value 进行处理
    }

结果为

array:8 [▼
  "_token" => "1tBMFHKvmt93XAUNTF4WTrhezP17GWAY9YU6II4x"
  "mall_code" => "135"
  "merchant_id" => "2"
  "vip_card_code" => ""
  "code_coupon_name" => ""
  "code_coupon_id" => ""
  "start_at" => ""
  "end_at" => ""
]

### 如何使用 JavaScript 获取 HTML 表单的所有字段及其对应的 在 JavaScript 中,可以通过多种方式获取 HTML 表单中的所有字段以及它们的。以下是几种常见的实现方法: #### 方法一:使用 `FormData` 对象 `FormData` 是一种内置对象,可以轻松地从 `<form>` 元素中提取键对[^1]。它不仅支持标准的表单控件(如文本框、下拉菜单),还能够处理文件上传。 ```javascript const formElement = document.querySelector('form'); const formData = new FormData(formElement); // 将 FormData 转换为普通对象 let dataObject = {}; for (let [key, value] of formData.entries()) { dataObject[key] = value; } console.log(dataObject); ``` 这种方法适用于大多数场景,并能自动处理多选框等复杂情况。 --- #### 方法二:手动遍历表单元素 如果需要更灵活的操作或者兼容旧版浏览器,则可以选择手动遍历表单内的所有输入元素并收集其[^3]。 ```javascript function getFormValues(formId) { const form = document.getElementById(formId); const inputs = form.querySelectorAll('input, select, textarea'); let result = {}; Array.from(inputs).forEach(input => { if (input.type === 'radio' || input.type === 'checkbox') { if (input.checked) { // 只记录被选中的选项 result[input.name] = input.value; } } else { result[input.name] = input.value; // 处理其他类型的输入 } }); return result; } console.log(getFormValues('myForm')); ``` 上述代码特别注意了单选按钮 (`radio`) 和复选框 (`checkbox`) 的特殊逻辑。 --- #### 方法三:基于框架的方法(例如 Ant Design) 对于现代前端项目,尤其是使用 React 配合组件库(如 Ant Design)的情况下,可以直接利用框架提供的 API 来获取表单数据[^2]。例如,在 Ant Design v4 中,可以通过 `useForm` 或者 Refs 提供的功能来访问表单状态。 ```javascript import { Form, Button } from 'antd'; const MyComponent = () => { const [form] = Form.useForm(); const handleSubmit = () => { console.log(form.getFieldsValue()); // 批量获取所有字段 }; return ( <> <Form form={form}> {/* 定义表单项 */} </Form> <Button onClick={handleSubmit}>Submit</Button> </> ); }; ``` 这种方式更加简洁高效,尤其适合复杂的动态表单设计。 --- #### 方法四:处理嵌套数组字段 当遇到包含数组或其他复杂结构的表单时,需额外关注字段命名规则以确保正确解析[^4]。比如,假设存在一组可增删的子项,通常会采用类似 `columns[k][field_name]` 这样的名称模式存储数据。 ```html <input name="columns[0][name]" /> <input name="columns[0][age]" /> <input name="columns[1][name]" /> <input name="columns[1][age]" /> ``` 此时可通过正则表达式匹配或自定义解析器完成转换操作。 --- ### 总结 以上介绍了四种不同的技术路径用于捕获 HTML 表单的内容,具体选择取决于实际需求和技术栈背景。无论是原生 DOM 操作还是依赖第三方工具包,都应充分考虑用户体验与性能优化之间的平衡。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值