ajax与Java后台互相传数据
目录
1. 简介
2.方法一:
3.方法二:
4.两种方法的对比
onreadystatechange 事件
5.总结
1. 简介
这篇文章讨论的是ajax与Java后台互相传数据的功能,将会用到两种方法【或许叫做ajax使用的两种格式更为恰当】——一种是菜鸟教程上的方法,另一种是在网上查资料的时候大部分人用的方法。文章将重点对比两种方法在数据传输方面的差异性。
2.方法一:
前端js代码:
var xmlhttp; //声明一个XMLHttpRequest对象
if(window.XMLHttpRequest){ //根据浏览器情况实例化xmlhttp对象xmlhttp=new XMLHttpRequest();}else {xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}xmlhttp.onreadystatechange=function () { //发送请求后,根据发送状态进行一系列操作dosomething(); }
xmlhttp.open("GET", "saveImg?name=plane", true); //xmlhttp为向后台发送请求做必要的设置
xmlhttp.send(); //发送请求
后端Java代码
@WebServlet("/saveImg") //与前端xmlhttp.open函数中url参数一样
public class Save extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String name = req.getParameter("name"); //取出前端传入的值System.out.println(name);String s = "{\"name\" : \"宏彬\", \"age\" : 23, \"sex\": \"男\"}"; //准备向前端发送的一些数据,以键值对形式resp.setCharacterEncoding("utf-8");resp.setContentType("application/json; charset=utf-8");resp.getWriter().write(s); //将准备的数据发送出去}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req, resp);}
}
这种方法是按照菜鸟教程里关于ajax方法进行数据传输的, 在看到这里的时候发现它没有告诉我前端该怎么取出后台传给我的数据【应该有个data内置对象,但是我没找到菜鸟教程把它放在哪里讲了】。
3.方法二:
前端js代码
var jsondata={ //定义一个json对象,用于存储数据"name" : "plane","age" : 17}$.ajax({ //调用ajax发送数据type:"get", //发送方式,post或者geturl:"saveImg", //发送给后台的url声明data:jsondata, //指定要发送给后台的数据success:function (data) { //发送成功并且成功获得后台响应的时候,alert(data.name+data.age+data.sex); //执行的操作},error:function (e) { //发送失败了该执行的操作alert("发生未知错误");}})
后端Java代码:与方法一中的一样
@WebServlet("/saveImg") //与前端xmlhttp.open函数中url参数一样
public class Save extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String name = req.getParameter("name"); //取出前端传入的值System.out.println(name);String s = "{\"name\" : \"宏彬\", \"age\" : 23, \"sex\": \"男\"}"; //准备向前端发送的一些数据,以键值对形式resp.setCharacterEncoding("utf-8");resp.setContentType("application/json; charset=utf-8");resp.getWriter().write(s); //将准备的数据发送出去}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req, resp);}
}
4.两种方法的对比
对于熟悉Java的同学来说可能第一种方法看起来更习惯些,它的代码风格也更和Java接近。第二种方法里主要使用了jQuery的一些标签,看起来不太习惯。这里主要说的是,既然它们都是Ajax,第二种有success和error方法来进行请求响应成功或者失败的相应操作,那么第一种方法又该如何实现这样的操作呢?
看ajax onreadystatechange事件【摘自菜鸟教程】
onreadystatechange 事件
当请求被发送到服务器时,我们需要执行一些基于响应的任务。
每当 readyState 改变时,就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性:
属性 描述 onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。 readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成,且响应已就绪
status 200: "OK"
404: 未找到页面在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。
方法一里面就对onreadystatechange属性赋值了一个函数,可以根据readyState和status的值实现success和error的操作.
如下面这段代码在方法一的代码中也实现了代码二中的功能
var xmlhttp; //声明一个XMLHttpRequest对象
if(window.XMLHttpRequest){ //根据浏览器情况实例化xmlhttp对象xmlhttp=new XMLHttpRequest();}else {xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}xmlhttp.onreadystatechange=function () { //发送请求后,根据发送状态进行一系列操作if(xmlhttp.readyState==4&&xmlhttp.status==200){var jsondata = xmlhttp.responseText//alert(jsondata.name+jsondata.age+jsondata.sex);alert(jsondata);}else{alert("发生错误");} }
xmlhttp.open("GET", "saveImg?name=plane", true); //xmlhttp为向后台发送请求做必要的设置
xmlhttp.send();
嗯....运行之后,发现代码逻辑走的并不是if里面的代码,而是走了else里面的代码。在查看xmlhttp.readyState和xmlhttp.status后发现它们的值变化了四次,分别是(0, 0), (1, 200), (2, 200), (3, 200),这也正好对应着请求响应的几个步骤。
这是第四次状态的时候走if语句时页面的显示。虽然jsondata显示的格式和json格式很像,但是它应该只是一个字符串,不要把它当json用【就像被注释掉的那行一样】,取不到值【undefined】
如果想要想第一种方法那样使用键值对的形式取数据,那么后台传过来的数据就需要是xml类型的了。具体参考下面给的菜鸟教程示例
请求 cd_catalog.xml 文件,并解析响应:
xmlDoc=xmlhttp.responseXML; txt=""; x=xmlDoc.getElementsByTagName("ARTIST"); for (i=0;i<x.length;i++) {txt=txt + x[i].childNodes[0].nodeValue + "<br>"; } document.getElementById("myDiv").innerHTML=txt;
5.总结
在Ajax传输数据的时候,第一种方法直接在url中,通过在后面添加“?key1:val1&key2:val2...”的方式向后台传数据,取数据就只能取到一个字符串。想要取键值对则后台需要响应回来一个xml文件
第二种方法虽然格式上和Java代码差异有些大,但是它可以指定传输数据的对象,并且通过这个对象用取键值对的方法取值,在存取数据的方面感觉比第一种方法更方便些。
ajax与Java后台互相传数据相关推荐
- ajax与java后端互传数据
文章目录 后端传到前端(传一个集合,展示成表格) controller层 js部分 前端 向后端传值 js部分 controller层 后端传到前端(传一个集合,展示成表格) controller层 ...
- java后台 ajax_ajax提交到java后台之后处理数据的实现
环境:eclipse+struts 要实现的效果:点击按钮提交数据到后台之后回到前台显示出来数据 index.jsp pageEncoding="UTF-8"%> Inser ...
- 【看板】ajax动态获取后台传来json数据,加载到页面表格中
ajax动态获取后台传来json数据,加载到页面表格中 摘要 1.WebApi 2.看板HTML 3.ajax获取后台传来的数据:在这里要注意声明提升,所以需要在for循环外var str1 = &q ...
- java后台如何给数据给前端_JAVA后台 关于如何从后台传递信息在jsp前端页面显示...
JAVA后台 关于如何从后台传递信息在jsp前端页面显示 首先,博主今天为了将后台的信息传递到前台,废了不少的脑筋,一开始,博主采用了request.setAttribute()的方法,来实现的,具体 ...
- ajax获取java后台数据_jQuery ajax获取后台数据怎么在前端显示。
前后端分离以后,前端界面采用ajax与后台数据交互.现在从后台获取到下载文件的集合,怎么在前端一行一行显示,点击某一行可以直接跳转过去下载对应的文件. pageEncoding="UTF-8 ...
- 一次较为完整的原生JavaScript AJAX与Java的前后端数据交互
效果 Maven 依赖 <dependency><groupId>javax.servlet</groupId><artifactId>javax.se ...
- 后台上传数据php代码,jQuery传递数据同时上传文件到php后台的问题
各位大神们好,我是一名学生正在自学编程,一段手机上传图片程序如下: 1.前端有一个上传框,上传图片后会自动生成预览图 2.如下程序是部分js文件,一些无关的代码已经删掉了, 3.后台post.php页 ...
- 蒲公英java后台上传_Jenkins自动化打包(Gitlab)并上传蒲公英
以下是遇到的问题及解决过程 一.安装homebrew(网速很慢很慢--被墙了) /usr/bin/ruby -e "$(curl -fsSL https://raw.githubuserco ...
- 蒲公英java后台上传_蒲公英 - 文档中心 - 使用 Jenkins 实现持续集成 (Android)
环境 无论是什么系统,配置 Jenkins 的配置是一样的 安装 Jenkins 下载最新的版本(一个 WAR 文件).官网下载地址 运行 java -jar jenkins.war 注意:Jenki ...
最新文章
- LTE CRS 时频资源
- 数据交互极速体验-KETTLE的上手指南
- fixedBox固定div漂浮代码 支持ie6以上大部分浏览器
- dataguard如何实现切换_深度干货 | 如何借助云原生搞定Oracle备份快速恢复?
- 约瑟夫斯问题-java版数组解法和链表解法
- python面试100讲
- 移动webAPP前端开发技巧汇总
- LeetCode每日一题:存在重复元素(No.217)
- 真是搞不懂原始套接字SOCK_RAW和AF_PACKET
- 产品经理如何搞定客户和业务
- 摄影测量学——航摄像片的内、外方位元素和像点空间直角坐标变换与中心投影构像方程
- 漫谈ASP.NET设计中的性能优化问题
- 1081 Rational Sum (20 分) 分数计算+最大公约数
- 模拟电路电源芯片PROTUES
- vue3-proxy
- sklearn.metrics.confusion_matrix
- WordPress一款简约轻快且强大的MDx主题
- Brat中文标注工具的使用
- 如何打造有特色的在线教育培训平台
- PS进阶篇——如何PS软件给衣服换个颜色或图案风格(七)