原生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: 鼠标当前位置 相对于 文档顶部.文档左部的位置: ...
随机推荐
- 剑指offer第八天
32.把数组排成最小的数 输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个.例如输入数组{3,32,321},则打印出这三个数字能排成的最小数字为321323 ...
- day6(列表操作、列表练习题)
一.列表操作 a) 循环 基本语法 for i in value : L1 =['a','b','c','d',1,2,3,4,5,6,'b','D'] for i in L1: print(i) ...
- 转:彻底搞清referrer和origin
在http协议中有这两个字段,之前一直隐隐约约的觉得是,一种标记请求来源的方法(的确是),但是更细致的对这两个字段的比较却没有一个清楚的认识. referrer 到底是referer还是referre ...
- 编写DAO,通过JdbcTemplate操作数据库的实践
目的:编写DAO,通过Spring中的JdbcTemplate,对数据库中的学生数据进行增删改查操作. 要操作的数据库表结构为: 一.大体框架 1.要利用JdbcTemplate,首先要添加Sprin ...
- DriverStudio开发PCI设备DMA数据传输
DriverWizard向导可以创建基本的wDM驱动程序框架,包括总线类型,地址空间,中断源,DMA资源,以及IOCTL(i/o控制代码)的定义等等.详细情况可参看DriverStudio的帮助文档, ...
- 【linux】linux下能ping通ip 但是不能ping通域名
经过一翻查找后解决了,原因和方法如下: [root@~]# grep host /etc/nsswitch.conf#hosts: db files nisplus nis dnshosts: ...
- Linux显示一个二进制文件或可执行文件的完整路径
Linux显示一个二进制文件或可执行文件的完整路径 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ which halt /sbin/halt
- XmlDocument 转换为xml字符串
static public string XMLDocumentToString(XmlDocument doc) { MemoryStream stream = new Me ...
- Flex动态获取方法报错
1.错误描述 2.错误原因 由于Flex文件修改后,需要将其编译成swf文件,刚修改的方法没有编译,再加上历史缓存的原因,导致报错 3.解决办法 将Flex项目重新clean一下,并将MyEclips ...
- IIS易混概念小结
IIS连接数 常识: 虚拟主机会限制IIS连接数,关于其含义,差不多每个主机供应商都有一套自己的说法,微软也没有给出很明确的解释: 含义: IIS服务器可以同时容纳客户请求的最高连接数,准确的说应该叫 ...