基于ajax及jQuery實現(xiàn)局部刷新過程解析

更新時間：2020年09月12日 12:39:02 作者：shouyaya

這篇文章主要介紹了基于ajax及jQurey實現(xiàn)局部刷新過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

1、jQurey使用時需導入jquery-1.4.2.js在web文件夾下

并在寫script時需像如下定義script標簽：

<script src="js/jquery-1.4.2.js" type="text/javascript"></script>

2、jQurey的語法：通過$(要選取的元素)

定義響應ajax的Servlet

String buttonName=request.getParameter("buttonName");
  JSONObject jsObject =null;  //定義一個要返回的的數(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", //定義需轉到的Servlet
  type:"post",　　　　　　　　　　　　　　　　//定義提交的形式
  data:{　　　　　　　　　　　　　　　　　　　//定義要傳遞的數(shù)據(jù)，以鍵值對形式存儲
   buttonName:"button_2"
  },　　　　　　　　　　　　　　　　　　　　　//每個ajax都會讓Servlet回傳一個數(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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: