JavaScript实用技巧:表单交互与AJAX处理
作者:拾光时间:2026-10-29 19:35:50浏览:503
本文整理了一系列JavaScript实用技巧,涵盖阻止H5日期输入框默认事件并调用plus时间选择器、判断与获取Checkbox选中状态、设置Checkbox选中属性以及通过AJAX提交数据时显示进度图片等常见场景,旨在帮助开发者解决前端交互中的具体问题。
JavaScript实用技巧:表单交互与AJAX处理
本文汇总了JavaScript实用技巧。供读者参考学习,具体内容如下:
阻止默认事件与调用H5+时间选择器
1.处理默认事件
需阻止默认行为,因H5原生input type='date'在部分浏览器及Android设备上失效,此时应调用H5+时间选择器,同时屏蔽input的默认click事件,实现代码如下:
//选择时间
$("#end_time").on("click",function(event){
event.preventDefault();
plus.nativeUI.pickDate( function(e){
var d = e.date;
// console.log(d.Format('yyyy-MM-dd'));
$("#end_time").val(d.Format('yyyy-MM-dd'));
},function(e){
console.log( "未选择日期:"+e.message );
},{title:"请选择到期时间",minDate:new Date()});
});
Checkbox选中状态判断与值获取
2.检测input type='checkbox'的选中状态,代码示例如下
if (!$("#shopregister #checkaggree").is(":checked")) {
alert("请同意注册协议");
return false;
}
3.提取多个checkbox中已选中项的值,代码示例如下
<input name='is_refund' id='refund_1' type='radio' value='1' />
<input name='is_refund' id='refund_0' checked='checked' type='radio' value='0' />
$("#shopregister input[name='is_refund']:checked").val();
设置Checkbox选中状态
4.设定checkbox为选中状态
具体代码如下:
$("[name='checkbox']:even").attr("checked",'true'); //若该方法无效,请改用prop
获取图片Title属性值
5.提取多张图片title属性的值
user.id_pic1 = $($("#shopregister .id_pic")[0]).attr("title");
user.id_pic2 = $($("#shopregister .id_pic")[1]).attr("title");
user.id_pic3 = $($("#shopregister .id_pic")[2]).attr("title");
AJAX提交过程中的进度显示
6.Ajax提交时展示进度指示图片
$.ajax({
type: 'POST',
url: configManager.RequstUrl + "/api/user/createstore",
data: postdata,
beforeSend:function(){ $("#waitingupload").removeClass("heisebghid").addClass("heisebg");}
}).done(function (data) {
$("#waitingupload").removeClass("heisebg").addClass("heisebghid");
if ("success" == data.state) {
//服务端成功
}
else {
//服务端失败
}
}).fail(function () {
//ajax请求失败
});
期望本文分享的内容能对JavaScript编程有所帮助。
作者最新文章
JS处理含Emoji或中文的字符串转数组乱码问题
2026-11-05 16:12:28
JS怎么使用展开运算符合并对象
2026-11-05 14:42:18
ES6+环境下判断JS对象为空的简洁写法
2026-11-05 12:12:23
怎么通过replacer函数自定义JS中JSON的格式化输出
2026-11-05 11:19:44
JS正则表达式基础:字面量与RegExp构造函数的区别及常用元字符
2026-11-05 11:16:58
