首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何通过ajax xmlhttprequest从单选按钮发布所有选中的值

通过Ajax XMLHttpRequest从单选按钮发布所有选中的值,可以按照以下步骤进行:

  1. 首先,需要获取所有选中的单选按钮的值。可以通过以下代码来实现:
代码语言:txt
复制
var selectedValues = [];
var radioButtons = document.getElementsByName('radioButtonName');

for (var i = 0; i < radioButtons.length; i++) {
  if (radioButtons[i].checked) {
    selectedValues.push(radioButtons[i].value);
  }
}

上述代码中,radioButtonName是单选按钮的name属性值,通过getElementsByName方法获取所有具有相同name属性值的单选按钮,然后遍历判断每个单选按钮是否被选中,如果选中则将其值添加到selectedValues数组中。

  1. 接下来,需要创建一个XMLHttpRequest对象,并设置好请求的方法、URL和异步标志。可以使用以下代码:
代码语言:txt
复制
var xhr = new XMLHttpRequest();
var url = 'your_server_url';
var method = 'POST';
var async = true;

xhr.open(method, url, async);

上述代码中,your_server_url是服务器端接收请求的URL地址,method是请求的方法,这里使用POST方法,async表示是否异步发送请求,设置为true表示异步。

  1. 然后,需要设置请求头和发送请求的数据。可以使用以下代码:
代码语言:txt
复制
xhr.setRequestHeader('Content-Type', 'application/json');
var data = JSON.stringify(selectedValues);

xhr.send(data);

上述代码中,通过setRequestHeader方法设置请求头的Content-Type为application/json,表示请求的数据类型为JSON格式。然后,使用JSON.stringify方法将selectedValues数组转换为JSON字符串,并通过send方法发送请求。

  1. 最后,需要监听XMLHttpRequest对象的状态变化,并处理响应结果。可以使用以下代码:
代码语言:txt
复制
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      // 请求成功
      var response = JSON.parse(xhr.responseText);
      // 处理响应结果
    } else {
      // 请求失败
      // 处理错误
    }
  }
};

上述代码中,通过onreadystatechange事件监听XMLHttpRequest对象的状态变化,当readyStateXMLHttpRequest.DONE时表示请求已完成。如果status为200表示请求成功,可以通过responseText获取响应结果,并进行相应的处理。如果请求失败,可以根据具体情况进行错误处理。

以上就是通过Ajax XMLHttpRequest从单选按钮发布所有选中的值的步骤。在实际应用中,可以根据具体需求进行适当的修改和扩展。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

全网最新、最全的jQuery核心知识,你真的不想点开看看嘛?

