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 相关文章推荐
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
Jan 11 Javascript
jQuery读取和设定KindEditor值的方法
Nov 22 Javascript
js实现iframe跨页面调用函数的方法
Dec 13 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
Aug 25 Javascript
Javascript的表单验证-初识正则表达式
Mar 18 Javascript
Vue.js每天必学之数据双向绑定
Sep 05 Javascript
Vue完整项目构建(进阶篇)
Feb 10 Javascript
Vue form表单动态添加组件实战案例
Sep 02 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
Sep 25 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
Nov 26 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
Feb 07 Javascript
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
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
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
关于实现代码语法标亮 dp.SyntaxHighlighter
2007/02/02 Javascript
javascript 文章截取部分无损html显示实现代码
2010/05/04 Javascript
jQuery插件开发基础简单介绍
2013/01/07 Javascript
JavaScript函数的4种调用方法详解
2014/04/22 Javascript
jQuery/CSS3图片特效插件整理推荐
2014/12/07 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
2016/04/18 Javascript
jQuery CSS3自定义美化Checkbox实现代码
2016/05/12 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
2016/06/22 Javascript
AngularJS Bootstrap详细介绍及实例代码
2016/07/28 Javascript
用js实现博客打赏功能
2016/10/24 Javascript
微信小程序  自定义创建详细介绍
2016/10/27 Javascript
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
JS实现的文件拖拽上传功能示例
2018/05/21 Javascript
微信小程序图片加载失败时替换为默认图片的方法
2019/12/09 Javascript
vue-cli设置publicPath小记
2020/04/14 Javascript
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
Vue如何实现变量表达式选择器
2021/02/18 Vue.js
[55:47]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第三局
2016/02/27 DOTA
python调用cmd复制文件代码分享
2013/12/27 Python
tensorflow实现加载mnist数据集
2018/09/08 Python
Python列表list常用内建函数实例小结
2019/10/22 Python
opencv之为图像添加边界的方法示例
2019/12/26 Python
python+django+selenium搭建简易自动化测试
2020/08/19 Python
Python 整行读取文本方法并去掉readlines换行\n操作
2020/09/03 Python
详解numpy.ndarray.reshape()函数的参数问题
2020/10/13 Python
如何让PyQt5中QWebEngineView与JavaScript交互
2020/10/21 Python
python基于Kivy写一个图形桌面时钟程序
2021/01/28 Python
python 基于DDT实现数据驱动测试
2021/02/18 Python
纽约JewelryAffairs珠宝店:精细金银时尚首饰
2017/02/05 全球购物
周生生珠宝香港官网:Chow Sang Sang(香港及海外配送)
2019/09/05 全球购物
最新大学生自我评价
2013/09/24 职场文书
会计专业推荐信
2013/10/29 职场文书
《草原的早晨》教学反思
2014/04/08 职场文书
交通运输局四风问题对照检查材料思想汇报
2014/10/09 职场文书
员工家属慰问信
2015/03/24 职场文书