个人学习整理

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数据(性别例子)的更多相关文章

  1. js中获取input中所输入的值

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. Android中获取网页表单中的数据实现思路及代码

    在Android中获取网页里表单中的数据具体实现代码如下,感兴趣的各位可以参考过下哈,希望对大家有所帮助 MainActivity如下: 复制代码 代码如下: package cn.testjavas ...

  3. Android中获取网页表单中的数据

    MainActivity如下: package cn.testjavascript; import java.util.StringTokenizer; import android.os.Bundl ...

  4. koa 基础（十）原生node.js 在 koa 中获取表单提交的数据

    1.app.js // 引入模块 const Koa = require('koa'); const router = require('koa-router')(); /*引入是实例化路由 推荐*/ ...

  5. 在SQL SERVER中获取表中的第二条数据

    在SQL SERVER中获取表中的第二条数据, 思路:先根据时间逆排序取出前2条数据作为一个临时表,再按顺时排序在临时表中取出第一条数据 sql语句如下: select top 1 * from(se ...

  6. 在Express 中获取表单请求体数据

    在Express 中获取表单请求体数据 获取 GET 请求参数 获取 POST 请求体数据 安装 配置 获取 GET 请求参数 Express 内置了一个 API , 可以直接通过 req.query ...

  7. js技术之如何在JS中获取input的值

    在JavaScript中获取input元素value的值: 方法一:var variations_number = $("#input的id名").val(); 1 <!DO ...

  8. 记录一次bug解决过程：velocity中获取url中的参数

    一.总结 在Webx的Velocity中获取url中参数:$rundata.getRequest().getParameter('userId') 在Webx项目中,防止CSRF攻击(Cross-si ...

  9. 在弹框中获取foreach中遍历的id值，并传递给地址栏（方法2）

    1.php有时候我们需要再弹框中获取foreach中遍历的数据(例如id),在弹框中点击按钮并传递给地址栏跳转.那么应该怎么做呢.第二种方法. 2. 可以在弹框中给出一个input hidden 点击 ...

随机推荐

  1. 007--linux常用命令nginx和nfs服务

    作业: 集群搭建 1.部署nginx反向代理三个web服务,调度算法使用加权轮询: 2.所有web服务使用共享存储nfs,保证所有web都对其有读写权限,保证数据一致性: 一.nginx服务 1. 先 ...

  2. js遍历ajax回调函数返回值中的object对象

    function printObject(obj) {      //obj = {"cid":"C0","ctext":"区县& ...

  3. 洛谷 P4125 [WC2012]记忆中的水杉树【扫描线+set+线段树】

    我没有找到能在bzojAC的代码--当然我也WA了--但是我在洛谷过了,那就假装过了吧 minmax线段树一开始写的只能用min更新min,max更新max,实际上是可以互相更新的-- 首先看第二问, ...

  4. Firefox下载安装fireBug提示下载出错的解决方案

    火狐官方扩展中心在国外,国内可能访问某一节点出现了问题.所以可能扩展无法安装,并且扩展更新可能出现问题,导致启动检查扩展更新过慢影响启动.我们可以通过修改系统hosts文件加速访问.修改hosts文件 ...

  5. Ubuntu还是windows呢

    本来想把才换不久的电脑也换成Ubuntu,犹豫再三,还是把这个老电脑作为Ubuntu的主力机把,毕竟大屏幕看着也得劲 新电脑还是win10吧,毕竟现在速度还是刷刷的,等过几年速度降下来了,就换成Ubu ...

  6. swiper.js插件的使用

    swiper切换动画效果,需要先加载swiper.animate.min.js和animate.min.css. <!DOCTYPE html><html>    <he ...

  7. [已读]HTML5与CSS3设计模式

    我想说,不要被书名骗了,其实并没有涉及丁点h5与css3的内容,但是确实称得上比较详细的一本关于css的书.看它的页数就知道了,481~~ 今年上半年看完的,现在想想,觉得自己还是蛮拼的.内容会比较枯 ...

  8. idea使用Git提交代码时忽略指定文件或文件夹

    简述 使用idea编写代码并使用git作为版本控制器的时候,常常不需要提交配置文件以及一些其他不需要提交的文件,可以使用.ignore插件来在上传的时候忽略一些文件或文件夹. 安装 注意:安装完成之后 ...

  9. sql子查询的例子

    1.单行子查询        select ename,deptno,sal        from emp        where deptno=(select deptno from dept ...

  10. C#局部类型partial在定义实体类Model中的应用

    以前一直用继承类的方法,原来还可以这样 //例如:定义一个Person的实体类,用户ID(PersonId),姓名(Name),性别(Sex),年龄(Age),地址(Address),联系方式(Tel ...