個人學習整理
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 }