jQuery表单传参与数据获取的两种实现方式

HTML表单结构基础

首先构建基础的HTML表单结构。在id为myform的表单中，包含两个name为gender的单选按钮（分别对应值1和2）、一个name为username的文本输入框，以及一个触发提交操作的按钮。点击按钮时将调用fun()函数。此外，页面中还有一个id为myText的div元素，用于后续显示服务器返回的数据结果。

<form id="myform">
<input type="radio" value="1" name="gender">男
<input type="radio" value="2" name="gender">女
<input type="text" name="username" />
<input type="button" value="提交" onclick="fun()"/>
</form>
<div id="myText"></div>

方式一：使用serialize序列化提交

第一种获取并提交数据的方式是使用serialize()方法。在fun()函数中，首先通过alert弹窗展示$('#myform').serialize()生成的序列化字符串，以便调试查看。随后，使用$.post方法向'ajaxServletH'接口发送异步POST请求。请求参数为$('#myform').serialize()生成的表单数据，回调函数接收返回的data。在回调中，获取id为myText的DOM元素，将其innerHTML更新为包含分隔线的data内容，请求类型指定为'text'。

< script src ="js/jquery-3.3.1.min.js" ></ script >  < script >   // 定义方法 
   function
fun(){
alert($('#myform').serialize());
// 使用ajax发送异步请求 
    $.post( " ajaxServletH " ,$('#myform').serialize(), function
(data){
var divA = document.getElementById( " myText "
);
divA.innerHTML 
= " <br/><hr><br/> " +
data;
},
" text "
)
}
</ script >

方式二：选择器获取特定字段值

第二种方式侧重于获取特定字段的值。通过jQuery选择器直接定位到name为'gender'且处于选中状态（:checked）的input元素，并调用.val()方法获取其value属性值。这种方式适用于需要单独处理某个特定输入项（如单选框）的场景，而非提交整个表单。

var gender = $ ("input [name= 'gender' ] : checked") .val() ;

方法总结与适用场景

综上所述，jQuery提供了灵活的数据处理机制。serialize()方法适合快速序列化整个表单并发送请求，而直接选择器取值则适合对特定字段进行精细控制。开发者可根据实际需求选择串行化提交或单独取值的方式，以实现更高效的前后端数据交互。

以上所述是小编给大家介绍的jquery传参及获取方式，希望对大家有所帮助！