HTML中获取input中单选按钮radio数据(性别例子)

个人学习整理

1、编写HTML

 1 <!doctype html>
 2 <html>
 3     <head>
 4     <meta charset="utf-8">
 5     <title>Gender</title>
 6     </head>
 7     <body onload="get_gender()">
 8         <div>
 9             性别: <input type="radio" name="gender" id="g_man" value="1">男
10             <input type="radio" name="gender" id="g_woman" value="0">女
11             <input type="radio" name="gender" id="g_none" value="-1">保密
12             <br>
13             <button onclick="get_sex()">提交</button>
14             <p id="p1"></p>
15         </div>
16     </body>
17 </html>

2、在<script></script>中编写JS--接收数据库（此处接收数据库中性别的接口省略，使用的是onload先获取人员的id再填写性别）

 1    //获取数据库中性别信息
 2    //使用ajax操作
 3    function get_gender(){
 4        //获取当前页面传过来的人员id
 5        var urlParams=new URLSearchParams(location.search);
 6        var $id=urlParams.get(id);
 7        //1.获取异步对象
 8        var xhr=new XMLHttpRequest();
 9        //4.绑定监听,获取响应get方法
10        xhr.onreadystatechange=function(){
11            if(xhr.readyState==4 && xhr.status==200){
12                var result=xhr.responseText;
13                var $gender=JSON.parse(result);
14                if($gender.gender==1){
15                     g_man.checked=true;
16                }else if($gender.gender==0){
17                     g_woman.checked=true;
18                }else{
19                     g_none.checked=true;
20                }
21             }
22        }
23        //2. 创建请求,打开链接
24         var url="../get_gender?id="+$uid;
25         xhr.open("get",url,true);
26        //3.发送请求
27         xhr.send(null);
28    }

3、编写JS-将人员性别传入数据库

 1 function get_sex(){
 2     // 获取本页面的人员id
 3     var urlParams=new URLSearchParams(location.search);
 4     var $id=urlParams.get("id");
 5     //ajax--post方法
 6     var xhr=new XMLHttpRequest();
 7     xhr.onreadystatechange=function(){
 8         if(xhr.readyState==4 && xhr.status==200){
 9             var result=xhr.responseText;
10             console.log(result);
11         }
12     }
13     xhr.open("post","../get_gender",true);
14     xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
15     var gender="";
16     if(g_man.checked){
17         p1.innerHTML=g_man.value;
18         gender=g_man.value;
19     }else if(g_woman.checked){
20         p1.innerHTML=g_woman.value;
21         gender=g_woman.value;
22     }else{
23         p1.innerHTML=g_none.value;
24         gender=g_none.value;
25     }
26     var formdata="id="+$id+"&gender="+gender;
27     xhr.send(formdata);
28 }

 

posted @ 2019-04-05 11:31  lcspring  阅读(8614)  评论(0)  编辑  收藏  举报