Reference content is as follows: Use js to implement the front-end code of the image title and description without refreshing ajax; an html file with the following content: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <Html xmlns = "http://www.w3.org/1999/xhtml"> <Head> <Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/> <Title> ajax modification </title> <Script language = "javascript"> // IE support If (window. ActiveXObject &&! Window. XMLHttpRequest ){ Window. XMLHttpRequest = function (){ Return new ActiveXObject (navigator. userAgent. toLowerCase (). indexOf ('msie 5 ')! =-1 )? 'Microsoft. xmlhttp': 'msxml2. xmlhttp '); }; } // Modify the description Function update (photoID, descvalue ){ Var req = new XMLHttpRequest (); If (req ){ Req. onreadystatechange = function (){ If (req. readyState = 4 & req. status = 200 ){ If (req. responseText! = "") Alert (req. responseText );} } } Var act = document. getElementById ("path"). value + "/AjaxCtrl "; Req. open ('post', act ); Req. setRequestHeader ('content-type', 'application/x-www-form-urlencoded '); Req. send ("page = UpdatePhotoDescPage & photoID =" + photo_id + "& desc =" + descvalue ); } Function initDesc (photoID ){ Var desc = document. getElementById ("txto "); Desc. onclick = ""; Desc. onmouseover = ""; Var str = document. getElementById ('hid '). value; If (str = "click to add photo description") str = ""; Desc. innerHTML = "<textarea id = 'txt 'class = 'highlight' style = 'margin-top: 0px; font-size: 14px; margin-bottom: 0px; width: 820px 'rows = '5'> "+ str. replace (/<br>/g ,'') + "</textarea> <br> <input type = 'button 'value =' Save 'onclick = 'getvalue (" + photoID + "); '/> & nbsp; & nbsp; <input type = 'button 'value = 'cancel 'onclick = 'resetdeschtml ("+ photoID +");'/> "; } Function getvalue (photoID ){ Desctxt = document. getElementById ("txt "); Var desc = document. getElementById ("txto "); Var descvalue = desctxt. value. replace (/(^ \ s *) | (\ s * $)/g ,''); Var str = descvalue; If (str. length> 2000 ){ Alert ("the description can contain up to 2000 Chinese characters! Enter again. "); Return; } Desc. innerHTML = "saving ...... "; If (str = ''){ Update (photoID ,''); Document. getElementById ('hid '). value = ''; Desc. innerHTML = "<div id = 'SP 'onclick = 'initdesc (" + photoID + "); 'style = 'width: 320px 'onmouseover = 'ch (this ); 'onmouseout = 'res (this); '> <I style = 'color: #888; width: 240px'> click to add image description </I> </div> "; } Else { Update (photoID, str ); Document. getElementById ('hid '). value = descvalue; Desc. innerHTML = "<div id = 'SP 'onclick = 'initdesc (" + photoID + "); 'style = 'width: 320px; word-wrap: break-word; 'onmouseover = 'ch (this); 'onmouseout = 'res (this); '> "+ filtertxtd (document. getElementById ('hid '). value) + "</div> "; } } Function resetDescHTML (photoID ){ Var desc = document. getElementById ("txto "); If (document. getElementById ('hid '). value = ''| document. getElementById ('hid'). value = 'click to add photo description '){ Desc. innerHTML = "<div id = 'SP 'onclick = 'initdesc (" + photoID + "); 'style = 'width: 320px 'onmouseover = 'ch (this ); 'onmouseout = 'res (this); '> <I style = 'color: #888; width: 320px 'onmouseover = 'res (this ); 'onmouseout = 'ch (this); '> click to add a photo description <I> </div> "; } Else { Desc. innerHTML = "<div id = 'SP 'onclick = 'initdesc (" + photoID + "); 'style = 'margin-top: 0px; font-size: 14px; margin-bottom: 0px; width: 320px; word-wrap: break-word; 'onmouseover = 'ch (this); 'onmouseout = 'res (this ); '> "+ filtertxtd (document. getElementById ('hid '). value) + "</div> "; } } // Modify the title Function updateTit (photoID, titvalue ){ Var req = new XMLHttpRequest (); If (req ){ Req. onreadystatechange = function (){ If (req. readyState = 4 & req. status = 200 ){ If (req. responseText! = "") Alert (req. responseText );} } } Var act = document. getElementById ("path"). value + "/AjaxCtrl "; Req. open ('post', act ); Req. setRequestHeader ('content-type', 'application/x-www-form-urlencoded '); Req. send ("page = UpdatePhotoTitlePage & photoID =" + photo_id + "& title =" + titvalue ); } Function initTit (photoID ){ Var tit = document. getElementById ("tit "); Tit. onclick = ""; Tit. onmouseover = ""; Var str = document. getElementById ('hidtit'). value; If (str = "click to add a photo name") str = ""; Tit. innerHTML = "<input type = 'text' id = 'txttit' class = 'highlight' style = 'margin-top: 0px; font-size: 14px; margin-bottom: 0px; width: 320px 'value = '" + Str + "'maxlength = '50'/> <br> <input type = 'button 'value = 'Save 'onclick = 'gettit (" + photoID + "); '/> & nbsp; <input type = 'button' value = 'cancel 'onclick = 'resettithtml ("+ photoID +");'/> "; } Function getTit (photoID ){ Var txtTit = document. getElementById ("txtTit "); Var tit = document. getElementById ("tit "); Var titvalue = txtTit. value. replace (/(^ \ s *) | (\ s * $)/g ,''); Tit. innerHTML = "saving ...... "; If (titvalue = ''){ UpdateTit (photoID ,''); Document. getElementById ("hidTit"). value = ''; Tit. innerHTML = "<div id = 'SP 'onclick = 'inittit (" + photoID + "); 'style = 'width: 320px 'onmouseover = 'ch (this ); 'onmouseout = 'res (this); '> <I style = 'color: #888'> click to add a photo name </I> </div> "; } Else { UpdateTit (photoID, titvalue ); Document. getElementById ("hidTit" + idx). value = filtertxtd (titvalue ); Tit. innerHTML = "<div id = 'SP 'onclick = 'inittit (" + photoID + "); 'style = 'width: 320px 'onmouseover = 'ch (this ); 'onmouseout = 'res (this); '> } } Function resetTitHTML (photoID ){ Var tit = document. getElementById ("tit "); If (document. getElementById ('hidtit'). value = ''| document. getElementById ('hidtit'). value = 'click to add photo name '){ Tit. innerHTML = "<I style = 'color: #888 'onclick = 'inittit (" + photoID + "); 'onmouseover = 'ch (this ); 'onmouseout = 'res (this); '> click to add a photo name </I> "; Tit. onmouseover = "ch (this );"; } Else { Tit. innerHTML = "<div id = 'SP 'onclick = 'inittit (" + photoID + "); 'onmouseover = 'ch (this); 'onmouseout = 'res (this ); 'style = 'width: 320px; word-wrap: break-word; '> } } Function ch (activeX ){ ActiveX. style. background = "# ffc "; } Function res (activeX ){ ActiveX. style. background = "# fff "; } Function filtertxtd (str ){ Var filterStr = str. replace (/(^ \ s *) | (\ s * $)/g ,''). replace (/</g, "& lt ;"). replace (/>/g, "& gt ;"). replace (/\ n/g, "<br> "); Return filterStr; } </Script> </Head> <body> <Input type = "hidden" id = "hidTit" value = "click to add a photo name"/> <Div title = "click to modify the photo name" id = "tit" onclick = "initTit ('1');" onmouseover = "ch (this ); "onmouseout =" res (this); "style =" width: 320px; word-wrap: break-word; "> <I style = "color: #888;"> click to add a photo name </I> </Div> <Br/> <Div> <div title = "click to modify the photo description" id = "txto" style = "width: 820px; word-wrap: break-word; "onclick =" initDesc ('1'); "onmouseover =" ch (this); "onmouseout =" res (this); "> <I style =" color: #888; "> click to add a photo description" </I> </div> </Div> <Input type = "hidden" id = "hid" value = "click to add a photo description"/> </Div> </Div> </Body> </Html> |