JQuery获取form表单数据

最新推荐文章于 2024-06-28 10:47:15 发布

BAStriver

最新推荐文章于 2024-06-28 10:47:15 发布

阅读量2.2w

点赞数 5

分类专栏： # JQuery 文章标签： JQuery 获取Form数据

本文链接：https://blog.csdn.net/BAStriver/article/details/82910269

版权

JQuery 专栏收录该内容

7 篇文章

订阅专栏

1.首先页面的form的所有表单元素需要增加name属性

<div class="form-group">
    <label for="name" class="col-md-2 control-label">数据源名称：</label>
    <div class="col-md-8">
         <input type="text" class="form-control" placeholder="请输入数据源名称" name="name" id="name" title="数据源名称" required/>
    </div>
</div>
<div class="form-group">
	<label for="type" class="col-md-2 control-label">数据库类型：</label>
	<div class="col-md-8">
	<select class="form-control" name="type" id="type" title="数据库类型">
		<option value="1" selected>Mysql</option>
		<option value="2">Oracle</option>
	</select>
</div>

2.获取表单数据的方式一：

let json = $('#addDataSourceForm').serialize();
console.log('json : ',json); // 输出：name=asd&type=1

3.获取表单数据的方式二：

let data = {};
let value = $('#addDataSourceForm').serializeArray();
$.each(value, function (index, item) {
            data[item.name] = item.value;
        });
let json = JSON.stringify(data);
console.log('json : ',json);
/*
* 输出：{"name":"asd","type":"1"}
*/

根据自己需要的格式选择吧。