基于ajax及jQuery實(shí)現(xiàn)局部刷新過程解析
1、jQurey使用時(shí)需導(dǎo)入jquery-1.4.2.js在web文件夾下
并在寫script時(shí)需像如下定義script標(biāo)簽:
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
2、jQurey的語法:通過$(要選取的元素)
定義響應(yīng)ajax的Servlet
String buttonName=request.getParameter("buttonName"); JSONObject jsObject =null; //定義一個(gè)要返回的的數(shù)據(jù) if (buttonName.equals("button_1")){ jsObject=new JSONObject("{first:\"傻子\",second:\"傻子\",third:\"傻子\"}"); //以鍵值對方式存儲 } if (buttonName.equals("button_2")){ jsObject=new JSONObject("{first:\"傻女\",second:\"傻女\",third:\"傻女\"}"); } if (buttonName.equals("button_3")){ jsObject=new JSONObject("{first:\"傻佬\(zhòng)",second:\"傻佬\(zhòng)",third:\"傻佬\(zhòng)"}"); } response.getOutputStream().write(jsObject.toString().getBytes("utf-8")); //通過respon.getOutputStream獲取輸出流 將數(shù)據(jù)傳回jsp頁面 }
ajax使用形式如下:
$.ajax({ url:"/AJAX_war_exploded/ClickServlet", //定義需轉(zhuǎn)到的Servlet type:"post", //定義提交的形式 data:{ //定義要傳遞的數(shù)據(jù),以鍵值對形式存儲 buttonName:"button_2" }, //每個(gè)ajax都會讓Servlet回傳一個(gè)數(shù)據(jù) dataType:"json", //定義回傳數(shù)據(jù)的類型 success:function(result){ //ajax收到回傳的數(shù)據(jù)是會觸發(fā)的事件success var first=result.first; var second=result.second; var third=result.third; $(".first")[0].innerHTML=first; //該形式使用了jQuery獲取html元素 $(".second")[0].innerHTML=second; $(".third")[0].innerHTML=third; } }) })
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jQuery+Ajax實(shí)現(xiàn)用戶名重名實(shí)時(shí)檢測
- Asp.net下利用Jquery Ajax實(shí)現(xiàn)用戶注冊檢測(驗(yàn)證用戶名是否存)
- jquery ajax 檢測用戶注冊時(shí)用戶名是否存在
- jquery+ajax實(shí)現(xiàn)異步上傳文件顯示進(jìn)度條
- Jquery ajax書寫方法代碼實(shí)例解析
- JQuery發(fā)送ajax請求時(shí)中文亂碼問題解決
- php+jQuery ajax實(shí)現(xiàn)的實(shí)時(shí)刷新顯示數(shù)據(jù)功能示例
- JQuery Ajax如何實(shí)現(xiàn)注冊檢測用戶名
相關(guān)文章
jquery獲取easyui日期控件的值實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨query獲取easyui日期控件的值實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11jQuery判斷checkbox(復(fù)選框)是否被選中以及全選、反選實(shí)現(xiàn)代碼
本篇文章主要是對jQuery判斷checkbox(復(fù)選框)是否被選中以及全選、反選實(shí)現(xiàn)代碼進(jìn)行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02轉(zhuǎn)自Jquery官方 jQuery1.1.3發(fā)布,速度提升800%,體積保持20K
轉(zhuǎn)自Jquery官方 jQuery1.1.3發(fā)布,速度提升800%,體積保持20K...2007-08-08jquery實(shí)現(xiàn)圖片放大點(diǎn)擊切換
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)圖片放大點(diǎn)擊切換,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06jquery滾動(dòng)條插件slimScroll使用方法
這篇文章主要為大家詳細(xì)介紹了jquery滾動(dòng)條插件slimScroll的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02