jquery序列化表单以及回调函数的使用示例

by admin on 2019年9月2日

复制代码 代码如下:

jquery 笔记:

jquery 笔记:

在开辟品种中,将前台的值传给后台,有的时候的JSP表单中的值有一五个,也会有全方位的值,若是此时二个个传,必定不是很好的不二等秘书技,所以使用jQuery提供的表单系列化方法,能够很好的缓和那个主题素材,同一时间能够封装成通用的函数,推行成功足以调用各自的回调函数,完结各自的效益。

<html>
<head>
</head>
<body>
<form name=”form1″>
<input type=”hidden” name=”page1″ class=”flau_u_ro”
value=”1″></input>
<input type=”hidden” name=”pageno” value=”1″></input>
<input name=”pagename” value=””></input>
<select name=’pageflag’>
<option value=’1′ >是</option>
<option value=’0′ selected=’selected’>否</option>
</select>
</form>
</body>
<script text=”text/javascript”
src=”jquery-1.8.2.js”></script>
</html>

复制代码 代码如下:

复制代码 代码如下:

代码如下:

体系化代码:

$(“input[name=’radio_name’]:checked”).val()
<input type=”radio” value=”1″ name=”radio_name” />1
<input type=”radio” value=”2″ name=”radio_name” />2
<input type=”radio” value=”3″ name=”radio_name” />3

$(“input[name=’radio_name’]:checked”).val()
<input type=”radio” value=”1″ name=”radio_name” />1
<input type=”radio” value=”2″ name=”radio_name” />2
<input type=”radio” value=”3″ name=”radio_name” />3

function queryUserInfo(actionUrl,formId,fun){ 
var params=new Object(); //声明数组 
$.each($("#"+formId).serializeArray(),function(index,param){ 
params[param.name] = param.value; //序列化表单 
}); 
params['time']=new Date(); //1 
$.ajax( { 
url : basePath+actionUrl, 
data : params,//没有1,可以这样写("#"+formId).serializeArray() 
type : 'POST', 
dataType:'json', 
async: false,//表示同步,等待服务端返回数据,才会执行后面的代码 
success : function(obj) { 
fun(actionUrl,formId,obj); 
}, 
error: function() { 
alert("访问异常"); 
} 
}); 
}

复制代码 代码如下:

网络的事物太乱了,何况jQuery区别版本可能写法不太一致,经过查找和做试验,下边写的是jQuery
1.3.2版本下的
jquery
radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其有关设置:
得到一组radio被入选项的值:var item =
$(‘input[name=items][checked]‘).val();

英特网的事物太乱了,何况jQuery分裂版本或者写法不太雷同,经过查找和抓实验,上面写的是jQuery
1.3.2版本下的
jquery
radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其有关设置:
赢得一组radio被入选项的值:var item =
$(‘input[name=items][checked]‘).val();

另一种方法:

$(“form[name=’form1′]”).not($(“input[type=’hidden’]”))
.not($(“input[class=’flau_u_ro’]”)).serialize();

