Examples of Ajax dynamic fetching JSON

1. Foreground script:

//Ajax for toggling the picture list        functionChangephoto (title,hotelid) {$.ajax ({contentType:"Application/x-www-form-urlencoded; Charset=utf-8 ", type:"POST", URL:"<@a.webroot/>/base/bms/hotel/hotelpicture-querypicturebytitleajax.action", data: {"HotelPicturePage.hotelPicture.title": Title,"HotelPicturePage.hotelPicture.hotelId": Hotelid}, DataType:"JSON", Success:function(data) {//Replace the contents of the small graph first                    varHotelpicturelist =data.hotelpciturelist; if(hotelpicturelist! = ' undefined ' && hotelpicturelist!=NULL&& Hotelpicturelist.length >0 ){                        varHtmlstr = ' <tr> ', Imgtitle = "", Imgurl = "";  for(vari = 0;i < hotelpicturelist.length;i++) {Imgtitle=Hotelpicturelist[i].title; Imgurl=Hotelpicturelist[i].imgurl; Htmlstr+ = ' <td originalphoto= ' ' +imgurl+ ' "></td> "; } htmlstr+ = ' </tr> '; $("#hotelPictureContainer"). HTML (HTMLSTR);//give the table new content$ ("#hotelPictureContainer"). Removeattr ("style");//clears the style created by the previous thumbnail slide                                                 //then replace the larger image with the first small image                        if(Hotelpicturelist[0].imgurl! =NULL&& hotelpicturelist[0].imgurl! = ' undefined ') {//determine if the small map exists$ ("#originalPhoto"). attr ("src", hotelpicturelist[0].imgurl); }                                                 //finally activate the click-to-replace large image of each small map$ ("#thumbContainer TD"). Click (function() {alert (22); varTdobj = $ ( This); Photoindex= $ ("#thumbContainer TD"). index (tdobj); $("#originalPhoto"). attr ("src", tdobj.attr ("Originalphoto"))); $("#photoContainer"). CSS ("width", ($ ("#originalPhoto"). Width ()) + "px");                                                 }); //update the data for the area of the small mapPhotocount = $ ("#thumbContainer img"). length;//Number of picturesLeftcount = Math.ceil (PHOTOCOUNT/5);//Number of pagesLeftlevel = 0;//Paging SeriesPhotoindex = 0;//Picture Number                     }                    Else{alert ("Sorry, the hotel is not related to the picture. "); }}, Error:function() {alert ("Data error, please try again later." ");        }            }); };

View Code

2. Background Java code:

 Public voidQuerypicturebytitleajax () {//First filter the page back to the title of "" Good "null" problem    if(Hotelpicturepage.gethotelpicture ()! =NULL ){        if("". Equals (Hotelpicturepage.gethotelpicture (). GetTitle ()) | | " Null. Equals (Hotelpicturepage.gethotelpicture (). GetTitle ())) {hotelpicturepage.gethotelpicture (). Settitle (NULL); }} jsonobject Jsobject=NewJsonobject (); //get the picture you needHotelpicturepage =Hotelpictureservice.queryhotelpicturebytitle (Commonpage, hotelpicturepage); if(hotelpicturepage.gethotelpicturelist () = =NULL|| Hotelpicturepage.gethotelpicturelist (). Size () <=0) {Jsobject.put ("Hotelpciturelist",NULL); }    Else{//Encapsulating JSON DataListhotelpicturepage.gethotelpicturelist (); List<JSONObject> jsonlist =NewArraylist<jsonobject>();  for(inti = 0;i < Hotelpciturelist.size (); i++) {Jsonobject Item=NewJsonobject (); Item.put ("Title", Hotelpciturelist.get (i). GetTitle ()); Item.put ("Imgurl", Hotelpciturelist.get (i). Getimgurl ());        Jsonlist.add (item); } jsobject.put ("Hotelpciturelist", jsonlist); }writejson (jsobject);}

View Code

Examples of Ajax dynamic fetching JSON