JS实现异步提交
- 什么是XMLHttpRequest?
XMLHttpRequest对象用于在后台与服务器交换数据
- XMLHttpRequst的作用
在不重新加载页面的情况下更新网页
在页面已加载后从服务器请求数据
在页面已加载后从服务器接收数据
在后台向服务器发送数据
- 若出现Failed to execute 'setRequestHeader' on 'XMLHttpRequest': The object's state must be OPENED.
- 设置请求头必须在open打开之后,send之前
- JS实现异步提交
<!--
onchange触发事件必须满足两个条件:
(1)当前对象属性发生改变
(2)当前对象失去焦点
-->
<input type="text" name="username" id="username" placeholder="请输入用户名" >var username = document.getElementById("username");
/**
* 获取XMLHttpRequestObject对象
*/
function getXMLHttpRequestObject(url, param) {
//创建XMLHttpRequest对象
var xmlhttp;
//为了应对所有现代浏览器,检查是否支持XMLHttpRequst,若支持则创建XMLHttpRequest对象,若不支持,则创建ActiveXObject对象
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest(); } else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//规定请求的类型、URL、是否异步请求
xmlhttp.open('get', url + '?' + param, true);
//添加请求头必须在open打开之后,send之前
//想请求添加Http请求头
xmlhttp.setRequestHeader("Context-type", "application/x-www-form-urlencoded");
//将请求发送到服务器
xmlhttp.send(); return xmlhttp;
}/**
* 验证用户名
*/
username.onchange = function () { var usernameValue = username.value;
var param = "username=" + usernameValue
var url = "/register";
var xmlhttp = getXMLHttpRequestObject(url, param);
//设置监听函数,若为true时,在事件中的就绪状态时执行函数
xmlhttp.onreadystatechange = function () {
//判断请求是否成功,每当readyState属性改变时,就会调用该函数
//readyState的状态:0(请求未初始化)、1(服务器连接已建立)、2(请求已接收)、3(请求处理中)、4(请求已完成,且响应已就绪)
//status的状态:200(ok),404(未找到页面)
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { //获取服务器的响应,通过
//responseText:获取字符串形式的响应数据
//responseXML:获取XML形式的响应数据
console.log(xmlhttp.responseText);
}
} }@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String username = req.getParameter("username");
resp.setContentType("text/html;charset=utf-8");
PrintWriter out = resp.getWriter();
out.println("我已经收到你的来信了");
}
JS实现异步提交的更多相关文章
- jquery.form.js 使用以及问题(表单异步提交)
标注:我引用的js后报错 原因:是引用的js有冲突 我引用了两便jQuery: 转载:https://blog.csdn.net/cplvfx/article/details/80455485 使用方 ...
- jQuery.Form.js 异步提交表单使用总结
jQuery.Form.js 是一个用于使用jQuery异步提交表单的插件,它使用方法简单,支持同步和异步两种方式提交. 第一步:引入jQuery与jQuery.Form.js <script ...
- 原生js实现ajax的文件异步提交功能、图片预览功能.实例
采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交 效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> & ...
- 使用jQuery.form插件,实现完美的表单异步提交
传送门:异步编程系列目录…… 时间真快,转眼一个月快结束了,一个月没写博客了!手开始生了,怎么开始呢…… 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 月份的尾巴,今天的主 ...
- 使用jQuery,实现完美的表单异步提交
jQuery异步提交表单 <form id="form1" method="post"> <table border="1" ...
- ASP.NET MVC 网站开发总结(五)——Ajax异步提交表单之检查验证码
首先提出一个问题:在做网站开发的时候,用到了验证码来防止恶意提交表单,那么要如何实现当验证码错误时,只是刷新一下验证码,而其它填写的信息不改变? 先说一下为什么有这个需求:以提交注册信息页面为例,一般 ...
- submit异步提交 回调的方法
背景: mvc模式下,当submit表单的时候,后台Control自动绑定Model类,但是如果不用submit来提交,改用ajax提交的时候,后台Control无法获取前台form表单内相应Name ...
- JQuery异步提交
JQuery提交部分 $.ajax({ url:'www.baidu.com', //提交的地址,相当于form的action type:'POST', //提交方式,相当于form的method d ...
- ueditor+asp.net异步提交,可以实现了,嘿嘿
之前没用过Ueditor去异步提交,最近项目需要用到这个,就下了个来用,结果可能没仔细去看Ueditor的相关介绍文档,然后自己也郁闷了一下才把它弄出来,现在可以实现异步提交了,松口气,把代码贴出来, ...
随机推荐
- jenkins 修改log路径
修改log路径 默认的路径是/var/log/jenkins/jenkins.log; 修改的话,同样是在/etc/init.d/jenkins中修改: JAVA_CMD="$JENKINS ...
- 理解 Linux 的虚拟内存
前言 前不久组内又有一次我比较期待的分享:”Linux 的虚拟内存”.是某天晚上加班时,我们讨论虚拟内存的概念时,leader 发现几位同事对虚拟内存认识不清后,特意给这位同学挑选的主题(笑). 我之 ...
- Maven整合SSM测试
前面也说到了关于SSM的整合,话不多说直接从创建项目开始CRUD之路(参考前面写过的Mybatis和Spring整合,SSM简单整合),这是整个项目的结构 以及最终的结果.(附上下载地址) 一.创建M ...
- JVM指令集
指令集,其实就是一系列指令的集合.例如我们需要给一个局部变量赋予1这个值,即这个动作:int a = 1; 在我们看来,这很简单,但对于机器来说需要很多个动作.所以Java虚拟机指令集就是将这些常用的 ...
- Git使用详细教程(4):git rm使用详解
我们使用git rm 文件名来进行删除文件的操作. git rm index.php这个命令把工作区的index.php删除并暂存了. 如何撤回已暂存的删除命令? 上图中已经给出了提示,使用git r ...
- [Postman]发出SOAP请求(18)
使用Postman发出SOAP请求: 将SOAP端点作为URL.如果您使用的是WSDL,那么请将WSDL的路径作为URL. 将请求方法设置为POST. 打开原始编辑器,并将正文类型设置为“text / ...
- Docker0 网卡删除
只需执行下面三步就可以了: 1.yum -y install bridge-utils 2. ifconfig docker0 down 3. brctl delbr docker0 执 ...
- css3新特性总结
一.什么是css3 css用于控制网页的样式和布局,css3是css的升级版本,受浏览器限制,跨浏览器开发有点复杂.css3完全向后兼容 二.css3新特性 1.边框 css3的边框有如下属性: (1 ...
- 项目总结一:情感分类项目(emojify)
一.Emojifier-V1 模型 1. 模型 (1)前向传播过程: (2)损失函数:计算the cross-entropy cost (3)反向传播过程:计算dW,db dz = a - Y_oh[ ...
- Java核心技术及面试指南 流程控制方面的面试题答案
2.2.5.1 switch语句能否作用在byte上,能否作用在long上,能否作用在String上? 1 switch里可以用char,byte,short,int这些基本类型,以及它们的封装类. ...