在Html页面中调用ajax代码

以最原始的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 }

 

转载于:https://www.cnblogs.com/YangBinChina/p/10339107.html