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

使用普通Javascript通过AJAX提交表单,而不使用Jquery get checked单选按钮值

的方法如下:

  1. 首先,获取表单元素和单选按钮元素的引用。可以使用document.getElementById()方法通过元素的ID获取引用,或者使用document.querySelector()方法通过选择器获取引用。
代码语言:txt
复制
var form = document.getElementById('myForm');
var radioButton = document.querySelector('input[name="myRadioButton"]:checked');
  1. 创建一个XMLHttpRequest对象,用于发送AJAX请求。
代码语言:txt
复制
var xhr = new XMLHttpRequest();
  1. 设置请求的方法、URL和异步标志。
代码语言:txt
复制
xhr.open('POST', 'your-url', true);
  1. 设置请求头,指定请求的内容类型。
代码语言:txt
复制
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  1. 创建一个FormData对象,并将表单数据添加到其中。
代码语言:txt
复制
var formData = new FormData(form);
  1. 获取单选按钮的值,并将其添加到FormData对象中。
代码语言:txt
复制
formData.append('radioButtonValue', radioButton.value);
  1. 监听XMLHttpRequest对象的状态变化事件,并处理响应。
代码语言:txt
复制
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 处理响应数据
  }
};
  1. 发送AJAX请求,将FormData对象作为参数传递。
代码语言:txt
复制
xhr.send(formData);

完整的代码示例:

代码语言:txt
复制
var form = document.getElementById('myForm');
var radioButton = document.querySelector('input[name="myRadioButton"]:checked');

var xhr = new XMLHttpRequest();
xhr.open('POST', 'your-url', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

var formData = new FormData(form);
formData.append('radioButtonValue', radioButton.value);

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 处理响应数据
  }
};

xhr.send(formData);

这种方法使用普通的JavaScript实现了通过AJAX提交表单,并获取了单选按钮的值。注意替换代码中的your-url为实际的请求URL。

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

相关·内容

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

为什么使用 jQuery 它能够兼容市面上主流的浏览器, IE 和 FireFox,Google 浏览器 处理 AJAX,创建异步对象是不同的, jQuery 能够使用一种方式在不同的浏览器创建 AJAX...$("#id,.class,标签名") jQuery基础知识总结 10.表单选择器 表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法无论是否存在表单,均可做出相应选择。...表单选择器是为了能更加容易地操作表单表单选择器是根据元素类型来定义的 注意:无论是否存在表单表单选择器都会根据相应的type属性做出选择。...表单选择器主要是根据 type进行定位的 只有type属性的标签才具有 表单选择器 <input type="radio...<em>通过</em> <em>jQuery</em> <em>AJAX</em> 方法,您能够<em>使用</em> HTTP <em>Get</em> 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON 同时能够把接收的数据更新 到 DOM 对象。

5.8K10

一文玩转jQuery+Ajax

