最最基层的ajax交互代码jquery+java之间的json跨域传递以及java的json代码返回
首先导入jar包
上面的jar包主要是用来将map或list数据转换成json字符串,传递到前台使用.
静态页面的代码:2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajax</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
function ajax(){
$.ajax({
url:"http://192.168.6.21:8080/jsonp/servlet/Ajax",
data:"data=guoyansi",
type:"get",
dataType:"jsonp",
jsonpCallback:"jsonpCallback",//自定义的jsonp回调函数名,默认为jQuery自动生成的随机函数
jsonp:"callbackparam",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为callback)
error:function(){alert("服务器连接失败");},
success:function(data){
data=eval(data);
for(var i=0;i<data.length;i++){
alert(data[i])
}
}
});
}
</script>
</head>
<body>
<input type="button" value="提交" onclick="ajax()" /> </body>
</html>
新建servlet,服务器端的servlet---ajax.java代码:
这里的web.xml就省略了.
返回list集合(数组)
package servlet; import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONArray; public class Ajax 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 {
//response.setHeader("Access-Control-Allow-Origin", "*");
response.setContentType("text/plain");
response.setCharacterEncoding("utf-8");
String jsonp=request.getParameter("callbackparam");
String name=request.getParameter("data");
System.out.println("param:"+name);
List<String> list=new ArrayList<String>();
list.add("abc");
list.add("dcc");
list.add("1");
list.add("2");
list.add("3434");
list.add("retr");
JSONArray jsonArray=JSONArray.fromObject(list);
String result=jsonArray.toString();
PrintWriter writer=response.getWriter();
writer.write(jsonp+"("+result+")");
} }
跑一下:
服务器端返回map数据(json)
修改ajax.java代码
package servlet; import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONArray;
import net.sf.json.JSONObject; public class Ajax 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 {
response.setContentType("text/plain");
response.setCharacterEncoding("utf-8");
String callbackparam=request.getParameter("callbackparam");
System.out.println("callbackparam:"+callbackparam);
String name=request.getParameter("data");
System.out.println("param:"+name);
Map<String, String> map=new HashMap<String, String>();
map.put("1", "a");
map.put("2", "b");
map.put("3", "c");
map.put("4", "d");
JSONObject jsonObject=JSONObject.fromObject(map);
String result=jsonObject.toString();
PrintWriter writer=response.getWriter();
writer.write(callbackparam+"("+result+")");
} }
修改页面代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajax</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
function ajax(){
$.ajax({
url:"http://192.168.6.21:8080/jsonp/servlet/Ajax",
data:"data=guoyansi",
type:"get",
dataType:"jsonp",
jsonp:"callbackparam",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为callback)
jsonpCallback:"success_jsonpCallback",//自定义的jsonp回调函数名,默认为jQuery自动生成的随机函数 error:function(){alert("服务器连接失败");},
success:function(data){
for(var key in data){
alert(key+":"+data[key]);
}
}
});
}
</script>
</head>
<body>
<input type="button" value="提交" onclick="ajax()" /> </body>
</html>
跑起来看看:
最最基层的ajax交互代码jquery+java之间的json跨域传递以及java的json代码返回的更多相关文章
- ajax的跨域解决方案(java+ajax)
简单的建立一个后台项目 新建servlet: 内容如下: package a; import java.io.IOException; import java.io.PrintWriter; impo ...
- Java利用cors实现跨域请求
由于ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互,而浏览器出于安全考虑,不允许js代码进行跨域操作,所以会警告 网站开发,在某些情况下需要用到跨域. 什么是跨域? 跨域,指 ...
- chrome浏览器下用jQuery的load函数来跨域加载页面,响应状态status为(canceled)是什么情况? JSON和JSONP,也许你会豁然开朗,含jQuery用例
http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html 问题来源:http://q.cnblogs.com ...
- 巧妙利用JQuery和Servlet来实现跨域请求
在网上看到很多的JQuery跨域请求的文章,比较有意思.这里我发表一个Servlet与JQuery配置实现跨域的代码,供大家参考.不足之处请指教 原理:JavaScript的Ajax不可以跨域,但是可 ...
- JQuery和Servlet来实现跨域请求
在网上看到很多的JQuery跨域请求的文章,比较有意思.这里我发表一个Servlet与JQuery配置实现跨域的代码,供大家参考.不足之处请指教 原理:JavaScript的Ajax不可以跨域,但是可 ...
- 用jQuery与JSONP轻松解决跨域访问的问题
浏览器端的真正跨域访问,推荐的是目前jQuery $.ajax()支持get方式的跨域,这其实是采用jsonp的方式来完成的. var qsData = {'searchWord':$("# ...
- C# 和Jsonp的一个小demo 用jQuery与JSONP轻松解决跨域访问的问题
客服端: 在A项目下面 建立一个 JsonpClient.aspx页面,代码如下: <%@ Page Language="C#" AutoEventWireup=& ...
- 用jQuery与JSONP轻松解决跨域访问的问题【转】
原文地址:http://www.jb51.net/article/46463.htm 好在,有jquery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅 ...
- Ajax跨域、Json跨域、Socket跨域和Canvas跨域等同源策略限制的解决方法
同源是指同样的协议.域名.port,三者都同样才属于同域.不符合上述定义的请求,则称为跨域. 相信每一个开发者都曾遇到过跨域请求的情况,尽管情况不一样,但问题的本质都能够归为浏览器出于安全考虑下的同源 ...
随机推荐
- MySQL之选择字段数据类型
MySQL支持的数据类型很多,选择正确的数据类型对于 获得高性能至关重要.在选择时有个简单的原则有助于做出更好的选择. 简单的原则: A.通常最小的是最好的 因为这样可以用更少的磁盘.内容.CPU缓存 ...
- Linux复制指定目录及子目录下特定类型的文件
首先建立一个用于测试的目录,用'tree'命令查看其结构如下所示: 可见,目录中主要包含用于测试的*.txt文件和用于充当炮灰的*.tes文件 目标是保持当前的目录结构,只把txt文件复制出来 方法一 ...
- Git服务器搭建及SSH无密码登录设置
在Git服务器中建立一个git帐号,用于多人使用. adduser git输入此命令后,会在/home/下建立一个git文件 /home/git 下建立.ssh目录(注意,是.ssh..有个点!) c ...
- CSS之background属性
css背景是个很有意思的东西,可设置 背景色:background-color 背景图:backgoround-image 背景图显示相对位置:background-position,正数图片往右下移 ...
- Live Writer安装报错的问题,OnCatalogResult:0x80190194
到官网下载了一个在线安装程序,可是一运行就提示无法安装,显式错误"OnCatalogResult:0x80190194",如下图所示 找到windows live安装程序的安装 ...
- smarty函数-继承extents
继承<{extends}> {extends}标签用在模版中的第一行: 如果子模板用{extends}标签继承父模板,那么它只能包含{block}标签(内容),其它任何模板内容都将忽略: ...
- WCF学习心得------(七)消息协定
第七章 消息协定 7.1 消息协定概述 通常情况下,在定义消息的架构时只使用数据协定就足够,但是有时需要精确控制如何将类型映射到通过网络传输的SOAP消息.对于这种情况,通常解决方案是插入自定义的SO ...
- Neutron LBaaS Service(2)—— Neutron Services Insertion Model
Service Insertion Service Insertion是Neutron中实现L4/L7层服务的框架.Neutron以前只有一级插件结构用于实现各种L2层技术(如LinuxBridge, ...
- ARM各种版本号知识以及型号的发展(三星为例)
1.ARM型号的发展历史 2.单片机.工业上一般使用RTOS(实时操作系统),Linux.Android用在影音娱乐等对实时性要求没那么高的场合: 3.ARM内核版本号和Soc版本号是由ARM确定的, ...
- activiti自定义流程之自定义表单(三):表单列表及预览和删除
注:(1)环境配置:activiti自定义流程之自定义表单(一):环境配置 (2)创建表单:activiti自定义流程之自定义表单(二):创建表单 自定义表单创建成功,要拿到activiti中使用,自 ...