JQuery获取form表单数据

男娘i 2022-05-09 04:10 975阅读 0赞

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"}
    */

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

发表评论取消回复

表情：

评论列表（有 0 条评论，975人围观）

还没有评论，来说两句吧...

相关阅读

相关 Java servlet获取form表单数据（参数）

本节主要讲在 Servlet 中如何使用 HttpServletRequest 获取请求参数和 request 对象传递数据有哪些方法。获取请求参数在实际开发中，经

素颜马尾好姑娘i/ 2024年03月29日 15:13/ 0 赞/ 10 阅读

相关 php获取post表单数据_PHP get和post方法获取form表单数据

在 PHP 中使用 get 和 post 两种方法接收来自 form 表单的值，在 form 表单中可以定义 PHP 的接收方式和接收地址。 get 和 post 方法主要有

落日映苍穹つ/ 2022年11月12日 04:27/ 0 赞/ 237 阅读

相关 jQuery提交form表单

<form id="search_form" name="search_form" method="post"> <input type="tex

「爱情、让人受尽委屈。」/ 2022年08月02日 09:44/ 0 赞/ 245 阅读

相关 jQuery中设置form表单

<form id="myFormId" name="myForm" action="" method="post"> <input type="text"

Myth丶恋晨/ 2022年06月17日 14:23/ 0 赞/ 210 阅读

相关 Ajax获取form表单提交数据

<!DOCTYPE html > < html lang= "en" > < head > < meta charset= "UTF-8" > < meta na

本是古典何须时尚/ 2022年06月16日 12:27/ 0 赞/ 343 阅读

相关 jQuery插件：表单jquery.form.js

jQuery插件：表单jquery.form.js jQuery插件：表单jquery.form.js [jquery.form.js 官网][jquery.fo

矫情吗；*/ 2022年06月01日 03:27/ 0 赞/ 184 阅读

相关 JQuery获取form表单数据

1.首先页面的form的所有表单元素需要增加name属性 <div class="form-group"> <label for="name" cla

男娘i/ 2022年05月09日 04:10/ 0 赞/ 976 阅读

相关 Java servlet获取form表单数据（参数）

获取请求参数在实际开发中，经常需要获取用户提交的表单数据，例如用户名和密码等，为了方便获取表单中的请求参数，在 HttpServletRequest 接口的父类 Ser...

朱雀/ 2021年01月13日 09:31/ 0 赞/ 1965 阅读

相关如何利用js获取form表单数据

如何利用js获取form表单数据方法如下： 1、有的时候想偷点懒，页面上有大量的表单提交数据，每次单独获取都比较麻烦。代码冗余度也比较多，因此封装了一个方法。 2、表单...

灰太狼/ 2020年06月07日 15:58/ 0 赞/ 871 阅读

相关 jQuery表单插件jquery.form.js

jQuery表单插件jquery.form.js jQuery Form插件是一个优秀的Ajax表单插件，可以非常容易地、无侵入地升级HTML表单以支持Ajax。jQue...

小灰灰/ 2020年06月03日 12:47/ 0 赞/ 1080 阅读