使用ajax方式获取表单中下拉列表的数据并提交给服务器
HTML页面
<form id="form-add">
<input type="text" value="" name="username">
<input type="text" value="" name="password">
<select id="gender">
<option value="1" selected="selected">男</option>
<option value="2">女</option>
</select>
</form>
第一种方式: $("#form-add").serialize()
注意:$('#gender option:selected').text()
,若要获取指定id的下拉列表,要加入#id。若下拉列表没有id名称,则不需要加入#,如$('select option:selected').text()
。
//给提交按钮绑定单击事件
$("#btn-add").click( function () {
$.ajax({
url: "/add", //请求url
data: $("#form-add").serialize()+'&gender='+$('#gender option:selected').text(),
method: "post", //请求方式
dataType: "json", //响应数据的类型
success: function (result) { //服务器成功返回时,执行的匿名函数
if (result.state == 2000) {
alert("添加成功!");
location.href = "index.html"; //跳转到首页
} else {
alert(result.message);
}
}
});
});
第二种方式:$("#form-add").serializeArray()
简单写一下不同点。
var data = $('#form-add').serializeArray();
data.push({
name: 'gender',
value: $('#gender option:selected').text()
});