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

2024-10-08 06:31:06

在开发中遇到了在没有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前端和后台数据交互内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

ajax实现从后台拿数据显示在HTML前端的方法

HTML页面,ajax是基于id的,所有用id表示. 拿到的数据会显示在这里 <div id="test"></div> ajax源码: $(document).ready(function() { $.ajax({ url : "admin/get_online_ganbu.php",//后台请求的数据,用的是PHP dataType : "json",//数据格式 type : "post",//请
java根据数据库表内容生产树结构json数据的方法

1.利用场景组织机构树,通常会有组织机构表,其中有code(代码),pcode(上级代码),name(组织名称)等字段 2.构造数据(以下数据并不是组织机构数据,而纯属本人胡编乱造的数据) List<Tree<Test>> trees = new ArrayList<Tree<Test>>(); tests.add(new Test("0", "", "关于本人")); tests.add(new
SpringMVC实现前端后台交互传递数据

本人对springmvc前端交互不太懂,搜索了很多关于springmvc前端交互介绍,下面我来记录一下,有需要了解的朋友可参考.希望此文章对各位有所帮助. Controller.java代码: @Controller public class DataController { //一.接收和通过ModelMap传出参数,不需要视图解析器,测试时加了解析器,顾返回值不需后缀 //普通参数 @RequestMapping("/data1") public String data1(@Req
java实现后台数据显示在前端

本篇使用servlet +.ajax( )的技术,实现简单的前后台的交互问题. 首先来了解一下AJAX AJAX是jquery的一个方法,一种在网页上调用后台接口的方式. 示例:$.ajax( { 参数 } ) ; $.ajax()等同于jQuery.ajax( ) 参数里是一个JS对象, 其中的属性: type: ' GET' /'POST' url: 接口地址 success:服务器应答时,调用此function处理(回调方法) 另外说一下Servlet Servlet,服务小程序,为客户端
JAVA后台转换成树结构数据返回给前端的实现方法

我们会经常用到树形,那么树形结构的数据是在前端做还是在后台做呢?我自己用过前端的ztree,selectTree等这些属于前端的组件,后台只需要把一个表的所有数据返回给前段就可以,前端可以通过id,pid来把层级结构划分,要是我们前端需要后台直接返回树结构数据怎么办,那么接下来我给大家介绍一下我写过的例子. 我们先看一张图了解一下树结构:我这里随便找一张图了解一下即可接下来我们看一下数据,主要包括id,pid,名称接下来我们写一个小例子,用递归方式转换为数实体: package cn.cc
javascript前端和后台进行数据交互方法示例

在开发中遇到了在没有jQuery的情况下需要与后台进行部分数据的交互,查找了部分资料使用JavaScript实现了操作,记录一下. //获取XMLHttpRequest对象用于与后台交互数据 function getXHR(){ var xmlHttp; try { xmlHttp=new XMLHttpRequest();//新版本浏览器 }catch(e) { try{ xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch(e)
echarts同一页面中四个图表切换的js数据交互方法示例

需求: 点击tab页,切换四个不同的图表,ajax向后台请求数据,展示在四个不同的图表中. 其余的就不多说,直接上js代码了示例代码: $(function() { $("#heart").on("click", function() { $('.heart-car').show(); $('.sleep-car').hide(); $('.breathe-car').hide(); $('.sport-car').hide(); }); $("#bre
AngularJS与后端php的数据交互方法

简述: AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVC.模块化.自动化双向数据绑定.语义化标签.依赖注入等等. 它不仅仅是一个类库,而是提供了一个完整的框架.它避免了您和多个类库交互,需要熟悉多套接口的繁琐工作.它由Google Chrome的开发人员设计,引领着下一代Web应用开发.也许我们5年或10年后不会使用AngularJ
BootStrap selectpicker后台动态绑定数据的方法

本文为大家分享了BootStrap selectpicker后台动态绑定数据的方法,供大家参考,具体内容如下 html部分代码 <select class="selectpicker" multiple> </select> 这是一个下拉多选框,现在要动态往里添加下拉选项. js代码 <script type="text/javascript"> getOption(); function getOption(){ $.ajax(
javascript浏览器窗口之间传递数据的方法

本文实例讲述了javascript浏览器窗口之间传递数据的方法.分享给大家供大家参考.具体分析如下: 摘要: 在项目开发中我们经常会遇到弹窗,有的是通过div模拟弹窗效果,有的是通过iframe,也有通过window自带的open函数打开一个新的窗口.今天给大家分享的是最后一种通过window.open()函数打开页面进行数据交互.首先看下效果图: 原理: 父窗口给子窗口传递数据是通过url的参数传递过去,子窗口给父窗口传递数据是通过父窗口的全局函数传递. 代码: index.html如下: 复
vue.js过滤器+ajax实现事件监听及后台php数据交互实例

本文实例讲述了vue.js过滤器+ajax实现事件监听及后台php数据交互.分享给大家供大家参考,具体如下: 在vue.js开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. index.html: <!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title> v
Vue2.0子同级组件之间数据交互方法

熟悉了Vue.js的同级组件之间通信,写此文章,以便记录. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点,请在官网上进行查看,不再赘述. 使用NPM及相关命令行工具初始化的Vue工程,目录结构如下接着我们进入Demo,首先我们可以删除掉模板项目中src/components/Hello.vue,然后在App.vue中删除对于Hello子组件的注册和使用还有一些其他无关紧要的东西,此时的App.vue应为这样一.我们先来创建中央事件总线,在src/assets/下创建一个eventB
AngularJS实现与后台服务器进行交互的示例讲解

AngularJS作为一个非常实用的前端框架,我们知道在AngularJS中有自己的Model和Controler. angularJS中所有的请求都是通过js定义的Controler来完成的,也就是我们完全脱离了后台, 将整个应用程序的压力交给了客户端来完成.但是在实际开发的时候我们难免需要访问后台或者与数据库进行交互,这个时候我们就需要一个类似于JQAJAX的方法来进行数据访问. 在angularJS中提供了一种与远程Http服务器交互的服务,$http $http是angularJS中的
Flask框架运用Ajax实现数据交互的示例代码

目录前后端发送字符串前后端发送JSON数据发送数据并携带token 收发JSON格式字符串使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载刷新整个页面,这使得程序能够更快地回应用户的操作,如下笔记将简单介绍使用AJAX如何实现前后端数据通信. 前后端发送字符串前端代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"
springboot前后台数据交互的示例代码

本文介绍了springboot前后台数据交互的示例代码,分享给大家,具体如下: 1.在路径中传递数据,比如对某个数据的id:123 前台发送:格式大致如下在路径中传数据后台接收: 后台接收数据后台接收结果 2.查询字符串传递数据前台发送: 前台使用Querystring发送数据后台接收: 这里@RequestParm可以不写,在后台找不到前台对应的字段时,输出null,在@RequestParam中指定的话输出指定的值(前台没给出字段时): 后台接收queryString方式传递的数

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

相关推荐

随机推荐