您的位置：首页 > Web前端 > JQuery

最最基层的ajax交互代码jquery+java之间的json跨域传递以及java的json代码返回

2015-06-22 16:24 786 查看

首先导入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>

跑起来看看:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航