Tasks that need to be completed:
The main is the JSP page ID to the server side, the server read the cookie to see if there is username, if there is the ID read the MONGODB database, read the image URL, and then stored in the MySQL collection database, to achieve the collection function.
The first step is to use Ajax to realize the interaction between the front and back tables.
JSP page code:
<id= "1" class= "BSc" onclick= "Collect (this.id)" ></a>
JS Code:
<script>
functionCollect (ID) {//var newwin=window.open ()varStr=document.getElementById (id). src;varArr=str.split ("/");//slices//alert (arr[5]); varre =/\d+/g;//matches at least one number at a time and the global match if it is not a global match, it will stop when the number 123 is found. It just pops up. 123. With a global match, the search is consistent from start to finish. If there is no plus, the result of the match is that 1,2,3,5,4,3,3,8,7,9 is not what we want, and with the plus sign, the number that matches each time is at least one. varnum = Arr[5].match (re);//take the picture name, and then match the number with the regular expressionnum = num[0];alert (num);
The above is to achieve the function of obtaining image ID;
Judging the browserif(window. ActiveXObject) {Myajaxobject=NewActiveXObject ("Microsoft XMLHTP");}Else{myajaxobject=NewXMLHttpRequest ();}
/*
The URL parameter of the 1.open () method is the address of the file on the server: The file can be any type of file, such as. txt and. xml, or server script files,
For example, ASP and. PHP (able to perform tasks on the server before returning the response), here I'm asking for action, and put the data you want to send back, see code.
2. GET is simpler and faster than POST, and can be used in most cases.
However, use the POST request in the following cases:
- Unable to use cache file (update file or database on server)
- Send a large amount of data to the server (POST has no data volume limit)
- Post is more stable and more reliable than GET when sending user input with unknown characters
3.true or False,true is the asynchronous request, the asynchronous request is that the server is finished, can not wait for the server to respond, can go to perform other operations until the server response is received.
4.send () sends the request to the server
*/myajaxobject.open ("Post", "collect.action?date=" +num,true); Myajaxobject.onreadystatechange=Actionresponse; Look at the following function Myajaxobject.send ();} Get server response
/*
ResponseText gets the response data in the form of a string.
There are other properties that you find yourself
Here I only test to read one data, most of it can be recycled
*/functionActionresponse () {if(myajaxobject.readystate==4){ if(myajaxobject.status==200){ varReturnjsonstring =Myajaxobject.responsetext; varReturnjson =Json.parse (returnjsonstring); varshowstring = ""; /*For (Var i=0;i<returnjson.length;i++) {showstring =}*/showstring= Returnjson[0]; alert (showstring); } }}
</script>
Structs.xml Code:
<name= "collect" class= "Action.collection " method = "collect" >
Background Action Code:
PackageAction;Importjava.io.IOException;Importjava.util.ArrayList;Importjava.util.List;Importjavax.servlet.http.HttpServletRequest;ImportOrg.apache.struts2.ServletActionContext;ImportCom.opensymphony.xwork2.ActionSupport;ImportNet.sf.json.JSONArray;ImportNet.sf.json.JSONObject; Public classCollectionextendsactionsupport{ PublicString Collect ()throwsioexception{
Send data List liststring=NewArrayList (); 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 ();
Receive Data String num= Servletactioncontext.getrequest (). GetParameter ("date");System.out.println (num); return NULL; }}
The above code implements a simple data receiving and sending. The data type that is sent in the background above is the list where the string is stored, depending on your needs. Can be stored in the list Bean,map string or bean sent.
Similarly, the foreground transfer data type can also change the type as needed
For example:
var info={
Num: "Data1",
NUM2: "Data2",
}
It's finished. Next I'm going to implement reading cookie data, judging whether the user is logged in, hoping to help you, there are errors or improvements in the place to welcome correct.
The SSH framework under which Ajax invokes action and generates JSON to be passed to the client "submit as Get and post"