jquery获取input选中值,jquery获取radio选中值,jquery获取select选中值,jquery获取checkbox选中值,jquery使用ajax异步提交表单数据

站长软件开发11个月前技术分享235
jquery获取input选中值,jquery获取radio选中值,jquery获取select选中值,jquery获取checkbox选中值,jquery使用ajax异步提交表单数据

jquery获取input值:

//<input name="myinput"/>
var inputValues = $('input[name="myinput"]').val();//利用name属性获取input值,更方便,也便于后面修改的时候赋值
$('input[name="myinput"]').val(111);//为name为myinput的input赋值

jquery获取radio选中值:

//<input type="radio" name="myradio" value="1" />
//<input type="radio" name="myradio" value="2" />
$('input[name="myradio"]:checked').val();//获取radio选中的值
$("input[name='myradio'][value=2]").attr("checked",true);//让name=myradio且value等于2的radio选中

jquery获取select选中值:

//<select name="myselect"><option value="1"></option><option value="2"></option></select>
$("select[name='myselect'] option[value='1']").attr("selected", true); //设置select选中的option
$("select[name='myselect']").val();//获取select选中值

jquery获取checkbox选中值:

//<input type="checkbox" name="mycheckbox" value="1"/>苹果 
//<input type="checkbox" name="mycheckbox" value="2"/>橘子 
//<input type="checkbox" name="mycheckbox" value="3"/>梨子 
//<input type="checkbox" name="mycheckbox" value="4"/>香蕉
var checked=[];//定义一个数组
$('input[name="mycheckbox"]:checked').each(function(){//遍历每一个名字为nodes的复选框,其中选中的执行函数
    checked.push($(this).val());//将选中的值添加到数组checked中
});

jquery使用ajax异步提交表单数据:

<form name="myform" method="post">
     <ul>
     <li class="l1">用户名:</li>
     <li class="l2"><input type="text" name="name"/></li>
     <li class="l1">密码:</li>
     <li class="l2"><input type="text" name="password"/></li>
     <li class="l1">类型:</li>
     <li class="l2">
         <select name="leixing">
    		<option value="0">选择类型</option>
    		<option value="1">管理员</option>	
    		<option value="2">审核员</option>	
         </select>
     </li>
     <li class="l1">是否毕业:</li>
     <li class="l2">
         <label>
             <input name="denglu" type="radio" value="1" /> <strong>否</strong>
        </label>
        <label>
            <input name="denglu" type="radio" value="2"/> <strong>是</strong>
         </label>
     </li>
     
     <li class="l3"><input type="submit" value="保存"/></li>
     </ul>
 </form>
//以上面form表单为例
$('form').submit(function(event) {
        // 阻止表单提交默认行为
        event.preventDefault();
        // 获取表单数据
        var formData = $(this).serialize();//此处内容对应表单里面的input (name:value)
        $.ajax({
          url: 'https://www.you_api.com/api',
          type: 'POST',
          data: formData,
          success: function(data) {
            // 处理成功响应
            consoel.log(data);
            if(data.code==200){
                
            }else{
                
            }
          },
          error: function(xhr, status, error) {
            // 处理错误响应
            console.log(xhr.responseText);
          }
        });
});



联系站长:

相关文章

js把数字格式化为千分位兼容版,兼容小数(8,888.22)

js把数字格式化为千分位兼容版,兼容小数(8,888.22)

js把任意数字格式化为千分位/**  * 格式化为千分位  * @param num 当前值字符串  * @ret...

js获取本月,本年,近一月,近3月,近1年的日期范围,获取近n月的日期范围

js获取本月,本年,近一月,近3月,近1年的日期范围,获取近n月的日期范围

js获取本月,本年,近一月,近3月,近1年的日期范围,获取近n月的日期范围function getnMonth(i) {   console.log(&quo...

css显示三行文字,溢出显示省略号

css显示三行文字,溢出显示省略号

css显示三行文字,溢出显示省略号(显示任意行,可以把数字3替换成其他数字):.text-wrap {   display: -webkit-box; &n...

uniapp富文本编辑器editor的使用,复制可用

uniapp富文本编辑器editor的使用,复制可用

关于uniapp富文本编辑器editor的使用,我会把HTML,css,js三部分代码都完整列出来,其实也是一个总结,因为官方教程有些不是很清楚,这里总结一下,方便大家使用:1、html部分:<...

vue history路由下,对ngnix服务配置修改防止出现404问题

vue history路由下,对ngnix服务配置修改防止出现404问题

打开配置文件: # 打开配置文件 vi /usr/local/nginx/conf/nginx.con 宝塔则点击域名在里面找到配置文件进去修改: 如果域名直接指向...

js实用函数之map()函数的使用,一分钟学会

js实用函数之map()函数的使用,一分钟学会

重点:map() 方法定义在JavaScript的Array中,它返回一个新的数组,数组中的元素为原始数组调用函数处理后的值。值得注意的是:1、map()函数不会对空数组进行检测;2、map...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。