使用ajax將複選框的值提交到後臺
阿新 • • 發佈:2019-02-06
說明
在javaweb專案中,需要使用ajax將複選框的值的提交到後臺,記錄一下當時碰到的問題
正文
一、使用jQuery得到複選框的值
var checkID=[];
$("input[name='checkbox']:checked").each(function(i){
checkID[i] = $(this).val();
});
二、使用ajax非同步提交
注意圖中紅框的traditional選項
它的含義是是否使用傳統的方式淺層序列化
預設為false,此時傳到後臺接收不到
改為true後,後臺可以正常接收到
三、完整程式碼
複選框
<input type="checkbox" value="${news.nid}" name="checkbox" id="checkbox">
指令碼
<script type="text/javascript">
function tijiao(){
var checkID=[];
$("input[name='checkbox']:checked").each(function (i){
checkID[i] = $(this).val();
});
$.ajax(
{data:{'checkID':checkID},
dataType:'text',
success: function(data){
alert(data);
},
type:'post' ,
url:'<%=basePath%>AddHotNewsSvl',
traditional:true
}
);
}
</script>
後臺
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String[] checkID = request.getParameterValues("checkID");
try {
HotNewsIn.addHot(checkID);
} catch (Exception e) {
e.printStackTrace();
Log.logger.error(e.getMessage());
}
response.setCharacterEncoding("utf-8");
response.getWriter().write("設定成功");
}