需要完成的任务：
主要是把JSP页面上图片ID传给服务器端，服务器读取cookie看是否有username，如果有则根据ID读取MongoDB数据库，读出图片URL，再存放到mysql中的collection数据库中，实现了收藏功能。
第一步：就是使用ajax实现前后台的交互。
jsp页面代码：
<a id="1" class="bsc" onclick="collect(this.id)"></a>
js代码：
<script>
function collect(id) { //var newwin=window.open()var str=document.getElementById(id).src;var arr=str.split("/"); //切片//alert(arr[5]); ????var re = /\d+/g; ??// 每次匹配至少一个数字 ?且全局匹配 ?如果不是全局匹配，当找到数字123，它就会停止了。就只会弹出123.加上全局匹配，就会从开始到结束一直去搜索符合规则的。如果没有加号，匹配的结果就是1，2，3，5，4，3，3，8，7，9并不是我们想要的，有了加号，每次匹配的数字就是至少一个了。var num = arr[5].match(re); ?//取图片名称，再用正则表达式匹配数字num = num[0];alert(num);
//以上是实现获取图片ID的功能；
//判断浏览器if(window.ActiveXObject){ ???myAjaxObject = new ActiveXObject("Microsoft XMLHTP");}else{ ???myAjaxObject = new XMLHttpRequest();}
/*
?1.open() 方法的 url 参数是服务器上文件的地址：该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，
??比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）,这里我是请求的是action，并把你想传送的数据放在后面，具体见代码。
2. 与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
- 无法使用缓存文件（更新服务器上的文件或数据库）
- 向服务器发送大量数据（POST 没有数据量限制）
- 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
3.true还是false，true是表示异步请求，异步请求就是，请求完服务器，可以不用只等待服务器响应，可以去执行其他操作，直到收到服务器响应。
4.send（）将请求发送到服务器
*/myAjaxObject.open("post","collect.action?date="+num,true);myAjaxObject.onreadystatechange = actionResponse; //看下面函数myAjaxObject.send();} //获取服务器响应
/*
responseText 获得字符串形式的响应数据。
还有其他属性，自行查找
这里我只测试读取一个数据，多数据可以循环读取
*/function actionResponse(){ ???if(myAjaxObject.readyState==4){ ???????if(myAjaxObject.status==200){ ???????????var returnJSONString = myAjaxObject.responseText; ???????????var returnJSON = JSON.parse(returnJSONString); ???????????var showString = ""; ???????????/*for(var i=0;i<returnJSON.length;i++){ ???????????????showString = ????????????}*/ ???????????showString = returnJSON[0]; ???????????alert(showString); ???????} ???}}
</script>structs.xml代码：
<action name="collect" class="action.collection" method="collect">
后台action代码：
package action;import java.io.IOException;import java.util.ArrayList;import java.util.List;import javax.servlet.http.HttpServletRequest;import org.apache.struts2.ServletActionContext;import com.opensymphony.xwork2.ActionSupport;import net.sf.json.JSONArray;import net.sf.json.JSONObject;public class collection extends ActionSupport{ ???public String collect() throws IOException{
//发送数据 ???????List listString = new ArrayList(); ???????listString.add("zx"); ???????JSONArray json = JSONArray.fromObject(listString); ???????System.out.println(json.toString()); ???????ServletActionContext.getResponse().setContentType("text/html"); ???????ServletActionContext.getResponse().setCharacterEncoding("utf-8"); ???????ServletActionContext.getResponse().getWriter().printf(json.toString()); ???????ServletActionContext.getResponse().getWriter().flush(); ???????ServletActionContext.getResponse().getWriter().close();
//接收数据 ???????String num = ServletActionContext.getRequest().getParameter("date"); ???????System.out.println(num); ???????return null; ???}}以上代码实现了简单的数据接收发送。以上的后台发送的数据类型是list中存放String，根据自己需要。可以list中存放Bean，Map中存放字符串或Bean发送。
同理，前台传送数据类型也可以根据需要改变类型
例如：
var info={
num:"data1",
num2:"data2",
}
完事了。接下来我要去实现读取cookie数据，判断用户是否处于登录状态，希望对你有帮助，有错误或改进的地方欢迎指正。
SSH框架下ajax调用action并生成JSON再传递到客户端【以get和post方式提交】
原文地址：https://www.cnblogs.com/zhxuxu/p/9028249.html