首页
学习
活动
专区
工具
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.8K10

jQuery笔试题汇总整理--2018

选择所有tr元素最后一个 表单选择器:如:$(":input")选择所有的表单输入元素 $(":text")选择所有的textinput元素 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.5K71

脚本语言知识总结.

radio      选取所有单选框元素 :checkbox  选取所有的多选框元素 :submit     选取所有的提交按钮元素 :image      选取所有的图像按钮元素 :reset...:enabled  选取所有可用元素 :disabled  选取所有不可用元素 :checked  选取所有选中元素,如单选框、复选框 :selected  选取所有选中项元素,如下拉列表框...l 表单操作 :checked :selected 选中单选中元素 配合基本过滤选择器,缩小选中范围 4.jQueryDOM操作 使用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.1K40

原生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.2K50

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.6K30

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

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); //当我们点击这个按钮时候,我们希望把表单中所有的表单项,

1K30

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网页什么样字体最好看...,会多出来一个空格 $.ajaxdataType属性 layui如何设置单选选择状态 location.reload使得ajax请求发送不成功 layui设置数据表格行高 ---- 解决ajax...请求下,后台页面跳转无效问题 ajax实际上是通过XMLHttpRequest来向服务器发送异步请求服务器获取数据,然后使用JS来更新页面,这也就是常说局部刷新实现方式,所以ajax请求之后,服务器返回都是纯文本流...,会多出来一个空格 ---- $.ajaxdataType属性 dataType如果为’json’,jquery就会把后端返回字符串尝试通过JSON.parse()尝试解析为js对象。...如果不进行设置,那么默认为text,后端传过来一个JSON字符串,不会解析为JS对象,而是作为纯文本展示 ---- layui如何设置单选选择状态 attr()?

6.8K32

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

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

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

3.5K100

AJAX 前端开发利器:实现网页动态更新核心技术

AJAX只是使用以下组合: 浏览器内置XMLHttpRequest对象(用于Web服务器请求数据) JavaScript和HTML DOM(用于显示或使用数据) AJAX是一个具有误导性名称技术。...AJAX工作原理 网页中发生事件(页面加载,按钮被点击) JavaScript创建XMLHttpRequest对象 XMLHttpRequest对象向Web服务器发送请求 服务器处理请求 服务器将响应发送回网页...AJAX - 服务器响应 在AJAX中,通过onreadystatechange属性、readyState属性、status属性和statusText属性来管理XMLHttpRequest对象状态和服务器响应...以下是一个展示如何使用AJAXXML文件中获取信息示例: 示例说明 当用户点击上面的 "获取 CD 信息" 按钮时,将执行 loadDoc() 函数。...(省略了其他名字) ' URL 获取 q 参数 q=ucase(request.querystring("q")) ' 如果 q 长度大于 0,则查找数组中所有提示 if len(q)>0

10100

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

70440

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券