ajax与Servlet
1.后台返回text类型的数据
<%@ 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">
-->
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
//获取用户的输入
var name= $("#name").val();
$.ajax({
url:"AjaxServlet", /*对应的是web.xml文件中url 也是我们的请求路径 */
type:"post", /* 请求的方式 */
data:"name="+name, /* 请求中携带的数据 */
dataType:"text", /* 后台返回的数据类型 */
beforeSend:function(){
alert("请求正在处理。。。。。。");
},
success:function(data){
alert(data); }
});
});
});
</script> </head> <body> 用户名：<input type="text" id="name">
<input type="button" id="btn" value="请求ajax"> </body>
</html>
前台jsp页面
public class AjaxServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("进入了ajax..........");
response.setHeader("Content-type", "text/html;charset=utf-8");
// 01.获取ajax请求过来的name值
String name = request.getParameter("name");
response.getWriter().print(name);
}
}
创建对应的servlet
2.返回单个对象
public class Student {
private String name;
private String pwd;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPwd() {
return pwd;
}
public void setPwd(String pwd) {
this.pwd = pwd;
}
public Student(String name, String pwd) {
super();
this.name = name;
this.pwd = pwd;
}
public Student() {
super();
}
@Override
public String toString() {
return "Student [name=" + name + ", pwd=" + pwd + "]";
}
}
Student实体类
<%@ 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">
-->
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
//获取用户的输入
var name= $("#name").val();
$.ajax({
url:"AjaxServlet", /*对应的是web.xml文件中url 也是我们的请求路径 */
type:"post", /* 请求的方式 */
data:"name="+name, /* 请求中携带的数据 */
dataType:"json", /* 后台返回的数据类型 */
beforeSend:function(){
alert("请求正在处理。。。。。。");
},
success:function(data){
/* 返回集合 */ //返回单个对象 alert(data);
$("#myDiv").append("姓名："+data.name);
$("#myDiv").append("密码："+data.pwd);
}
});
});
});
</script> </head> <body> 用户名：<input type="text" id="name">
<input type="button" id="btn" value="请求ajax">
<div id="myDiv"></div> </body>
</html>
public class AjaxServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("进入了ajax..........");
response.setHeader("Content-type", "text/html;charset=utf-8");
// 创建一个Student对象 返回给前台
Student student = new Student("admin1", "123456");
// 需要把student对象转换成json格式
System.out.println("转换前==》" + student);
Gson gson = new Gson();
// json 就是转换之后的 student对象 {"name":"admin","pwd":"123456"}
String json = gson.toJson(student);
System.out.println("转换后==" + json);
response.getWriter().print(json);
}
}
对应的servlet
3.返回对象的集合
<%@ 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">
-->
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
//获取用户的输入
var name= $("#name").val();
$.ajax({
url:"AjaxServlet", /*对应的是web.xml文件中url 也是我们的请求路径 */
type:"post", /* 请求的方式 */
data:"name="+name, /* 请求中携带的数据 */
dataType:"json", /* 后台返回的数据类型 */
beforeSend:function(){
alert("请求正在处理。。。。。。");
},
success:function(data){
/* 返回集合 */
$("#myDiv").append("<span>姓名</span> ");
$("#myDiv").append("<span>密码</span></br>");
//遍历传递过来的json数组
$(data).each(function(i){
$("#myDiv").append("<span>"+data[i].name+"</span> ");
$("#myDiv").append("<span>"+data[i].pwd+"</span></br>");
}) }
});
});
});
</script> </head> <body> 用户名：<input type="text" id="name">
<input type="button" id="btn" value="请求ajax">
<div id="myDiv"></div> </body>
</html>
前台jsp页面
public class AjaxServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("进入了ajax..........");
response.setHeader("Content-type", "text/html;charset=utf-8");
Student student1 = new Student("admin1", "123456");
Student student2 = new Student("admin2", "123456");
Student student3 = new Student("admin3", "123456");
Student student4 = new Student("admin4", "123456");
ArrayList<Student> list = new ArrayList<Student>();
list.add(student1);
list.add(student2);
list.add(student3);
list.add(student4);
System.out.println("转换前==》" + list);
Gson gson = new Gson();
String json = gson.toJson(list);
System.out.println(json);
response.getWriter().print(json);
}
}
对应的servlet
ajax与Servlet的更多相关文章
- ajax和servlet交互，表单日历插件，表单验证，form.js
我的index.jsp <body> <a>点我获取数据</a> <table border=1px> <tr> <td>ID& ...
- ajax和servlet交互
网上有比较多的教程来将如何实现ajax与servlet的交互了,这里和这里的教程可以参考参考,在此处我只简单说明一下,并记录一下我这次遇到的问题. 整个思路是:写个js函数,在里面使用XHR(ajax ...
- Jquery+ajax+json+servlet原理和Demo
Jquery+ajax+json+servlet原理和Demo 大致过程: 用户时间点击,触发js,设置$.ajax,开始请求.服务器响应,获取ajax传递的值,然后处理.以JSON格式返回给ajax ...
- Ajax+Jsp+servlet+json技术的使用
Ajax+Jsp+servlet+json技术的使用 在使用json的时候,记得必须导入如下几个.jar包,最好是手动复制.jar包只lib路径下,否则可能出现异常. commons-beanutil ...
- servlet向ajax传递list数据类型，ajax向servlet传递array数据类型
因工作需要, 1,后台向前台传递一个list 2,前台向后台传递类似于list的结构,但是因为javascript不支持list类型,所以只能使用二维数组代替 后台运行后的截图: ...
- ajax调用servlet
1.利用myecilpse建立一个web项目 2.导入需要的包: commons-beanutils.jar commons-collections-3.1.jar commons-lan ...
- 服务器端AJAX的Servlet代码实现
package com.itheima.servlet; import java.io.IOException; import javax.servlet.ServletException; impo ...
- Ajax（6） Ajax向servlet请求数据库操作 并显示到当前页面 这个未经测试
假设:1.你的页面在Web-Root下,内容为: <div id="showMsg"></div><input type="text&quo ...
- ajax与servlet交互（通过JSON）,JAVA的arraylist传到前端的方法
所实现的效果:首先从前端(ajax)传参数给servlet,然后servlet经过处理,把arraylist类型的参数以JSON字符串的形式返回给前端(ajax),然后前端经过解析,把JSON字符串解 ...
随机推荐
- IE layout详解
引言: Internet Explorer 中有很多奇怪的渲染问题可以给他一个”layout”得到解决,John Gallant 和 Holly Bergevin把他归类为“dimensional b ...
- gitHub远程分支创建
1.在本地master上分出一个项目分支 git checkout -b bug1_dujie git checkout -b bug1_dujie origin/master 在远程添加分支 $gi ...
- python ATM购物程序
需求: 模拟实现一个ATM + 购物商城程序 额度 15000或自定义 实现购物商城,买东西加入 购物车,调用信用卡接口结账 可以提现,手续费5% 每月22号出账单,每月10号为还款日,过期未还,按欠 ...
- postgres常用类型
数值类型 名字 存储空间 描述 范围 smallint 2 字节 小范围整数 -32768 到 +32767 integer 4 字节 常用的整数 -2147483648 到 +2147483647 ...
- Swift互用性：采用Cocoa设计模式（Swift 2.0版）-b
本页包含内容: 委托(Delegation) 错误处理(Error Handling) 键值观察(Key-Value Observing) Target-Action模式(Target-Action) ...
- iPhone 被同步到 Mac上后 如果不希望更新到Mac上在哪里删除？
前往文件夹 /Users/用户名/Library/Application Support/MobileSync 直接删除 就行了(同时要倾倒废纸篓). 目前iPhone链接Mac 后 不让 ...
- 静态long类型常量serialVersionUID的作用
需要序列化的类需要实现Serializable接口,该接口没有任何方法,只是标示该类对象可被序列化. 序列化过程:使用一个输出流(如:FileOutputStream)来构造一个ObjectOutpu ...
- 2、vs2012无法从模型更新到数据库的问题
在模型设计视图空白处选择“从模型生成到数据库…”:不出意外的话应该是打开生成的脚本,当然也可能出现如下的错误,请下载最新的SQL Server Data Tool(我本地VS2012,数据库SQLSe ...
- Solr4.8.0源码分析(10)之Lucene的索引文件(3)
Solr4.8.0源码分析(10)之Lucene的索引文件(3) 1. .si文件 .si文件存储了段的元数据,主要涉及SegmentInfoFormat.java和Segmentinfo.java这 ...
- 维基百科上—数据仓库、数据挖掘、OLAP三者之间的区别
数据仓库可以作为数据挖掘和OLAP等分析工具的资料来源,由于存放于数据仓库中的资料,必需经过筛选与转换,因此可以避免分析工具使用错误的资料,而得到不正确的分析结果. 数据挖掘和OLAP同为分析工具,其 ...