ajax接收后台的text、HTML、xml、json数据，及其文件数据
来源：互联网 发布：毕向东java视频百度云 编辑：程序博客网 时间：2024/05/21 11:28
一、ajax接收来自后台的text、HTML、xml、json数据
indexData.jsp：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> function getXMLHttpRequest() { var xmlReq; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlReq = new XMLHttpRequest(); } else {// code for IE6, IE5 xmlReq = new ActiveXObject("Microsoft.XMLHTTP"); } return xmlReq; } //返回文本数据测试 function ajaxText() { var oReq = getXMLHttpRequest(); oReq.open("POST", "TextData", true); oReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //提交表单必须 oReq.send("name=我是文本&pwd=123"); oReq.onreadystatechange = function() { if (oReq.readyState == 4 && oReq.status == 200) { document.getElementById("myDiv").innerHTML = oReq.responseText; //Text文本形式接收 } } } //返回XML文档测试 function ajaxXML() { var oReq = getXMLHttpRequest(); oReq.open("POST", "XmlData", true); oReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //提交表单必须 oReq.send("name=我是xml&pwd=111"); oReq.onreadystatechange = function() { if (oReq.readyState == 4 && oReq.status == 200) { var xmlObj=oReq.responseXML; //xml形式接收, 返回xml的Document对象 var names=xmlObj.documentElement.getElementsByTagName("name"); //xml的Document对象的documentElement属性可返回文档的根节点<user> var name=names[0].firstChild.nodeValue; var pwds=xmlObj.documentElement.getElementsByTagName("pwd"); var pwd=pwds[0].firstChild.nodeValue; document.getElementById("myDiv").innerHTML=name+","+pwd; } } } //返回json文档测试 function ajaxJSON() { var oReq = getXMLHttpRequest(); oReq.open("POST", "JsonData", true); oReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //提交表单必须 oReq.send("name=我是json&pwd=111"); oReq.onreadystatechange = function() { if (oReq.readyState == 4 && oReq.status == 200) { var resObj=oReq.responseText; //json字符串用文本形式接收 var jsonObj1=eval('('+resObj+')'); //注释:JSON.parse(字符串) 与 eval('('+字符串+')') 都是将json字符串解析为json对象(反序列化) var name1=jsonObj1.name; //注释:JSON.stringify(json对象) 是将json对象解析为json字符串(序列化) var pwd1=jsonObj1.pwd; document.getElementById("myDiv").innerHTML=name1+","+pwd1; } } } //返回html function ajaxHTML() { var oReq = getXMLHttpRequest(); oReq.open("POST", "HtmlData", true); oReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //提交表单必须 oReq.send("name=我是html&pwd=111"); oReq.onreadystatechange = function() { if (oReq.readyState == 4 && oReq.status == 200) { var resObj=oReq.responseText; //html用文本形式接收 document.getElementById("myDiv").innerHTML=resObj; } } } </script> </head> <body> <p style="color: red;">ajax接收来自servlet的文本/xml/json/html</p><hr><button onclick="ajaxText()">请求文本</button> <button onclick="ajaxXML()">请求XML文档</button> <button onclick="ajaxJSON()">请求json字符串</button> <button onclick="ajaxHTML()">请求html</button> <div id="myDiv"></div> </body> </html> TextDataServlet：
package ServletDataType;import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.ServletOutputStream; import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet("/TextData")public class TextDataServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("in text"); request.setCharacterEncoding("utf-8"); String name=request.getParameter("name"); String pwd=request.getParameter("pwd"); System.out.println("name:"+name+",pwd:"+pwd); //返回文本数据 response.setContentType("text/plain;charset=utf-8"); ServletOutputStream outputStream = response.getOutputStream(); outputStream.write(name.getBytes("utf-8")); outputStream.write(pwd.getBytes("utf-8")); outputStream.flush(); outputStream.close(); } } HtmlDataServlet：
package ServletDataType;import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.ServletOutputStream; import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet("/HtmlData")public class HtmlDataServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("in html"); request.setCharacterEncoding("utf-8"); String name=request.getParameter("name"); String pwd=request.getParameter("pwd"); System.out.println("name:"+name+",pwd:"+pwd); //返回html文档 response.setContentType("text/html;charset=utf-8"); response.setHeader("Cache-control", "no-cache"); ServletOutputStream outputStream = response.getOutputStream(); String res="<font size='2' color='blue'>"+name+pwd+"</font>"; System.out.println(res); outputStream.write(res.getBytes("utf-8")); outputStream.flush(); outputStream.close(); } } XmlDataServlet：
package ServletDataType;import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.ServletOutputStream; import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet("/XmlData")public class XmlDataServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("in xml"); request.setCharacterEncoding("utf-8"); String name=request.getParameter("name"); String pwd=request.getParameter("pwd"); System.out.println("name:"+name+",pwd:"+pwd); //返回xml文档 response.setContentType("text/xml;charset=utf-8"); response.setHeader("Cache-control", "no-cache"); ServletOutputStream outputStream = response.getOutputStream(); StringBuffer sb=new StringBuffer(); sb.append("<?xml version='1.0' encoding='utf-8'?>"); sb.append("<user><name>"+name+"</name><pwd>"+pwd+"</pwd></user>"); System.out.println(sb); outputStream.write(sb.toString().getBytes("utf-8")); outputStream.flush(); outputStream.close(); } } JsonDataServlet：
package ServletDataType;import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.ServletOutputStream; import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet("/JsonData")public class JsonDataServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("in json"); request.setCharacterEncoding("utf-8"); String name=request.getParameter("name"); String pwd=request.getParameter("pwd"); System.out.println("{'name':"+name+",'pwd':"+pwd+"}"); //返回json字符串数据 response.setContentType("application/json;charset=utf-8"); ServletOutputStream outputStream = response.getOutputStream(); String res="{'name':'"+name+"','pwd':'"+pwd+"'}"; //json字符串要写成"{'name':'tom'}"的形式，里面的key和value也要加''写成字符串的形式 System.out.println(res); outputStream.write(res.getBytes("utf-8")); outputStream.flush(); outputStream.close(); } } 二、ajax接收来自后台的text、HTML、xml、json文件数据
导入的jar包：
indexFile.jsp：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" > function getXMLHttpRequest() { var xmlReq; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlReq = new XMLHttpRequest(); } else {// code for IE6, IE5 xmlReq = new ActiveXObject("Microsoft.XMLHTTP"); } return xmlReq; } //返回文本数据测试 ------------------------------------------------------------------------ function ajaxText() { var oReq = getXMLHttpRequest(); oReq.open("POST", "TextFile", true); oReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); oReq.send(null); oReq.onreadystatechange = function() { if (oReq.readyState == 4 && oReq.status == 200) { document.getElementById("myDiv").innerHTML = oReq.responseText; } } } //返回XML文档测试 --------------------------------------------------------------------- function ajaxXML() { var oReq = getXMLHttpRequest(); oReq.open("POST", "XmlFile", true); oReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); oReq.send(null); oReq.onreadystatechange = function() { if (oReq.readyState == 4 && oReq.status == 200) { var xmlObj = oReq.responseXML; //返回xml的Document对象 /* document.getElementById("myDiv").innerHTML += xmlObj.firstChild.nodeName+"--"+xmlObj.firstChild.textContent+"<br>"; *///文档注释 var root = xmlObj.documentElement; //返回文档对象的根节点<books> document.getElementById("myDiv").innerHTML += root.nodeName+"<br>"; //等价于tagName属性 document.getElementById("myDiv").innerHTML += root.lastChild.nodeName+" "+root.lastChild.textContent+"<br>"; //user var bookList = root.childNodes; for(var i=0; i<bookList.length; i++){ var book = bookList[i]; var attr = book.getAttributeNode("show"); document.getElementById("myDiv").innerHTML += book.nodeName+" "+attr.name+"="+attr.value+"<br>"; var childList = book.childNodes; for(var j=0; j<childList.length; j++){ var child = childList[j]; document.getElementById("myDiv").innerHTML += child.nodeName+" "+child.textContent+"<br>"; } } } } } //返回json文档测试 ------------------------------------------------------------------------- function ajaxJSON() { var oReq = getXMLHttpRequest(); oReq.open("POST", "JsonFile", true); oReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); oReq.send(null); oReq.onreadystatechange = function() { if (oReq.readyState == 4 && oReq.status == 200) { var resObj=oReq.responseText; var jsonObj=JSON.parse(resObj); //注释:JSON.parse(字符串) 与 eval('('+字符串+')') 都是将json字符串解析为json对象(反序列化) //注释:JSON.stringify(json对象) 是将json对象解析为json字符串(序列化) for(i in jsonObj){ document.getElementById("myDiv").innerHTML += i+"<br>"; if(i == "user"){ alert(jsonObj.user.name); var user = jsonObj.user; for(j in user){ document.getElementById("myDiv").innerHTML += j+":"+user[j]+"<br>"; //j是user的属性, user[j]是user的属性值 。 } } if(i == "array"){ alert(jsonObj.array[1]); var arrayObj = jsonObj.array; for(j in arrayObj){ document.getElementById("myDiv").innerHTML += j+"<br>"; } } if(i == "arraylist"){ alert(jsonObj.arraylist[1].name1); var arraylistObj = jsonObj.arraylist; for(j in arraylistObj){ //arraylistObj是数组, 包含多个对象元素 。 var obj = arraylistObj[j]; for(k in obj){ //obj对象元素, 含有多个属性 。 document.getElementById("myDiv").innerHTML += k+":"+obj[k]+"<br>"; } } } } } } } //返回html --------------------------------------------------------------------------------- function ajaxHTML() { var oReq = getXMLHttpRequest(); oReq.open("POST", "HtmlFile", true); oReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); oReq.send(null); oReq.onreadystatechange = function() { if (oReq.readyState == 4 && oReq.status == 200) { var resObj=oReq.responseText; document.getElementById("myDiv").innerHTML=resObj; } } } </script> </head> <body> <p style="color: blue;">ajax接收来自servlet的文本/xml/json/html文件数据</p><hr><button onclick="ajaxText()">ajax请求文本</button> <button onclick="ajaxXML()">ajax请求XML</button> <button onclick="ajaxJSON()">ajax请求json</button> <button onclick="ajaxHTML()">ajax请求html</button> <div id="myDiv"></div> </body> </html> E:/MyEclipse/AjaxAcceptServletData/book.txt：
静夜思床前明月光，疑是地上霜。举头望明月，低头思故乡。TextFileServlet：
package ServletFileType;import java.io.BufferedReader;import java.io.FileNotFoundException;import java.io.FileReader;import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.ServletOutputStream; import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet("/TextFile")public class TextFileServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setCharacterEncoding("utf-8"); request.setCharacterEncoding("utf-8"); response.setContentType("text/plain;charset=utf-8"); //从文件读取 BufferedReader reader = null; String s = ""; String str = ""; try{ reader = new BufferedReader(new FileReader("E:/MyEclipse/AjaxAcceptServletData/book.txt")); while((s=reader.readLine()) != null){ //每调用一次readLine(), 就读取一行数据(有数据的话)。 str += s; } System.out.println(str); }catch(FileNotFoundException e){ e.printStackTrace(); }finally { reader.close(); } //发送数据 ServletOutputStream outputStream = response.getOutputStream(); outputStream.write(str.getBytes()); outputStream.flush(); outputStream.close(); } } E:/MyEclipse/AjaxAcceptServletData/message.html：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>HTML Demo</title></head><body><form action="表单验证.html" method="post" id="f"><input class="i" type="text" name="name" value="赵凯鹏"><input class="i" type="password" name="pass" value="123456"><input class="i" type="submit" value="注册"></form><div><img src="https://www.baidu.com/img/bd_logo1.png" width="100px" height="50px"><a href="https://www.baidu.com/" target="_blank">百度</a></div><table border="2" width="400px" cellpadding="10" cellspacing="0" bgcolor="aqua"><tbody><tr><td colspan="3" align="center">星期一菜谱</td></tr><tr><td rowspan="2" align="center">荤菜</td><td id="y" align="center">鱼香肉丝</td><td id="c" align="center">油焖大虾</td></tr><tr><td align="center">海参鲍鱼</td><td align="center">龙肝凤胆</td></tr></tbody></table></body></html>HtmlFileServlet：
package ServletFileType;import java.io.File;import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.ServletOutputStream; import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.jsoup.Jsoup;import org.jsoup.nodes.Document; @WebServlet("/HtmlFile")public class HtmlFileServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); response.setHeader("Cache-control", "no-cache"); //读文件 File input = new File("E:/MyEclipse/AjaxAcceptServletData/message.html"); Document doc = null;try {doc = Jsoup.parse(input, "UTF-8", "http://example.com/"); } catch (IOException e) {e.printStackTrace();} //发送 ServletOutputStream outputStream = response.getOutputStream(); outputStream.write(doc.toString().getBytes("utf-8")); System.out.println(doc.toString()); outputStream.flush(); outputStream.close(); } } E:/MyEclipse/AjaxAcceptServletData/book.xml：
<?xml version="1.0" encoding="UTF-8"?><!--文档注释 --><books><book show="yes"><!--元素注释 --><name>西游记</name><price>66</price></book><book show="yes"><name>红楼梦</name><price>88</price></book><book show="no"><name>三国志</name><price>99</price></book><user>赵凯鹏</user></books>XmlFileServlet：
package ServletFileType;import java.io.File;import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.ServletOutputStream; import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.dom4j.Document;import org.dom4j.DocumentException;import org.dom4j.io.SAXReader;@WebServlet("/XmlFile")public class XmlFileServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setContentType("text/xml;charset=utf-8"); response.setHeader("Cache-control", "no-cache"); //读取XML文件,获得document对象SAXReader reader = new SAXReader(); String xmlString = null;try { reader.setEncoding("utf-8");Document document = reader.read(new File("E:/MyEclipse/AjaxAcceptServletData/book.xml"));xmlString = document.asXML(); //document ==> String } catch (DocumentException e) {e.printStackTrace();} ServletOutputStream outputStream = response.getOutputStream(); StringBuffer sb=new StringBuffer(); sb.append(xmlString); System.out.println(sb); outputStream.write(sb.toString().getBytes("utf-8")); outputStream.flush(); outputStream.close(); } } E:/MyEclipse/AjaxAcceptServletData/book.json：
{ "user":{ "name":"赵凯鹏", "age":23, "birth":"1991-10-28 00:00:00", "address":"北京" }, "array":[ 10, 20, 30 ], "arraylist":[ { "name0":"赵0", "age0":10, "addr0":"科技0路" }, { "name1":"赵1", "age1":11, "addr1":"科技1路" }, { "name2":"赵2", "age2":12, "addr2":"科技2路" } ]}JosnFileServlet：
package ServletFileType;import java.io.FileNotFoundException;import java.io.FileReader;import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.ServletOutputStream; import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.alibaba.fastjson.JSONReader;@WebServlet("/JsonFile")public class JosnFileServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); response.setHeader("Cache-control", "no-cache"); //读取json文件的json字符串 JSONReader reader = null;try {reader = new JSONReader(new FileReader("E:/MyEclipse/AjaxAcceptServletData/book.json"));} catch (FileNotFoundException e) {e.printStackTrace();}StringBuffer sb=new StringBuffer();sb.append("{");reader.startObject();while(reader.hasNext()){String name = reader.readString();String value = reader.readObject().toString();sb.append("\""+name+"\":"+value+","); //最后一个,是多余的}reader.endObject();reader.close();sb.deleteCharAt(sb.length()-1); //删除最后一个,sb.append("}");//发送到ajax ServletOutputStream outputStream = response.getOutputStream(); System.out.println(sb); outputStream.write(sb.toString().getBytes("utf-8")); /* {"user":{"address":"北京","name":"赵凯鹏","birth":"1991-10-28 00:00:00","age":23}, "array":[10,20,30], "arraylist":[{"addr0":"科技0路","age0":10,"name0":"赵0"},{"addr1":"科技1路","name1":"赵1","age1":11},{"addr2":"科技2路","name2":"赵2","age2":12}]} */ outputStream.flush(); outputStream.close(); } } 参考：zzz
阅读全文
0 0
- ajax接收后台的text、HTML、xml、json数据，及其文件数据
- ThinkPHP Ajax 接收后台Json数据
- 使用ajax接收后台发送过来的json数据
- ajax 接收json,xml类型数据
- AJAX第一步：AJAX接收返回类型为text/html的字符串数据
- 后台接收JSON数据乱码的解决方案
- AJAX第二步：AJAX接收返回类型为text/XML的数据
- jquery ajax请求返回xml,html,text,json,..数据实例详解
- ajax处理数据（html,xml,json）
- 使用JQuery的Ajax操作html，xml，json数据
- ajax json 前台传数据到后台，后台接收并返回json 数据
- springmvc接收ajax的json格式数据
- 前端ajax数据后台接收
- XML/JSON 后台数据
- ajax接收java后台传过来的json数据乱码及获取字段undefind问题
- ajax获取后台的json数据
- MVC3/4项目开发中遇到的ajax提交Json数据到后台Controller处理（接收参数：多重JSON）
- Ajax前台返回JSON数据后再Controller中直接转换成类型使用，后台接收json转成实体的方法
- Qt：天气预报小程序
- 如何增肌之训练计划
- PyQt5学习教程12：数学表达式解析程序
- Ubuntu16.04LTS上安装Python3.6.3
- MAC显示隐藏文件
- ajax接收后台的text、HTML、xml、json数据，及其文件数据
- linux下的初始状态下，根目录各个文件夹的作用与说明
- 171028 逆向-以CM41为例进行Dll注入（上）
- linux redhat安装git
- Salesforce修改相关列表标签名
- 基于树莓派使用DuerOS的笔记，待续
- 关于java中的static关键词
- 没事不要用 rxjava 的create 操作符
- dijkstra板子