获得select被入选项的公文
var item = $(”select[@name=items] option[@selected]“).text();
收获select被选中项的文本 :var item = $(”select[name=items]
option[selected]“).text(); 或
$(”select[name=items]“).find(”option:selected”).text();
select下拉框的第1个元素为最近选中值:$(‘#select_id’)[0].selectedIndex
= 1;
select下拉框value = ‘val’的因素为最近入选项:$(”select[name=items]
option[value=’val’]“).attr(”selected”,”selected”);
radio单选组的第一个因素为当下相中项
:$(‘input[@name=items]‘).get(1).checked = true;
或$(‘input[name=items]‘).attr(”checked”,1′);
radio的value =
‘val’的因素为当前相中项:$(‘input[name=items][value=’val’]‘).attr(”checked”,”checked”);
获取值:
文本框,文本区域:$(”#txt”).attr(”value”);
多选框checkbox:$(”input[name=’checkbox’:checked]“).each(function(){
var val = $(this).val();
});
单选组radio: $(”input[type=radio][checked]“).val();
下拉框select的value值: $(‘select’).val();
下拉框select选中的text值:$(”select”).find(”option:selected”).text();

收获select被选中项的文件
var item = $(”select[@name=items] option[@selected]“).text();
获得select被选中项的文本 :var item = $(”select[name=items]
option[selected]“).text(); 或
$(”select[name=items]“).find(”option:selected”).text();
select下拉框的第贰个因素为当前选中值:$(‘#select_id’)[0].selectedIndex
= 1;
select下拉框value = ‘val’的因素为当前选中项:$(”select[name=items]
option[value=’val’]“).attr(”selected”,”selected”);
radio单选组的第3个要素为眼下当选项
:$(‘input[@name=items]‘).get(1).checked = true;
或$(‘input[name=items]‘).attr(”checked”,1′);
radio的value =
‘val’的要素为近日当选项:$(‘input[name=items][value=’val’]‘).attr(”checked”,”checked”);
获取值:
文本框,文本区域:$(”#txt”).attr(”value”);
多选框checkbox:$(”input[name=’checkbox’:checked]“).each(function(){
var val = $(this).val();
});
单选组radio: $(”input[type=radio][checked]“).val();
下拉框select的value值: $(‘select’).val();
下拉框select选中的text值:$(”select”).find(”option:selected”).text();

function setUserInfo(actionUrl,userid,username,fun){ 
var params=new Object(); //声明数组 
params['user.id']=userid; 
params['user.name']=username; 
$.ajax( { 
url : actionUrl, 
data : params,//没有1,可以这样写("#"+formId).serializeArray() 
type : 'POST', 
dataType:'json', 
async: false,//表示同步,等待服务端返回数据,才会执行后面的代码 
success : function(obj) { 
fun(actionUrl,formId,obj);//调用回调的函数 
}, 
error: function() { 
alert("访问异常"); 
} 
}); 
}

chrome下决定台运维代码,输出:

调节表单成分:
文本框,文本区域:$(”#txt”).attr(”value”,”); //清空内容
$(”#txt”).attr(”value”,’11′); //填充内容
多选框checkbox:
checkbox的第一个成分被打勾:$(”input[name=items]“).get(1).checked =
true; //打勾
$(”input[name=items]“).get(1).checked = false; //不打勾
checkbox的value=’val’的成分前打勾:$(”input[name=item][value=’val’]“).attr(”checked”,true);或$(”input[name=item][value=’val’]“).attr(”checked”,”checked”);
if($(”input[name=item][value=’val’]“).attr(‘checked’)==true)
//决断是不是业已打勾
单选组radio:
$(”input[type=radio]“).attr(”checked”,’2′);//设置value=2的品种为如今选中项
下拉框select:
$(”#sel”).attr(”value”,’-sel3′);//设置value=-sel3的种类为当前选中项
$(”<option value=’1′>1111</option><option
value=’2′>2222</option>”).appendTo(”#sel”)//增多下拉框的option
$(”#sel”).empty();//清空下拉框

调控表单成分:
文本框,文本区域:$(”#txt”).attr(”value”,”); //清空内容
$(”#txt”).attr(”value”,’11′); //填充内容
多选框checkbox:
checkbox的第三个要素被打勾:$(”input[name=items]“).get(1).checked =
true; //打勾
$(”input[name=items]“).get(1).checked = false; //不打勾
checkbox的value=’val’的要素前打勾:$(”input[name=item][value=’val’]“).attr(”checked”,true);或$(”input[name=item][value=’val’]“).attr(”checked”,”checked”);
if($(”input[name=item][value=’val’]“).attr(‘checked’)==true)
//判定是或不是曾经打勾
单选组radio:
$(”input[type=radio]“).attr(”checked”,’2′);//设置value=2的品类为近期当选项
下拉框select:
$(”#sel”).attr(”value”,’-sel3′);//设置value=-sel3的品种为日前当选项
$(”<option value=’1′>1111</option><option
value=’2′>2222</option>”).appendTo(”#sel”)//增加下拉框的option
$(”#sel”).empty();//清空下拉框

“page1=1&pageno=1&pagename=&pageflag=0”

jQuery获取Radio选择的Value值
代码$(“input[name=’radio_name’][checked]”).val();
//选取被选中Radio的Value值
$(“#text_id”).focus(function(){//code…}); //事件
当对象text_id获取关节时接触
$(“#text_id”).blur(function(){//code…}); //事件
当对象text_id失去主题时接触
$(“#text_id”).select(); //使文本框的Vlaue值成选中状态
$(“input[name=’radio_name’][value=’要选中Radio的Value值'”).
attr(“checked”,true); //根据Value值设置Radio为当选状态

jQuery获取Radio选择的Value值
代码$(“input[name=’radio_name’][checked]”).val();
//采用被选中Radio的Value值
$(“#text_id”).focus(function(){//code…}); //事件
当对象text_id获取关节时接触
$(“#text_id”).blur(function(){//code…}); //事件
当对象text_id失去大旨时接触
$(“#text_id”).select(); //使文本框的Vlaue值成选中状态
$(“input[name=’radio_name’][value=’要选中Radio的Value值'”).
attr(“checked”,true); //依据Value值设置Radio为当选状态

代码如下: html head /head body form
name=”form1″ input type=”hidden” name=”page1″ class=”flau_u_ro”
value=”1″/input input type=”hidden” name=”pageno”
value=”1″/inp…

jQuery获取CheckBox选择的Value值
$(“input[name=’checkbox_name’][checked]”);
//采用被选中CheckBox成分的群集 要是您想获得Value值你供给遍历这些集合
$($(“input[name=’checkbox_name’][checked]”)).
each(function(){arrChk+=this.value
+’,’;});//遍历被选中CheckBox成分的集合 获得Value值
$(“#checkbox_id”).attr(“checked”);
//获取二个CheckBox的情事(有没有被入选,重回true/false)
$(“#checkbox_id”).attr(“checked”,true);
//设置一个CheckBox的情景为当选(checked=true)
$(“#checkbox_id”).attr(“checked”,false);
//设置一个CheckBox的图景为不选中(checked=false)
$(“input[name=’checkbox_name’]”).attr
(“checked”,$(“#checkbox_id”).attr(“checked”));//依据3,4,5条,你可以深入分析深入分析那句代码的意味
$(“#text_id”).val().split(“,”); //将Text的Value值以’,’分隔
再次回到二个数组
地点的这么些操作,其实就是jQuery选用器的利用,希望咱们对jQuery选拔器方面包车型大巴文化要掌握扎实。

jQuery获取CheckBox选择的Value值
$(“input[name=’checkbox_name’][checked]”);
//选拔被选中CheckBox成分的会集 假使您想博得Value值你须求遍历这么些集合
$($(“input[name=’checkbox_name’][checked]”)).
each(function(){arrChk+=this.value
+’,’;});//遍历被选中CheckBox成分的集结 得到Value值
$(“#checkbox_id”).attr(“checked”);
//获取三个Check博克斯的图景(有未有被入选,重返true/false)
$(“#checkbox_id”).attr(“checked”,true);
//设置二个Check博克斯的事态为当选(checked=true)
$(“#checkbox_id”).attr(“checked”,false);
//设置一个CheckBox的情景为不选中(checked=false)
$(“input[name=’checkbox_name’]”).attr
(“checked”,$(“#checkbox_id”).attr(“checked”));//根据3,4,5条,你能够深入分析深入分析那句代码的情致
$(“#text_id”).val().split(“,”); //将Text的Value值以’,’分隔
再次回到贰个数组
上边的这么些操作,其实就是jQuery选择器的选拔,希望大家对jQuery采取器方面包车型大巴知识要调节扎实。

您大概感兴趣的稿子:

  • jQuery操作DOM之获得表单控件的值
  • jquery获取元素值的格局(常见的表单成分)
  • 什么利用Jquery获取Form表单中被入选的radio值
  • JQUEEvoqueY获取form表单值的代码
  • jquery获取input表单值的代码
  • Jquery
    获取表单text,areatext,radio,checkbox,select值的代码
  • jquery设置text的值示例(设置文本框 DIV
    表单值)
  • jQuery-serialize()输出种类化form表单值的措施
  • jQuery对表单成分的取值和赋值操作代码
  • jQuery依据表单name获取值的法子

笔记: 复制代码 代码如下:
$(“input[name=’radio_name’]:checked”).val() input type=”radio”
value=”1″ name=”radio_name” /1 input type=”radio” value=”2″
name=”radi…

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图