javascript前端和后台进行数据交互方法示例


Posted in Javascript onAugust 07, 2020

在开发中遇到了在没有jQuery的情况下需要与后台进行部分数据的交互,查找了部分资料使用JavaScript实现了操作,记录一下。

//获取XMLHttpRequest对象用于与后台交互数据
function getXHR(){
      var xmlHttp;
      try {
        xmlHttp=new XMLHttpRequest();//新版本浏览器
      }catch(e)
      {
        try{
          xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch(e)
        {
          try{
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");//老版本浏览器          }
          catch(e)
          {
            alert("你的浏览器不支持ajax");
            return false;
          }
        }
      }
      return xmlHttp;
    }
function check() {
      var pass = document.getElementById("pass").value;
 
      //1/得到xhr对象
      var xhr=getXHR();
      //2.注册状态变化监听器
      xhr.onreadystatechange=function(){
        if(xhr.readyState==4) {
          if(xhr.status==200) {
            var obj = document.getElementById("checkPass");
            if("true" == xhr.responseText){
              obj.innerHTML = "验证通过";
              obj.style.color = "green";
			}else{
              obj.innerHTML = "原密码输入错误!";
              obj.style.color = "brown";
              return;
			}
          }
        }
      }
      //3.建立与服务器的连接(post请求方式,也可以使用get请求方式)
      xhr.open("post","请求数据的地址");
      xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
      //4.向服务器发出请求(使用post请求方式将数据发往后台)
      xhr.send("pass="+pass);
    }

到此这篇关于javascript前端和后台进行数据交互方法的文章就介绍到这了,更多相关javascript前端和后台数据交互内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JS setCapture 区域外事件捕捉
Mar 18 Javascript
JS文本框追加多个下拉框的值的简单实例
Jul 12 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
Nov 17 Javascript
js脚本实现数据去重
Nov 27 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
Jun 17 Javascript
js入门之Function函数的使用方法【新手必看】
Nov 22 Javascript
详解微信小程序开发之城市选择器 城市切换
Jan 17 Javascript
jquery实现页面加载效果
Feb 21 Javascript
JS改变页面颜色源码分享
Feb 24 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
Jan 10 Javascript
解决layui的table插件无法多层级获取json数据的问题
Sep 19 Javascript
JavaScript This指向问题详解
Nov 25 Javascript
javascript解析json格式的数据方法详解
Aug 07 #Javascript
Vue触发input选取文件点击事件操作
Aug 07 #Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
Aug 07 #Javascript
vue.js click点击事件获取当前元素对象的操作
Aug 07 #Javascript
Vue跨域请求问题解决方案过程解析
Aug 07 #Javascript
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 #jQuery
vue递归获取父元素的元素实例
Aug 07 #Javascript
You might like
转PHP手册及PHP编程标准
2006/12/17 PHP
详解PHP内置访问资源的超时时间 time_out file_get_contents read_file
2013/06/03 PHP
PHP常用的三种设计模式
2017/02/17 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
PHP autoload使用方法及步骤详解
2020/09/05 PHP
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
在百度知道团队中快速审批新成员的js脚本
2014/02/02 Javascript
js分页代码分享
2014/04/28 Javascript
js函数调用的方式
2014/05/06 Javascript
关于Node.js的events.EventEmitter用法介绍
2017/04/01 Javascript
JS判断微信扫码的方法
2017/08/07 Javascript
axios拦截设置和错误处理方法
2018/03/05 Javascript
JS实现简单获取最近7天和最近3天日期的方法
2018/04/18 Javascript
node.js自动上传ftp的脚本分享
2018/06/16 Javascript
小程序实现五星点评效果
2018/11/03 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
2019/09/02 Javascript
[00:29]2019完美世界全国高校联赛(秋季赛)总决赛海口落幕
2019/12/10 DOTA
python魔法方法-自定义序列详解
2016/07/21 Python
Python中进程和线程的区别详解
2017/10/29 Python
python2.x实现人民币转大写人民币
2018/06/20 Python
python 产生token及token验证的方法
2018/12/26 Python
pandas DataFrame索引行列的实现
2019/06/04 Python
python3 中的字符串(单引号、双引号、三引号)以及字符串与数字的运算
2019/07/18 Python
python实现串口通信的示例代码
2020/02/10 Python
python标准库OS模块函数列表与实例全解
2020/03/10 Python
Django模型验证器介绍与源码分析
2020/09/08 Python
python3处理word文档实例分析
2020/12/01 Python
python help函数实例用法
2020/12/06 Python
Html5 postMessage实现跨域消息传递
2016/03/11 HTML / CSS
德国baby-markt婴儿用品瑞士网站:baby-markt.ch
2017/06/09 全球购物
怎样写好创业计划书的内容
2014/02/06 职场文书
中国梦读书活动总结
2014/07/10 职场文书
优秀班主任先进事迹材料
2014/12/16 职场文书
初三语文教学反思
2016/03/03 职场文书
Oracle使用别名的好处
2022/04/19 Oracle