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 相关文章推荐
jQueryUI的Dialog的简单封装
Jun 07 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
Jul 08 Javascript
js获取URL的参数的方法(getQueryString)示例
Sep 29 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
Sep 03 Javascript
js实现商品抛物线加入购物车特效
Nov 18 Javascript
JS如何判断json是否为空
Jul 06 Javascript
ES6学习教程之对象字面量详解
Oct 09 Javascript
初探js和简单隐藏效果的实例
Nov 23 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 Javascript
js canvas实现写字动画效果
Nov 30 Javascript
在VUE中实现文件下载并判断状态的方法
Nov 08 Javascript
vue等两个接口都返回结果再执行下一步的实例
Sep 08 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学习 函数 课件
2008/06/15 PHP
PHP中函数内引用全局变量的方法
2008/10/20 PHP
PHP警告Cannot use a scalar value as an array的解决方法
2012/01/11 PHP
symfony2.4的twig中date用法分析
2016/03/18 PHP
PHP获取链表中倒数第K个节点的方法
2018/01/18 PHP
javascript 伪数组实现方法
2010/10/11 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
2016/04/12 Javascript
很棒的Bootstrap选项卡切换效果
2016/07/01 Javascript
JS实现控制文本框的内容
2016/07/10 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
2016/12/14 Javascript
js+div+css下拉导航菜单完整代码分享
2016/12/28 Javascript
详解Angular的8个主要构造块
2017/06/20 Javascript
JavaScript中的E-mail 地址格式验证
2018/03/28 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
2019/12/18 Javascript
vue+element 实现商城主题开发的示例代码
2020/03/26 Javascript
vant实现购物车功能
2020/06/29 Javascript
解决Vue router-link绑定事件不生效的问题
2020/07/22 Javascript
Python内建数据结构详解
2016/02/03 Python
Python中字典的setdefault()方法教程
2017/02/07 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
python 可视化库PyG2Plot的使用
2021/01/21 Python
使用canvas实现黑客帝国数字雨效果
2020/01/02 HTML / CSS
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
控制工程专业个人求职信
2013/09/25 职场文书
建筑毕业生自我鉴定
2013/10/18 职场文书
学习方法演讲稿
2014/05/10 职场文书
商业企业管理专业求职信
2014/07/10 职场文书
人力资源管理专业求职信
2014/07/23 职场文书
个人授权委托书范文
2014/09/21 职场文书
群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
机票销售员态度不好检讨书
2014/09/27 职场文书
幼儿园奖惩制度范本
2015/08/05 职场文书
golang 如何通过反射创建新对象
2021/04/28 Golang
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python
用Python进行栅格数据的分区统计和批量提取
2021/05/27 Python
python中%格式表达式实例用法
2021/06/18 Python