以最原始的XMLHttpRequest形式,实现ajax.

封装的方法

 1  /**
2 * 发送一个 AJAX 请求
3 * @param {String} method 请求方法
4 * @param {String} url 请求地址
5 * @param {Object} params 请求参数
6 * @param {Function} done 请求完成过后需要做的事情(委托/回调)
7 */
8 function commonAjax (method, url, params, done) {
9 // 统一转换为大写便于后续判断
10 method = method.toUpperCase()
11 // 对象形式的参数转换为 urlencoded 格式
12 var pairs = []
13 for (var key in params) {
14 pairs.push(key + '=' + params[key])
15 }
16 var querystring = pairs.join('&')
17 var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new
18 ActiveXObject('Microsoft.XMLHTTP')
19 xhr.addEventListener('readystatechange', function () {
20 if (this.readyState !== 4) return
21 // 尝试通过 JSON 格式解析响应体
22 try {
23 done(JSON.parse(this.responseText))
24 } catch (e) {
25 done(this.responseText)
26 }
27 })
28 // 如果是 GET 请求就设置 URL 地址 问号参数
29 if (method === 'GET') {
30 url += '?' + querystring
31 }
32 xhr.open(method, url)
33 // 如果是 POST 请求就设置请求体
34 var data = null
35 if (method === 'POST') {
36 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
37 data = querystring
38 }
39 xhr.send(data)
40 }

调用:

 1                     //1. 获取界面上的元素 value
2 var txtUsername = "admin";
3 var txtPassword = "admin";
4
5 var url = 'http://127.0.0.1:8080/platform_oracle/app/userController/selectUserByUserCode.do';
6 var params= { userCode: txtUsername, userPwd: txtPassword };
7
8 commonAjax('post',url,params,function (data){
9 console.log(data);
10 });

返回值:

json格式化后的结果

 1 {
2 "MSG_ID": "SUCCESS",
3 "RESULT_CODE": "1",
4 "MSG_CONTENT": "获取成功!",
5 "Content": {
6 "id": "E9EE2E1D4B834C59AA9719A7ADB0BA41",
7 "password": "21232F297A57A5A743894A0E4A801FC3",
8 "status": "1",
9 "userName": "admin",
10 "orgCode": null,
11 "orgName": "xxx软件",
12 "userCode": "admin",
13 "updateUser": null,
14 "jobNum": "000000",
15 "createUser": null,
16 "cellPhone": "11111",
17 "createTime": null,
18 "updateTime": null,
19 "roleName": null,
20 "delFlag": "0",
21 "icon": null
22 }
23 }

在Html页面中调用ajax代码的更多相关文章

  1. Salesforce Apex页面中调用远端网络服务

    本文介绍了Salesforce Apex页面中调用远端网络服务的实现过程. ### 注册远端网络服务 在使用Apex代码调用远端网络服务之前,首先需要在Salesforce中注册远端网络服务地址, 本 ...

  2. 在JSP页面中调用另一个JSP页面中的变量

    在jsp学习中,经常需要在一个jsp页面中调用另一个jsp页面中的变量,下面就这几天的学习,总结一下. jsp页面之间的变量调用有多种方法: 1.通过jsp的内置对象—request对象获取参数: ( ...

  3. 微信返回上一页,页面中的AJAX的请求,对Get请求无效的解决办法

    问题产生原因       最近在做一个微信的项目时,遇到一种很常见的情况,需求是这样的,当用户进入到"我的个人中心"的时候,会有一个点击跳转填写认证资料的按钮,点击此按钮后,会跳转 ...

  4. JAVAFX 2.0 javascript中调用java代码

    现在你已经知道如何在JavaFX中调用JavaScript.在本章中,你将了解到相反的功能——在web页面中调用JavaFX. 大体上的理念是在JavaFX程序中创建一个接口对象,并通过调用JSObj ...

  5. 微信小程序——页面中调用组件方法

    我现在有一个弹层的组件(popup),组件里面定义了显示组件(showPopup)和隐藏组件(hidePopup)的方法. 我们如何在调用组件的页面中调用组件里面的方法呢? 在调用组件的页面写如下代码 ...

  6. 系统管理模块_部门管理_改进_抽取添加与修改JSP页面中的公共代码_在显示层抽取BaseAction_合并Service层与Dao层

    系统管理模块_部门管理_改进1:抽取添加与修改JSP页面中的公共代码 commons.jspf <%@ page language="java" import="j ...

  7. 小程序:如何在wxml页面中调用JavaScript函数

    早上过来遇到一个这样的bug: 在计算百分比的时候没有保留小数点后2位,从而导致一些无法整除的结果显示太长 一开始,我以为这是一个很普通的bug,既然wxml在页面{{}}内支持简单的运算,我想也应该 ...

  8. 在thinkphp5.0中调用ajax时, 返回的JSON 格式数据在html前台不能用时

    在thinkphp5.0中调用ajax时,如果控制器返回的数据为json格式,视图层接收到返回值即为json格式的数据,此时应该把 JSON 文本转换为 JavaScript 对象,方便调用.具体代码 ...

  9. 【问题】Asp.net MVC 的cshtml页面中调用JS方法传递字符串变量参数

    [问题]Asp.net MVC 的cshtml页面中调用JS方法传递字符串变量参数. [解决]直接对变量加引号,如: <button onclick="deleteProduct('@ ...

随机推荐

  1. Ubuntu 15.10 下Redis Cluster使用

    1 Redis Standalone安装 可以参考这篇博文:http://www.cnblogs.com/_popc/p/3684835.html 2 Redis Cluster安装 2.1 环境介绍 ...

  2. git中加入中文时,乱码

    原因:编码问题,可以看到txt转为为ANSI编码 ---->将编码方式改为UTF-8即可

  3. shell脚本命令远程连接ssh并执行命令

    环境: redhat 6.5 根据网上提供方法,测试了很多写法都不成功,测试了很久才有了以下脚本. 命令远程连接ssh并执行命令,scp/ftp等远程连接操作同理: #!/usr/bin/expect ...

  4. Oracle中rownum的基本用法

    Oracle中rownum的基本用法 对于rownum来说它是oracle系统顺序分配为从查询返回的行的编号,返回的第一行分配的是1,第二行是2,依此类推,这个伪字段可以用于限制查询返回的总行数,且r ...

  5. Apartment 2019:(1)创建墙体

    墙体建模 The Walls 软件:SketchUp Pro 2017 墙体模型 建模过程: 一.导入图像并调整大小 导入公寓平面参考图/户型图(来自网络),导入为图像.连续三击鼠标左键,选中所有的几 ...

  6. docker swarm 搭建与服务更新

    一,docker swarm 是什么 Docker Swarm.Docker Machine与Docker Compose号称Docker三剑客Docker Swarm 和 Docker Compos ...

  7. springboot vue简单整合

    1.vue项目 (1)修改config/index.js (2)执行 npm run build 生成静态文件,在dist目录 2.springboot项目 (1)在src/main/resource ...

  8. c++ std 最小堆的使用 (用于实现top100之类的功能)

    #include<vector>#include<algorithm>#include<iostream> using namespace std; void Pr ...

  9. kubernetes nginx ingress controller部署

    Kubernetes nginx ingress controller部署 1.下载kubernetes nginx的yaml文件 Wget https://raw.githubusercontent ...

  10. SpringMVC参数注解解释

    在Controller的开发中,经常会用到很多注解,下面解释一下关于形参常用注解的一些解释,他们主要是用来接收参数的. @ModelAttribute("vo", ObjectVo ...