以最原始的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. [蓝桥杯]PREV-22.历届试题_国王的烦恼

    问题描述 C国由n个小岛组成,为了方便小岛之间联络,C国在小岛间建立了m座大桥,每座大桥连接两座小岛.两个小岛间可能存在多座桥连接.然而,由于海水冲刷,有一些大桥面临着不能使用的危险. 如果两个小岛间 ...

  2. Windows下安装配置Flutter

    Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面. Flutter可以与现有的代码一起工作.在全世界,Flutter正在被越来越多的开发者和组织使用,并且 ...

  3. 理解OpenShift(6):集中式日志处理

    理解OpenShift(1):网络之 Router 和 Route 理解OpenShift(2):网络之 DNS(域名服务) 理解OpenShift(3):网络之 SDN 理解OpenShift(4) ...

  4. MySQL查询语句报错 sql_mode=only_full_group_by 问题

    升级MySQL到5.7后,查询语句总是报sql_mode=only_full_group_by问题,总结归纳了两种解决方案,推存第二种解决方案. 报错信息: [Err] 1055 - Expressi ...

  5. WinForm-简单21点纸牌小游戏

    纸牌游戏有很多种玩法,C#代码写的纸牌游戏,网上也能找到不少,从中也能学习到不少知识,自己动手也写一个,算是记录下学习过程吧. 纸牌21点的玩法也比较简单,就是看谁手中的所有牌相加是21点,或是离21 ...

  6. 找不到visual studio模板信息 解决方法

      菜单->工具->选项->项目和解决方案-> 将"Visual Studio 用户项目模板位置"指向vs安装目录:"E:/Program Fil ...

  7. POJ2159 Ancient Cipher

    POJ2159 Ancient Cipher Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 38430   Accepted ...

  8. java工具类——java将一串数据按照gzip方式压缩和解压缩

    我要整理在工作中用到的工具类分享出来,也方便自己以后查阅使用,这些工具类都是我自己实际工作中使用的 import java.io.ByteArrayInputStream; import java.i ...

  9. java.lang.OutOfMemoryError: PermGen space解决方法

  10. Oracle参数Arraysize设置对于逻辑读的影响分析

    说明: 当执行一条SQL查询的时候,为了获得满足的数据,查询在这个过程中完成解析,绑定,执行和提取数据等一系列步骤,这些步骤都是单独执行的,满足条件的数据行必须由数据库返回给应用:对于任何大小的结果集 ...