开始 简介:jQuery 是一个轻量级的"写的少,做的多"的 JavaScript 库。...通过jQuery获取的对象是jQuery包装集对象,简称jQuery对象,只有jQuery对象才能使用jQuery提供的方法。...密码框选择器 $(":passwor") 查找所有密码框 单选按钮选择器 $(":radio") 查找所有的单选按钮 复选框选择器 $(":checkbox") 查找所有的复选框 提交按钮选择器 $(...内容") 设置元素的文本内容,包含html标签 val() 获取元素的value表单元素) val("") 设定元素的value表单元素) 表单元素:文本框text、密码框password...发送请求,没有参数,没有返回 $.get("请求地址") 发送请求,传递参数,没有返回 $.get('请求地址',{name:"岳泽以",age:25}) 发送请求,传参数,有返回 $.get(

4K21

jQuery笔试题汇总整理--2018

对象[下标]获取dom对象 将dom对象放入$("")中转为jQuery对象 6、jQuery中$.get()提交和$.post()提交的区别 1、$.get()使用GET方法来进行异步提交 $.post...()使用POST方法来进行异步提交 2、get请求方式将参数跟在url后进行传递用户可见 post请求则是作为http消息的实体内容发送给服务器,用户不可见 3、post传输数据比get大 4、get请求的数据会被浏览器缓存...ajax的缺点 1、ajax不支持浏览器back按钮。 2、安全问题 AJAX暴露了与服务器交互的细节。 3、对搜索引擎的支持比较弱。 4、破坏了程序的异常机制。 5、不容易调试。...16、AJAX最大的特点是什么。 Ajax可以实现动态刷新(局部刷新) 就是能在更新整个页面的前提下维护数据。...简而言之,XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,阻塞用户。

2.5K21

脚本语言知识总结.

5.键盘事件 使用场景:没有提交按钮,我们一般采用回车进行提交 Demo: window.onload = function(){ document.getElementById...选取所有的密码框元素 :radio      选取所有的单选框元素 :checkbox  选取所有的多选框元素 :submit     选取所有的提交按钮元素 :image      选取所有的图像按钮元素...具体选中元素 l 表单操作 :checked :selected 选中 表单选中元素 配合基本过滤选择器,缩小选中的范围 4.jQuery的DOM操作 使用jQuery的九种选择器可以基本选中需要操作的对象...² 使用val() 获得文本框、下拉框、单选框选中的value ² 测试能否通过 val() 设置单选框、下拉框的选中效果 <script type="text/<em>javascript</em>" src="....为了简化<em>Ajax</em>开发,<em>jQuery</em>提供了对$.<em>ajax</em>()进一步的封装方法$load、$<em>get</em>、$post。

5K130

JQuery快速入门

('cr');var $cr = $(cr); 此外,在使用多个不同的javascript库时,有可能会出现库之间的冲突,可以通过如下方式解决。...选取单选按钮、多选按钮、任意按钮 :image, :file 选取所有图像按钮,所有上传域 Tip:html元素的id包含#,(,]等特殊字符时,需要通过//进行转义,例如:<div id='id[...,<em>而</em>不是json<em>提交</em>,需要注意(通常调用接口,<em>使用</em>json<em>提交</em>;<em>而</em>页面的<em>ajax</em>请求,推荐<em>使用</em>form<em>提交</em>,会比较简单)。...对于<em>jQuery</em>中的事件来说,其均<em>使用</em>事件冒泡机制,<em>而</em>不支持时间捕获机制(可以用原生js)。...()方法来阻止元素的默认行为,常用与a链接元素和submit<em>表单</em><em>提交</em>行为。

2.6K100

7-2.表单-HTML基础

单选框示例1.png Ⅱ.例2-checked属性 通过checked属性实现在默认情况下,选中哪一个单选框。 <!...2.name属性 (1)添加name属性 在上述两个例子中,我都使用了name属性,但和我去掉name属性的效果一样,但是通过点击单选框会发现。...1.button-普通按钮 在HTML中,button-普通按钮一般情况下都是配合JavaScript来进行各种操作。...普通按钮示例1.png ? 普通按钮示例1-1.png 2.submit-提交按钮 在HTML中,submit-提交按钮一般用来给服务器提交数据,它其实可以看成特殊的普通按钮。...5.总结 三种按钮虽然从外观上看起来是一样的,但是实际功能却是样的。 普通按钮:一般情况下都是配合 JavaScript来进行各种操作的。 提交按钮:一般都是用来给服务器提交数据的。

2.2K21

Django之json、Ajax简介及实例介绍

里面有一对对 key value 与常规表单提交不一样的是:常规表单一般会提交带有name的按钮控件,serialize()函数不会序列化带有name的按钮控件。更多详情请点击这里。...()函数的返回为String类型,返回将表单元素编码后的可用于表单提交的文本字符串。...=1&hobby=2 alert( $(":text, select, :checkbox").serialize() ); serialize()函数通常用于将表单内容序列化,以便通过AJAX方式提交...XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest...的send()方法来异步的提交这个"表单".比起普通ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.

6.6K20

2022年11月23日——jQuery——T1(基础选择器与表单选择器)

']" ---- 本博客文章使用者为移动2112班,注意重点内容回顾 jQuery简述 为了解决开发过程中的兼容性问题,产生了许多JavaScript库,目前被频繁使用JavaScript库包括 jQuery...其中使用最广泛的JavaScrip库是jQuery, 是于2006年创建的一个JavaScript库 集 JavaScript、CSS、DOM 和 Ajax 于一体的强大框架体系。...表单选择器是除了基础选择器的id、class、element之外用的比较多的选择器,一般在填写注册信息的时候会使用到。...表单选择器最常用示例:"input[name='userName']" 语法解析:input就是form表单的输入框,毕竟input肯定是个元素集合,那么,我们使用[]来获取集合中的内容,一般我们表单提交都会添加...name的属性,所以我们直接使用name的属性来定位我们需要处理的表单内容,通过这个放来来最终校验表单的数据格式是否正确。

5.6K10

Ajax同样重要的jQuery(1)

对象的方法 // 通过访问jQuery对象下标0 元素,获得DOM对象 var dom1 = $jQueryObject[0]; // 转换jQuery对象为DOM对象 var dom2 = $jQueryObject.get...但是我们可以使用jQuery提供方法,将DOM对象通过jQuery()函数包装成为jQuery对象,同样我们可以把jQuery对象转化成DOM对象。...选取所有的密码框元素 :radio 选取所有的单选框元素 :checkbox 选取所有的多选框元素 :submit 选取所有的提交按钮元素 :image 选取所有的图像按钮元素 :reset 选取所有重置按钮元素...button 添加 点击事件,提交form表单 <script type="text/<em>javascript</em>" src=".....⑨:<em>表单</em>对象属性过滤选择器 选取<em>表单</em>元素属性的过滤选择器 :enabled 选取所有可用元素 :disabled 选取所有不可用元素 :<em>checked</em> 选取所有被选中的元素,如<em>单选</em>框、复选框 :selected

10K60

JavaWeb01轻松掌握HTML(Java真正的全栈开发)

> 属性: action:规定提交表单时向何处发送表单数据. method:规定提交方式;一般取值POST或GET POST与GET区别: 1.get方式只能携带少量数据,post可以携带大数据 2.get...-- input 标签 type=”radio“ 时 为单选框或者单选按钮 name:规定单选框的名称,通过name进行数据传递,分组。 value:实际上提交的数据。 checked: 默认选择。...-- input 标签 type=”radio“ 时 为单选框或者单选按钮 name:规定单选框的名称,通过name进行数据传递,分组。 value:实际上提交的数据。 checked: 默认选择。...常用属性: action:用于规定提交表单时向何处发送表单数据,今天细讲,以后肯定用. method:用于规定提交的方式.一般取值 POST或GET,今天大概了解一下,以后细讲. name...关于POST与GET方式区别: 1.get方式只能少量数据,post可以携带大数据. 2. get方式提交时,数据会在地址栏上显示,安全性差.Post方式提交不会在地址栏上显示数据,更加安全. 2.input

5.2K50

Django---Ajax

与常规表单提交不一样的是:常规表单一般会提交带有name的按钮控件,serialize()函数不会序列化带有name的按钮控件。更多详情请点击这里。...1 jQueryObject.serialize( ) 返回 serialize()函数的返回为String类型,返回将表单元素编码后的可用于表单提交的文本字符串。...=1&hobby=2 alert( $(":text, select, :checkbox").serialize() ); serialize()函数通常用于将表单内容序列化,以便通过AJAX方式提交...XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest...的send()方法来异步的提交这个"表单".比起普通ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.

4.8K101

day40_jQuery学习笔记_01

day01: jQuery基础 --> 选择器、属性和CSS、文档处理 day02: jQuery高级 --> 筛选、事件、效果(动画)、ajax 一、jQuery 的介绍 1.1、JS类库 JavaScript...jQuery 使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供AJAX交互。...、使用Ajax以及其他功能 jQuery能够使用户的html页面保持代码和html内容分离 不用再在html里面插入一堆js来调用命令了,只需要定义id即可 jQuery提供API让开发者编写插件,有许多成熟的插件可供选择... ,存在浏览器兼容问题,没意义 :button         获得所有普通按钮  或  示例代码如下: 08-表单过滤选择器...-- 默认不是普通按钮,而是提交按钮,需要进行设置 -->                     <input type="submit" value="<em>提交</em><em>按钮</em>"/

6.6K20

jQuery 升级踩坑大全

正确的做法应该是 $('input').val(); //获取input表单现在所输入的 $('input').val('helloworld'); //设置input表单输入的 到底是获取还是设置...正确的做法应该是 $('input').prop('checked', true); //把单选框设为选中状态 $('input').prop('checked'); //获取单选框是不是被选中了,返回...返回true/false,是否被选中,随状态改变改变 var v2 = $('input').attr("checked"); //返回"checked",这是你设置在标签上的,不会变 var v3...or button in IE 6/7/8 改变input的表单的type属性,你可以直接把文本框改成单选框,改成多选框等等。...prop的地方使用了attr var keng4 = $("input#c").attr("checked", true); //使用attr获取property的,正确的是应该使用 .val

3.8K90
领券