HTML部分代码:
<form class="form-horizontal" role="form" id="form1">
<div class="form-group">
<label class="col-sm-5 control-label">所属区域</label>
<div class="col-sm-7">
<select class="form-control" style="width: 35%;" name="area">
<option value="金华">金华</option>
<option value="杭州">杭州</option>
</select>
</div>
</div>
<button class="btn btn-default" type="submit" style="width: 110px" id="button1">开始运行</button>
</form>
JS部分代码:
$("#button1").click(function () { // assuming submit button as id btn
$.ajax({
type: "POST", //
url: "/handler", // url to the function
data:$("#form1").serialize(),
success: function (response) {
// $("#update_logger").html(response) // manipulate the dom
// localStorage.setItem("log", response);
console.log(response);
},
});
});
ajax的提交方式是POST,这样点击按钮提交之后却变成了GET方式。查阅资料后发现,原来需要在表单onsubmit设置return false。
修改代码:
<form class="form-horizontal" role="form" id="form1" onsubmit="return false">
之后测试,代码OK!