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 相关文章推荐
jqgrid 编辑添加功能详细解析
Nov 08 Javascript
javascript中parseInt()函数的定义和用法分析
Dec 20 Javascript
jQuery异步获取json数据方法汇总
Dec 22 Javascript
JavaScript中reduce()方法的使用详解
Jun 09 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
Jun 19 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
Aug 05 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
Angular6笔记之封装http的示例代码
Jul 27 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
Aug 22 Javascript
vue-router的使用方法及含参数的配置方法
Nov 13 Javascript
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
微信小程序保存图片到相册权限设置
Apr 09 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常用技巧总结(附函数代码)
2012/02/04 PHP
PHP编写RESTful接口的方法
2016/02/21 PHP
Yii2中多表关联查询hasOne hasMany的方法
2017/02/15 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
2010/01/22 Javascript
javascript 词法作用域和闭包分析说明
2010/08/12 Javascript
js获取当前地址 JS获取当前URL的示例代码
2014/02/26 Javascript
javascript原型链继承用法实例分析
2015/01/28 Javascript
JS中多步骤多分步的StepJump组件实例详解
2016/04/01 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
Angular排序实例详解
2017/06/28 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
vue实现将一个数组内的相同数据进行合并
2019/11/07 Javascript
js实现头像上传并且可预览提交
2020/12/25 Javascript
[38:23]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第二场 11.01
2020/11/02 DOTA
[46:20]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第二场 1月22日
2021/03/11 DOTA
Using Django with GAE Python 后台抓取多个网站的页面全文
2016/02/17 Python
利用Python实现图书超期提醒
2016/08/02 Python
Python实现简单生成验证码功能【基于random模块】
2018/02/10 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
python 字典 setdefault()和get()方法比较详解
2019/08/07 Python
Python Process多进程实现过程
2019/10/22 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求
2020/03/09 Python
Pytest测试框架基本使用方法详解
2020/11/25 Python
金融专业推荐信
2013/11/14 职场文书
元宵晚会主持词
2014/03/25 职场文书
初二学习计划书范文
2014/04/27 职场文书
电子专业毕业生自荐信
2014/05/25 职场文书
欢迎横幅标语
2014/06/17 职场文书
电子专业自荐信
2014/07/01 职场文书
乐山大佛导游词
2015/02/02 职场文书
导游词创作书写原则以及开场白技巧怎么学?
2019/09/25 职场文书
JavaScript使用canvas绘制坐标和线
2021/04/28 Javascript
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python
MySQL 数据 data 基本操作
2022/05/04 MySQL