需要完成的任务:
主要是把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数据,判断用户是否处于登录状态,希望对你有帮助,有错误或改进的地方欢迎指正。