个人学习整理
1、编写HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Gender</title>
</head>
<body onload="get_gender()">
<div>
性别: <input type="radio" name="gender" id="g_man" value="1">男
<input type="radio" name="gender" id="g_woman" value="0">女
<input type="radio" name="gender" id="g_none" value="-1">保密
<br>
<button onclick="get_sex()">提交</button>
<p id="p1"></p>
</div>
</body>
</html>
2、在<script></script>中编写JS--接收数据库（此处接收数据库中性别的接口省略，使用的是onload先获取人员的id再填写性别）
//获取数据库中性别信息
//使用ajax *** 作
function get_gender(){
//获取当前页面传过来的人员id
var urlParams=new URLSearchParams(location.search);
var $id=urlParams.get(id);
//1.获取异步对象
var xhr=new XMLHttpRequest();
//4.绑定监听,获取响应get方法
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
var result=xhr.responseText;
var $gender=JSON.parse(result);
if($gender.gender==1){
g_man.checked=true;
}else if($gender.gender==0){
g_woman.checked=true;
}else{
g_none.checked=true;
}
}
}
//2. 创建请求,打开链接
var url="../get_gender?id="+$uid;
xhr.open("get",url,true);
//3.发送请求
xhr.send(null);
}
3、编写JS-将人员性别传入数据库
function get_sex(){
// 获取本页面的人员id
var urlParams=new URLSearchParams(location.search);
var $id=urlParams.get("id");
//ajax--post方法
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
var result=xhr.responseText;
console.log(result);
}
}
xhr.open("post","../get_gender",true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
var gender="";
if(g_man.checked){
p1.innerHTML=g_man.value;
gender=g_man.value;
}else if(g_woman.checked){
p1.innerHTML=g_woman.value;
gender=g_woman.value;
}else{
p1.innerHTML=g_none.value;
gender=g_none.value;
}
var formdata="id="+$id+"&gender="+gender;
xhr.send(formdata);
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）