$("标签名称") 9.2 所有选择器 所有选择器:选取页面中所有的DOM对象 $("*") 9.3 组合选择器 组合选择器是多个被选中对象间使用逗号隔开后形成的选择器,可以组合 id、class、标签名等...表单选择器是为了能更加容易地操作表单, 表单选择器是根据元素类型来定义的 注意:无论是否存在表单,表单选择器都会根据相应的type属性值做出选择。...语法格式 : $(":type属性值") 例如: $(":text")选取所有的单行文本框 $(":password")选取所有的密码框 $(":radio")选取所有的单选框 $(":checkbox...通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON 同时能够把接收的数据更新 到 DOM 对象。...dataType:表示期望从服务端返回的数据格式。当我们使用 $.ajax() 发送请求时,会把 ​ dataType的值发送给服务端。

5.9K10

jQuery笔试题汇总整理--2018

选择所有tr元素的最后一个 表单选择器:如:$(":input")选择所有的表单输入元素 $(":text")选择所有的text的input元素 4、jQuery的美元符号$有什么作用?...可以用attr()获取和设置元素属性 removeAttr()方法来删除元素属性 10、如何来设置和获取HTML和文本的值?...siblings()获取匹配元素前后的所有同辈元素 12、radio单选组的第二个元素为当前选中的值,该怎么去取 $('input[type=radio]')[1].checked=true 13、什么是...ajax的缺点 1、ajax不支持浏览器back按钮。 2、安全问题 AJAX暴露了与服务器交互的细节。 3、对搜索引擎的支持比较弱。 4、破坏了程序的异常机制。 5、不容易调试。...通过XMLHttpRequest对象,Web开发人员可以在页面加载以后进行页面的局部更新。

2.5K21
  • 一个小时学会jQuery

    ") //所有选中的节点 $("select option:selected") //select中所有选中的option节点 $(":input") //匹配所有 input, textarea,...select 和 button 节点 $(":text") //所有的单行文本框 $(":password") //所有密码框 $(":radio") //所有单选按钮 $(":checkbox") /.../所有复选框 $(":submit") //所有提交按钮 $(":reset") //所有重置按钮 $(":button") //所有button按钮 $(":file") //所有文件域 4.5、筛选与查找...当鼠标指针从节点上移开时触发事件 $(window).keydown() //当键盘或按钮被按下时触发事件 $(window).keypress() //当键盘或按钮被按下时触发事件,每输入一个字符都触发一次...$.ajax函数返回他创建的XMLHttpRequest对象。通常jQuery只在内部处理并创建这个对象,但用户也可以通过xhr选项来传递一个自己创建的xhr对象。

    18.6K71

    脚本语言知识总结.

    radio      选取所有的单选框元素 :checkbox  选取所有的多选框元素 :submit     选取所有的提交按钮元素 :image      选取所有的图像按钮元素 :reset...:enabled  选取所有可用元素 :disabled  选取所有不可用元素 :checked  选取所有被选中的元素,如单选框、复选框 :selected  选取所有被选中项元素,如下拉列表框...l 表单操作 :checked :selected 选中 表单选中元素 配合基本过滤选择器,缩小选中的范围 4.jQuery的DOM操作 使用jQuery的九种选择器可以基本选中需要操作的对象,但是为了提高...(content) 设置文本内容 l 文本框、下拉列表框、单选框 选中的元素值 val() 读取元素value属性 val(content) 设置元素value属性 练习3: ² 传智播客...  获取div中 html和text 对比 ² 使用val() 获得文本框、下拉框、单选框选中的value ² 测试能否通过 val() 设置单选框、下拉框的选中效果 <script

    5K130

    JQuery Ztree 树插件配置与应用小结

    设置 zTree 的节点上是否显示 checkbox / radio 默认值: false 参数值:true / false 分别表示 显示 / 不显示 复选框或单选框 setting 举例:需要显示...(参考: setting.edit.drag.isCopy / setting.edit.drag.isMove) 5、可以通过编辑按钮修改 name 属性。 6、可以通过删除按钮删除节点。...treeIdString zTree 的 DOM 容器的 id 返回值JSON zTree 对象,提供操作 zTree 的各种方法,对于通过 js 操作 zTree 来说必须通过此对象 function...2、默认情况下,按类似以下配置和初始化方式,调用该API,获取不到数据,因为全部节点都是没选中的,解决方案如下: 1)先通过ztreeObject.checkAllNodes(false) 取消所有节点的选中状态...(因为一开始全部节点都是没选中的,所以调用该API后,所有节点都是改变过状态的) 2)然后通过ztreeObject.getChangeCheckedNodes() 获取所有改变过状态的节点(所有节点

    7.3K40

    原生JS--Ajax

    --GET与POST的区别:     GET:--通过网址传递(放入url中),会将传递的数据放到网址上面,--名字=值&名字=值         --get方式容量小         --安全性低        ...--有缓存     POST:--不通过网址传递          --post容量较大,一般可达2G          --安全性相对较高          --没有缓存 原生Ajax的编写: Ajax...并不是同步 3.发送请求     oAjax.send(); 4.接收返回值     请求状态监控:onreadystatechange事件:当自己的Ajax与服务器之间有通讯时触发     主要通过...--返回值responseText:从服务器返回来的文本:oAjax.responseText           (返回的值是一个字符串,有时需要进一步处理成其他格式的形式)      oAjax.onreadystatechange...请求动态数据:如json文件     3.1--ajax返回值是一个字符串,可通过eval转换后来读取返回的数组/json数据         alert(str);         alert(typeof

    6.2K21

    前端成神之路-列表和表单

    表单域: ​ 他相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过他定义处理表单数据所用程序的url地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传送到后台服务器。...4. checked属性 表示默认选中状态。 较常见于 单选按钮和复选按钮。...男 这个单选按钮 5. input 属性小结 属性 说明 作用 type 表单类型 用来指定不同的控件类型 value 表单值 表单里面默认显示的文本 name 表单名字 页面中的表单很多,name主要作用就是用于区别不同的表单...checked 默认选中 表示那个单选或者复选按钮一开始就被选中了 2.2 label标签(理解) 目标: label标签主要目的是为了提高用户体验。 为用户提高最优秀的服务。...通过form表单域 目的: 在HTML中,form标签被用于定义表单域,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器。

    1.6K20

    AJAX

    这个功能当时并没有引起注意,直到2004年Gmail发布和2005年Google Map发布,才引起广泛重视。2005年2月,AJAX这个词第一次正式提出,指围绕这个功能进行开发的一整套做法。...从此,AJAX成为脚本发起HTTP通信的代名词,W3C也在2006年发布了它的国际标准。 具体来说,AJAX包括以下几个步骤。...创建AJAX对象 发出HTTP请求 接收服务器传回的数据 更新网页数据 概括起来,就是一句话,AJAX通过原生的XMLHttpRequest对象发出HTTP请求,得到服务器返回的数据后,再进行处理。...6、XMLHttpRequest对象的事件以及对应的事件监听接口 ? image.png 7、 前后端开发联调需要注意哪些事情?后端接口完成前如何 mock 数据?...8、点击按钮,使用 ajax 获取数据,如何在数据到来之前防止重复点击?

    2.3K50

    JavaWeb核心篇(6)——Ajax

    } }; 由于我们发送的是 GET 请求,所以需要在 URL 后拼接从输入框获取的用户名数据。...而我们在 第一步 绑定的匿名函数中通过以下代码可以获取用户名数据 // 获取用户名的值 var username = this.value; //this : 给谁绑定的事件,this就代表谁 而携带数据需要将...前后端需以 JSON 格式进行数据的传递;由于此功能是查询所有的功能,前端发送 ajax 请求不需要携带参数,而后端响应数据需以如下格式的 json 数据 环境准备 将 02-AJAX\04-资料\3...(function (resp) { }); 处理响应数据 在 then 中的回调函数中通过 resp.data 可以获取响应回来的数据,而数据格式如下 现在我们需要拼接字符串,将下面表格中的所有的...==但是有一个比较特殊,就是状态数据,如下图是页面内容 我们需要判断哪儿个被选中,再将选中的单选框数据赋值给 formData 对象的 status 属性,代码实现如下: let status = document.getElementsByName

    8.7K30

    Web阶段:第二十章:Ajax请求

    什么是Ajax请求? AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。...{ // 1、我们首先要创建XMLHttpRequest var xmlHttpRequest = new XMLHttpRequest(); // 2、调用open方法设置请求参数...(); alert("这是请求后面的代码"); } Jquery中的Ajax请求 $.ajax方法 url 请求的地址 type 请求的方式GET或POST data...请求的参数(发送给服务器的数据) 支持两种格式 一:name=value&name=value 二: { 属性名:值 } success 请求成功后响应的函数 dataType 服务器回传的数据类型...var data = $("#form01").serialize(); alert(data); //当我们点击这个按钮的时候,我们希望把表单中所有的表单项,

    1.1K30

    jQuery,和嵌入其中的Ajax

    选取单选按钮 点击元素 在事件中经常使用术语"触发"(或"激发")例如:"当您按下按键时触发 keypress 事件"。 ?...在页面中选取所有 元素: $("p") 实例 用户点击按钮后,所有 元素都隐藏: 实例 $(document).ready(function(){$("button").click(function...选取单选按钮 点击元素 jQuery 事件方法语法 在 jQuery 中,大多数 DOM 事件都有一个等效的jQuery 方法。...通过 jQuery AJAX 方法,您能够使用HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML或JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。...jQuery - AJAX load() 方法 jQueryload() 方法是简单但强大的 AJAX 方法。 load()方法从服务器加载数据,并把返回的数据放入被选元素中。

    3.1K20

    Ajax在jQuery中应用--jQuery基础知识点(5)

    XMLHttpRequest对象,以一种异步的方式,向服务器发送数据请求,并通过该对象接收请求返回的数据,从而完成人机交互的数据操作。...GET方式不适合传递数据量较大的数据 GET方式请求的历史信息会在浏览器的缓存中,有一定的安全风险 9. serialize()序列化表单,简化参数传值的方式 将所有选择的DOM元素转换成能随...例:$("#frmUserInfo").serialize(), //序列化表单数据 不足:如表单中有多选项被选中时,该方法只能传递一项的值 10. $.ajax([options])方法发送请求..."xml" }) $("#Button1").click(function() { //"姓名”按钮的单击事件 $.ajax({ success: function(data)....click(function() { //"性别”按钮的单击事件 $.ajax({ success: function(data) { //传回请求响应的数据

    1.8K31

    jQuery ajax() 方法

    jQuery Ajax 操作函数 jQuery 库拥有完整的 Ajax 兼容套件,其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。...[href]") 所有带有 href 属性的元素 [attribute=value] $("[href='#']") 所有 href 属性的值等于 "#" 的元素 [attribute!...='#']") 所有 href 属性的值不等于 "#" 的元素 [attribute$=value] $("[href$='.jpg']") 所有 href 属性的值包含以 ".jpg" 结尾的元素...$(":checked") 所有被选中的 input 元素 jQuery Ajax 实例 jQuery是一个轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript...好了,下面开始说jQuery里面功能最强的Ajax请求方法 $.ajax();   jQuery.ajax( options )  通过 HTTP 请求加载远程数据 这个是jQuery 的底层 AJAX

    2.5K60

    项目开发知识盲区记录

    ,因此在使用springboot的模板引擎进行渲染时,会报错误,解决方法如下: 从ajax的回调函数(success等)中取返回值 layui-table表复选框勾选的所有行数据获取 html网页什么样的字体最好看...,会多出来一个空格 $.ajax的dataType属性 layui如何设置单选框的选择状态 location.reload使得ajax请求发送不成功 layui设置数据表格的行高 ---- 解决ajax...请求下,后台页面跳转无效问题 ajax实际上是通过XMLHttpRequest来向服务器发送异步请求的,从服务器获取数据,然后使用JS来更新页面,这也就是常说的局部刷新实现方式,所以ajax请求之后,服务器返回的都是纯文本流...,会多出来一个空格 ---- $.ajax的dataType属性 dataType值如果为’json’,jquery就会把后端返回的字符串尝试通过JSON.parse()尝试解析为js对象。...如果不进行设置,那么默认为text,后端传过来一个JSON字符串,不会解析为JS对象,而是作为纯文本展示 ---- layui如何设置单选框的选择状态 attr()?

    6.9K32

    详细解读Jquery各Ajax函数:$.get(),$.post(),$.ajax(),$.getJSON()

    使用JSON相比传统的通过 GET、POST直接发送”裸体”数据,在结构上更为合理,也更为安全。至于jQuery的getJSON()函数,只是设置了JSON参数的 ajax()函数的一个简化版本。...下面是jQuery提供的所有函数(按照触发顺序排列如下): ajaxStart (全局事件) 开始新的Ajax请求,并且此时没有其他ajax请求正在进行 beforeSend (局部事件) 当一个Ajax...,   type: "POST" }); 一些你不得不知道的方法 写AJAX肯定离不开从页面获取相应的值。...在这里简单列举一些方法: val() val()函数可以返回表单组建的值,例如任何种类input的值。配合选择符操作,你可以轻易获取选项组、输入框、按钮等元素的值。...pass的密码框的值 $("input[name='save']:radio").val(); //返回名字为save的单选项的值 //以此类推 serialize() serialize函数可以帮你把表单对象的所有值都转换为字符串序列

    3.9K100

    JQuery-命令速查-CheatSheet

    extra arg when ajax finished/succeed .each()的使用 获取数据 substr 获得子字符串 得到选中的 option 的内容 控件相关 select...添加 option disable select 删除 select 里面所有 option Checkbox 勾选所有 Checkbox 得到 checkbox 的值 选中某 Checkbox...的同时取消选择其他所有 jQuery: Uncheck other checkbox on one checked 判断是否被选中 Toggle for editable of inputs 获取...要抽取的子串的起始下标。必须是数值。如果是负数,那么该参数声明从字符串的尾部开始算起的位置。也就是说,-1 指字符串中最后一个字符,-2 指倒数第二个字符,以此类推。 length 可选。...子串中的字符数。必须是数值。如果省略了该参数,那么返回从 stringObject 的开始位置到结尾的字串。

    9.7K30

    ajax 跨域请求api_java跨域请求的三种方法

    ---- 目录: (1)ajax跨域解决方案之代理机制实现原理 (2)ajax跨域解决方案之代理机制的代码实现 ---- (1)ajax跨域解决方案之代理机制实现原理 让ajax请求访问servlet,...可以让ajax请求跨域,通过直接本应用中的资源servlet,ajax可以不跨域访问本应用中的servlet,让java程序发送Get,Post请求,来访问2号服务器中的的servlet 用java...代码模拟浏览器的行为,就好比在浏览器地址栏输入地址敲回车一样 首先把架包导入:创建lib目录,复制进去 选中右键Add as library HttpClientSendGet: package com.bjpowernode.httpclient...= () => { if (xmlHttpRequest.readyState == 4) { // 这里也可以使用区间的方式,...> 点击按钮: 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/172579.html

    72840

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭
      领券