原生js怎样获取后台端口数据
全称： XMLHttpReques
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>XMLHttpReques</title>
<script>
var xhr = '';
if (window.XMLHttpRequest) {
xhr = new window.XMLHttpRequest();
} else {
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
window.onload = function () {
document.getElementById("bnt").onclick = function () {
xhr.open('post','后台端口路径',true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
xhr.send( 'memberId='+ username + '&&password=' + password );
xhr.onreadystatechange = function () {
// readyState:
// 0: 请求未初始化
// 1: 服务器连接已建立
// 2: 请求已接收
// 3: 请求处理中
// 4: 请求已完成，且响应已就绪
// status:
// 200: 'ok'
// 404: 未找到页面或接口
// xhr.responseText: 后端返回的数据
if(xhr.readyState == && xhr.status == ) {
document.getElementById('box').innerHTML = xhr.responseText;
var json = JSON.parse(xhr.responseText);
console.log(json);
} }
}
}
</script>
</head>
<body>
<p>账号：<input type="text" id="username"></p>
<p>密码：<input type="password" name="" id="password"></p>
<p> <input type="button" value="登录" id="bnt"></p>
<div id="box"></div>
</body>
</html>
原生js怎样获取后台端口数据的更多相关文章
- angular js 模拟获取后台的数据
在这里我们把后台的数据用一个.json文件进行代替. 项目的目录结构如下: puDongLibraryLearning----ui-router-learning ---- data-------pe ...
- Thymleaf js直接获取后台传过来的对象或者对象的属性以及map
简单说明:第一次接触thymleaf模板,对于thymleaf在js中如何获取后台传递过来的值,真的挺简单的,记住就行了 代码: 后台代码: //传递一个org对象给jspublic String t ...
- 原生js中获取this与鼠标对象以及vue中默认的鼠标对象参数
1.通过原生js获取this对象 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- jquery 获取后台实时数据
第一步.提醒后台处理数据1.$.ajax({}) 提交数据,2.后台返回状态3.后台开始处理数据,并每秒记录状态到 data.json 文件4.前台每秒请求 data.json 文件,直到处理完成 第 ...
- Vuex 存储||获取后台接口数据
如果你对 Vuex 有一定的了解的话呢,可以继续这一篇的学习了,如果没有的话, 建议先看一看我的上一篇 Vuex基础:地址在下面 Vuex的详解与使用 Vuex刷新数据不丢失 这篇接着上一篇: 这篇将 ...
- 手机端原生js实现下拉刷新数据
HTML结构如下: <div class="outerScroller comment"> <div class='scroll comment'> < ...
- 前端 ajax 获取后台json数据 解析
先贴代码 function edit(node) { ).text(); alert(customerid) $.ajax({ type: "post", url: "/ ...
- js遍历获取表格内数据方法
1.一般的表格结构如下 <table> <tr> <td>id</td> <td>name</td> </tr> & ...
- 原生JS中获取位置的方案总结
获取鼠标当前位置 clientY.clientX: 鼠标当前位置 相对于 浏览器可视区域顶部.浏览器可视区域左部 的位置: pageY.pageX: 鼠标当前位置 相对于 文档顶部.文档左部的位置: ...
随机推荐
- Egret学习笔记 (Egret打飞机-7.实现敌机工厂)
在游戏过程之,敌机是源源不断的冲屏幕上方往下飞,如果我们每一架敌机都直接new的话,在飞机很多的情况下,也许有性能问题. 就像前面子弹对象池一样,我们也要实现一个飞机对象池,也就是标题说的敌机工厂(之 ...
- hdu1394 分治 or 线段树
利用分治求一次逆序数,然后每次把第一个元素放到末尾,设该交换元素的值为x,设上一次求得的逆序数为y,那么此时的逆序数等于y - x + (n - x - 1),减去x是因为x作为第一个元素,其后共有x ...
- logback KafkaAppender 写入Kafka队列,集中日志输出.
为了减少应用服务器对磁盘的读写,以及可以集中日志在一台机器上,方便使用ELK收集日志信息,所以考虑做一个jar包,让应用集中输出日志 网上搜了一圈,只发现有人写了个程序在github 地址:https ...
- List，Set，Map
1.Collection 和 Map 的区别 容器内每个为之所存储的元素个数不同.Collection类型者,每个位置只有一个元素.List,SetMap类型者,持有 key-value pair,像 ...
- 影响JavaScript应用可扩展性因素
引言:JavaScript 应用变得越来越庞大.这是因为使用JavaScript能做的事情远比我们大多数人所需求的要多得多.我们不能仅因为技术上可行,就去考虑软件系统的扩展问题.为一个不需要扩展的系统 ...
- hi3531spi flash启动和bootrom启动的对比
a
- PLSQL Developer报错（一）
PLSQL Developer报错(一) 今天,我遇到了一个奇怪的问题,PLSQL Developer连接不上数据库,而且配置和数据库用户名密码都正确. 查找了半天的资料,也没有发现什么解决的办法.实 ...
- C#之AES256位加密解密
密码学中的高级加密标准(Advanced Encryption Standard,AES),又称Rijndael加密法,是美国联邦政府采用的一种区块加密标准.这个标准用来替代原先的DES,已经被多方分 ...
- CSS3的[att$=val]选择器
1.实例源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- （二十二）java小练习三
练习七:计算1-100的累加和 package demo; /** * 计算1-100的累加和 * @author tuzongxun */ public class Test16 { pu ...