HTML中获取input中单选按钮radio数据(性别例子)
个人学习整理
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);
}
HTML中获取input中单选按钮radio数据(性别例子)的更多相关文章
- js中获取input中所输入的值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Android中获取网页表单中的数据实现思路及代码
在Android中获取网页里表单中的数据具体实现代码如下,感兴趣的各位可以参考过下哈,希望对大家有所帮助 MainActivity如下: 复制代码 代码如下: package cn.testjavas ...
- Android中获取网页表单中的数据
MainActivity如下: package cn.testjavascript; import java.util.StringTokenizer; import android.os.Bundl ...
- koa 基础（十）原生node.js 在 koa 中获取表单提交的数据
1.app.js // 引入模块 const Koa = require('koa'); const router = require('koa-router')(); /*引入是实例化路由 推荐*/ ...
- 在SQL SERVER中获取表中的第二条数据
在SQL SERVER中获取表中的第二条数据, 思路:先根据时间逆排序取出前2条数据作为一个临时表,再按顺时排序在临时表中取出第一条数据 sql语句如下: select top 1 * from(se ...
- 在Express 中获取表单请求体数据
在Express 中获取表单请求体数据 获取 GET 请求参数 获取 POST 请求体数据 安装 配置 获取 GET 请求参数 Express 内置了一个 API , 可以直接通过 req.query ...
- js技术之如何在JS中获取input的值
在JavaScript中获取input元素value的值: 方法一:var variations_number = $("#input的id名").val(); 1 <!DO ...
- 记录一次bug解决过程：velocity中获取url中的参数
一.总结 在Webx的Velocity中获取url中参数:$rundata.getRequest().getParameter('userId') 在Webx项目中,防止CSRF攻击(Cross-si ...
- 在弹框中获取foreach中遍历的id值，并传递给地址栏（方法2）
1.php有时候我们需要再弹框中获取foreach中遍历的数据(例如id),在弹框中点击按钮并传递给地址栏跳转.那么应该怎么做呢.第二种方法. 2. 可以在弹框中给出一个input hidden 点击 ...
随机推荐
- 51nod1127【尺取】
思路: 尺取,写挫了,debug了半天. #include <bits/stdc++.h> using namespace std; typedef long long LL; const ...
- .NET CORE之API日志收集
我们在构建WEBAPI项目时,通常需要构建一个全局的记录API 请求和返回 的功能,在WEBAPI框架下 我们通过自定义一个DelegateHandler来实现这个功能, 在.NET CORE框架下已 ...
- iOS 加载Viewcontroller的几种方法
// 一.根据StoryboardID(需要在Storyboard设置),通过ViewController所在的Storyboard来加载: UIStoryboard *storyboard = [U ...
- C++中的定位放置new(placement new)
一般来说,使用new申请空间时,是从系统的“堆”(heap)中分配空间.申请所得的空间的位置时根据当时的内存的实际使用情况决定的.但是,在某些特殊情况下,可能需要在程序员指定的特定内存创建对象,这就是 ...
- Codeforces Round #261 (Div. 2) D
Description Parmida is a clever girl and she wants to participate in Olympiads this year. Of course ...
- SPRING-BOOT系列之简介
来自:51CTO的学习视频,本博客作为一个知识点记录以及代码验证 spring boot 特点 1. 为基于spring的开发提供更快的入门体验 2. 创建可以独立运行的spring应用 3. 直接嵌 ...
- Win7系统出现提示： “Windows已遇到关键问题，将在一分钟后自动重新启动。”
1. 若用户在使用Win7系统时,遇到上述系统故障,建议重启电脑.等电脑开机自检一过,马上按键盘上的F8键,选择进入安全模式.在安全模式下,进行系统还原.其他的解决方法见下. 1.或者,在安全模式下, ...
- 504 Base 7 七进制数
给定一个整数,将其转化为7进制,并以字符串形式输出.示例 1:输入: 100输出: "202" 示例 2:输入: -7输出: "-10"注意: 输入范围是 [- ...
- 479 Largest Palindrome Product 最大回文数乘积
你需要找到由两个 n 位数的乘积组成的最大回文数.由于结果会很大,你只需返回最大回文数 mod 1337得到的结果.示例:输入: 2输出: 987解释: 99 x 91 = 9009, 9009 % ...
- MySQL FailOver(官方自带，free)
为什么 传统复制和GTIDs切换的缺点 当replication故障出现之后,最头疼是replication架构的调整 一旦master down了,就需要配置某一台slave作为master sla ...