ajax 三种数据格式
1.JSON（格式要正确，可以引jar包操作）
servlet代码
package com.hsp.action; import java.io.IOException;
import java.io.PrintWriter; import javax.json.JsonString;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; /**
* Servlet implementation class showCities
*/
@WebServlet("/showCities")
public class showCities extends HttpServlet {
private static final long serialVersionUID = 1L; /**
* @see HttpServlet#HttpServlet()
*/
public showCities() {
super();
// TODO Auto-generated constructor stub
} /**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
} /**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setContentType("text/xml;charset=utf-8");
response.setHeader("Cache-Control", "no-cache"); //接收用户选择的省的名字
String shengString=request.getParameter("province");
System.out.println(shengString);
PrintWriter out=response.getWriter();
StringBuilder builder=new StringBuilder(); String info=""; // if ("zhejiang".equals(shengString)) {
// System.out.println("浙江");
// info="<province><city>杭州</city><city>温州</city><city>宁波</city></province>";
// }
// else if ("jiangsu".equals(shengString)) {
// System.out.println("江苏");
//
// info="<province><city>南京</city><city>徐州</city><city>苏州</city></province>";
// }
if ("zhejiang".equals(shengString))
{
info= "[{"+'"'+"city"+'"'+":"+'"'+"杭州"+'"'+"},{"+'"'+"city"+'"'+":"+'"'+"温州"+'"'+"}]";
}
else if ("jiangsu".equals(shengString)) {
info= "[{"+'"'+"city"+'"'+":"+'"'+"南京"+'"'+"},{"+'"'+"city"+'"'+":"+'"'+"苏州"+'"'+"}]"; }
System.out.println("{"+'"'+"ins"+'"'+":"+info+"}");
builder.append("{"+'"'+"ins"+'"'+":"+info+"}"); out.println(builder.toString());
} }
jsp代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"> <title>My JSP 'Mycity.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
--> </head> <body>
<script type="text/javascript">
//1.创建ajax引擎
function getXmlHttpObject(){
var xmlHttpRequest;
//不同的浏览器获取对象xmlhttprequest对象方法不一样
if(window.ActiveXobject)
{
xmlHttpRequest=new ActiveXobject("Microsoft.XMLHTTP");
}
else
{
xmlHttpRequest=new XMLHttpRequest();
}
return xmlHttpRequest;
} //新建myXmlHttpRequest对象
var myXmlHttpRequest=""; function getCities(){
//创建对象
myXmlHttpRequest=getXmlHttpObject();
// window.alert(myXmlHttpRequest);
//如果创建成功，则进行post请求
if(myXmlHttpRequest){
//创建url
var url="/ajax/showCities";//post
//携带的参数
var data="province="+$('sheng').value;
//
myXmlHttpRequest.open("post",url,true);
//必填
myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//指定回调函数
myXmlHttpRequest.onreadystatechange=chuli;
//发送请求
myXmlHttpRequest.send(data); } } function chuli(){
if(myXmlHttpRequest.readyState==4){
var mes= myXmlHttpRequest.responseText;
window.alert(mes);
var mes_obj=eval("("+mes+")");
window.alert(mes_obj);
window.alert(mes_obj.ins[0].city);
// $('myres').value=mes_obj.info; //取出xml格式数据
/* if(myXmlHttpRequest.status==200)
{
//取出服务器回送的数据
window.alert(myXmlHttpRequest.responseXML);
var cities= (myXmlHttpRequest.responseXML.getElementsByTagName("city"));
//window.alert(cities.length);
//alert(cities[1].lastChild.nodeValue);
for(var i=0;i<cities.length;i++)
{alert(cities[i].childNodes[0].nodeValue);}
} */ } } function $(id)
{
return document.getElementById(id);
} </script> This is my JSP page. <br> <select id="sheng" onchange="getCities();">
<option value="">---省---</option>
<option value="zhejiang">浙江</option>
<option value="jiangsu">江苏</option>
</select> <select id="city" onchange="sendRequest();">
<option value="">--城市--</option>
</select> <select id="country" onchange="sendRequest();">
<option value="">--县城--</option>
</select> </body>
</html>
2.xml格式
servlet代码
package com.hsp.action; import java.io.IOException;
import java.io.PrintWriter; import javax.json.JsonString;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; /**
* Servlet implementation class showCities
*/
@WebServlet("/showCities")
public class showCities extends HttpServlet {
private static final long serialVersionUID = 1L; /**
* @see HttpServlet#HttpServlet()
*/
public showCities() {
super();
// TODO Auto-generated constructor stub
} /**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
} /**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setContentType("text/xml;charset=utf-8");
response.setHeader("Cache-Control", "no-cache"); //接收用户选择的省的名字
String shengString=request.getParameter("province");
System.out.println(shengString);
PrintWriter out=response.getWriter();
StringBuilder builder=new StringBuilder(); String info=""; if ("zhejiang".equals(shengString)) {
System.out.println("浙江");
info="<province><city>杭州</city><city>温州</city><city>宁波</city></province>";
}
else if ("jiangsu".equals(shengString)) {
System.out.println("江苏"); info="<province><city>南京</city><city>徐州</city><city>苏州</city></province>";
}
// if ("zhejiang".equals(shengString))
// {
// info= "[{"+'"'+"city"+'"'+":"+'"'+"杭州"+'"'+"},{"+'"'+"city"+'"'+":"+'"'+"温州"+'"'+"}]";
// }
// else if ("jiangsu".equals(shengString)) {
// info= "[{"+'"'+"city"+'"'+":"+'"'+"南京"+'"'+"},{"+'"'+"city"+'"'+":"+'"'+"苏州"+'"'+"}]";
//
// }
// System.out.println("{"+'"'+"ins"+'"'+":"+info+"}");
// builder.append("{"+'"'+"ins"+'"'+":"+info+"}");
builder.append(info);
out.println(builder.toString());
} }
jsp代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"> <title>My JSP 'Mycity.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
--> </head> <body>
<script type="text/javascript">
//1.创建ajax引擎
function getXmlHttpObject(){
var xmlHttpRequest;
//不同的浏览器获取对象xmlhttprequest对象方法不一样
if(window.ActiveXobject)
{
xmlHttpRequest=new ActiveXobject("Microsoft.XMLHTTP");
}
else
{
xmlHttpRequest=new XMLHttpRequest();
}
return xmlHttpRequest;
} //新建myXmlHttpRequest对象
var myXmlHttpRequest=""; function getCities(){
//创建对象
myXmlHttpRequest=getXmlHttpObject();
// window.alert(myXmlHttpRequest);
//如果创建成功，则进行post请求
if(myXmlHttpRequest){
//创建url
var url="/ajax/showCities";//post
//携带的参数
var data="province="+$('sheng').value;
//
myXmlHttpRequest.open("post",url,true);
//必填
myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//指定回调函数
myXmlHttpRequest.onreadystatechange=chuli;
//发送请求
myXmlHttpRequest.send(data); } } function chuli(){
if(myXmlHttpRequest.readyState==4){
// var mes= myXmlHttpRequest.responseText;
/* window.alert(mes);
var mes_obj=eval("("+mes+")");
window.alert(mes_obj);
window.alert(mes_obj.ins[0].city); */
// $('myres').value=mes_obj.info; //取出xml格式数据
if(myXmlHttpRequest.status==200)
{
//取出服务器回送的数据
window.alert(myXmlHttpRequest.responseXML);
var cities= (myXmlHttpRequest.responseXML.getElementsByTagName("city"));
//window.alert(cities.length);
//alert(cities[1].lastChild.nodeValue);
for(var i=0;i<cities.length;i++)
{alert(cities[i].childNodes[0].nodeValue);}
} } } function $(id)
{
return document.getElementById(id);
} </script> This is my JSP page. <br> <select id="sheng" onchange="getCities();">
<option value="">---省---</option>
<option value="zhejiang">浙江</option>
<option value="jiangsu">江苏</option>
</select> <select id="city" onchange="sendRequest();">
<option value="">--城市--</option>
</select> <select id="country" onchange="sendRequest();">
<option value="">--县城--</option>
</select> </body>
</html>
3.text格式
servlet 格式
package com.hsp.action; import java.io.IOException;
import java.io.PrintWriter; 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; /**
* Servlet implementation class registerServlet
*/
@WebServlet("/registerServlet")
public class registerServlet extends HttpServlet {
private static final long serialVersionUID = 1L; /**
* @see HttpServlet#HttpServlet()
*/
public registerServlet() {
super();
// TODO Auto-generated constructor stub
} /**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub //接受数据
//String username=request.getParameter("username");
//System.out.println(username);
String infoString="";
if ("shunping".equals("")) {
infoString="用户名不可用";
}
else {
infoString="用户名可用"; }
//返回文本数据
// response.setContentType("text/;charset=utf-8");
//返回xml格式文件
response.setContentType("text/xml;charset=utf-8"); response.setHeader("Cache-Control", "no-cache"); //返回xml 格式数据
PrintWriter out=response.getWriter();
StringBuilder builder=new StringBuilder();
// builder.append("<message>");
// builder.append(infoString).append("</message>"); // builder.append( "{"+'"'+"info"+'"'+":" ).append('"'+infoString+'"'+"}");
builder.append(infoString);
out.println(builder.toString()); //返回text格式数据
// ServletOutputStream outputStream = response.getOutputStream();
// outputStream.write(infoString.getBytes("utf-8"));
// //outputStream.write(pwd.getBytes("utf-8"));
// outputStream.flush();
// outputStream.close();
} /**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
} }
jsp格式
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head> <body>
<script type="text/javascript"> //创建ajax引擎
function getXmlHttpObject(){
var xmlHttpRequest;
//不同的浏览器获取对象xmlhttprequest对象方法不一样
if(window.ActiveXobject)
{
xmlHttpRequest=new ActiveXobject("Microsoft.XMLHTTP");
}
else
{
xmlHttpRequest=new XMLHttpRequest();
}
return xmlHttpRequest;
} var myXmlHttpRequest=null;
//验证用户名是否存在
function checkName()
{ myXmlHttpRequest=getXmlHttpObject(); // window.alert(myXmlHttpRequest); if(myXmlHttpRequest ){
// window.alert("创建成功");
//通过myXmlHttpRequest对象发送请求到服务器的某个页面
//1.第一个参数表示请求的方式，"get"/"post"
//2.第二个参数指定url,对哪个页面发出ajax请求（本质仍然是http请求）
//3.第三个参数 true表示使用异步机制，如果false，表示不使用异步
var url="/ajax/registerServlet?mytime="+new Date()+"&username="+$("username").value
//打开请求
myXmlHttpRequest.open("post",url,true);
//window.alert(url);
//指定回调函数,chuli 是函数名
myXmlHttpRequest.onreadystatechange=chuli;
//真的发送函数,如果是get请求，则填入null即可
//如果是post请求，则填入实际的数据
myXmlHttpRequest.send(null); } } //回调函数
function chuli(){
//window.alert("处理函数被调用"+myXmlHttpRequest.readyState);
//取出从serlet返回的数据
if(myXmlHttpRequest.readyState==4)
{
//取出值，文本格式
//window.alert("服务器返回"+myXmlHttpRequest.responseText)
//
//window.alert( "xml:"+myXmlHttpRequest.responseXML);
//获取message节点
// var mes=myXmlHttpRequest.responseXML.getElementsByTagName("message");
//window.alert(mes.length);
//取出message节点
//es[0]-->表示取出第一个message节点
//childNodes[0]表示message节点的第一个子节点
// var mes_val=mes[0].childNodes[0].nodeValue;
//window.alert(mes_val);
// ${'myres'}.value= mes_val;
//$('myres').value=myXmlHttpRequest.responseText;
/* var mes= myXmlHttpRequest.responseText;
window.alert(mes);
var mes_obj=eval("("+mes+")");
//window.alert(mes_obj.info);
$('myres').value=mes_obj.info;
*/
var mes= myXmlHttpRequest.responseText; $('myres').value=mes; }
} function $(id)
{
return document.getElementById(id);
} </script> This is my JSP page. <br>
<form action="???" method="post"> 用户名：<input type="text"name="username1" onkeyup="checkName();" id="username">
<input type="button" onclick="checkName();" value="验证用户名">
<input style="border-width: 0;color: red" type="text" id="myres"><br>
用户密码：<input type="password" name="password"><br>
电子邮件:<input type="text" name="email"><br>
<input type="submit" value="用户注册">
</form> </body>
</html>
ajax 三种数据格式的更多相关文章
- Ajax——三种数据传输格式
一.HTML HTML由一些普通文本组成.如果服务器通过XMLHTTPRequest发送HTML,文本将存储在responseText属性中. 从服务器端发送的HTML的代码在浏览器端不需要用Java ...
- AJAX三种返回值方式
(一)TEXT方式 该方式返回的是拼接字符串,想要取到其中的值,需要先将返回值进行拆分 (二)JSON方式 该方式返回的是数组,想要取到其中的值,可用索引项进行提取 (三)XML方式 XML:可扩展标 ...
- [jquery-ajax] jquery ajax 三种情况对比
<button class="btn1">async:false</button> <button class="btn2"> ...
- json，xml，html三种数据格式
json.xml.html xml解析如下: 1.DOM:基于XML文档树结构的解析 解析器读入整个文档,然后构建一个驻留内存的树结构,然后代码就可以使用 DOM 接口来操作这个树结构.优点:整个文档 ...
- 2019年6月14日 Web框架之Django_07 进阶操作（MTV与MVC、多对多表三种创建方式、前后端传输数据编码格式contentType、ajax、自定义分页器）
摘要 MTV与MVC 多对多表三种创建方式 ajax ,前后端传输数据编码格式contentType 批量插入数据和自定义分页器 一.MVC与MTV MVC(Model View Controller ...
- AJAX实现跨域的三种方法
由于在工作中需要使用AJAX请求其他域名下的请求,但是会出现拒绝访问的情况,这是因为基于安全的考虑,AJAX只能访问本地的资源,而不能跨域访问. 比如说你的网站域名是aaa.com,想要通过AJAX请 ...
- Ajax的三种实现及JSON解析
本文为学习笔记,属新手文章,欢迎指教!! 本文主要是比较三种实现Ajax的方式,为以后的学习开个头. 准备: 1. prototype.js 2. jquery1.3.2.min.js 3. j ...
- 上传文件的三种方式xhr,ajax和iframe及上传预览
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- MVC异步AJAX的三种方法（JQuery的Get方法、JQuery的Post方法和微软自带的异步方法）
异步是我们在网站开发过程中必不可少的方法,MVC框架的异步方法也有很多,这里介绍三种方法: 一.JQuery的Get方法 view @{ Layout = null; } <!DOCTYPE h ...
随机推荐
- css at @ 规则
css相信我们都不陌生,但是我们真的对它非常了解吗? css主要分为两种规则组成: 一种被称为 at-rule,也就是 at 规则 另一种是 qualified rule,也就是普通规则 今天让我们来 ...
- 解决Java getResource 路径中含有中文的情况
问题描述 当Java调用getResource方法,但是因为路径中含有中文时,得不到正确的路径 问题分析 编码转换问题 当我们使用ClassLoader的getResource方法获取路径时,获取到的 ...
- vue-cli3.X 打包后上传服务器刷新报 404的问题
vue-cli3.X 默认配置 比2.X体验好很多,比如路由 如图,本地正常,传到服务器,因为二级目录,刷新就404,或 502等,找不到文件 nginx解决: location /{ error_p ...
- Silverlight Visifire控件应用去除图标的水印
首先,新建一个类,继承自Chart,重写LoadWatermark方法. 再创建图表实例的时候就不能new Chart实例了,直接使用MyCharts. 使用去除水印之前的图片: 使用去除水印之后的图 ...
- js高级知识---词法分析和AO 链
转载自https://www.cnblogs.com/OceanHeaven/p/4957704.html 上面一篇文章说了js的作用域链,这一节算是对上面的延申,有一个典型的例子,首先看原来的一段代 ...
- 51nod 1035 最长的循环节
正整数k的倒数1/k,写为10进制的小数如果为无限循环小数,则存在一个循环节,求<=n的数中,倒数循环节长度最长的那个数,假如存在多个最优的答案,输出所有答案中最大的那个数. 1/6= 0.1( ...
- swagger-ui中测试接口（enum传值） 报400错误
swagger-ui中测试接口(enum传值) 报400错误 PriceRuleController: @PostMapping("/update") @ApiOperation( ...
- MinGW GCC 8.1.0 2018年5月2日 出炉啦
MSYS_MinGW-w64_GCC_810_x86-x64.7z for x86 x64 59.0 MB发布日期: 2018-05-04 下载地址:https://sourceforge.net/p ...
- java中的stream的泛型方法的使用示例
本文章使用jdk8测试 ,并结合使用lambda测试 测试前准备一些测试数据: class ObjectDemo { private Integer id; private String name; ...
- linux日志过滤某时间段的日志
sed -n '/2019-01-10 16:00*/,/2019-01-10 18:48*/p' nohup.out > 111.log