1. 程式人生 > >一般方式和ajax方式從後臺獲取資料載入進網頁

一般方式和ajax方式從後臺獲取資料載入進網頁

1,普通方法無非就是先訪問相應servlet拿到資料,存到request域中,跳轉到jsp頁面,通過jsp標籤遍歷拿到資料,前面的文章提到了點選開啟連結


2,若想通過某些規則校驗表單資料,沒有訪問資料庫,jquery是你不二選擇,點選跳轉到jquery表單校驗外掛


3,通過ajax獲取後臺資訊

拿購物網站為例,購物網站的導航欄是通用的,一般都是獨立的jsp頁面。新建一個head.jsp頁面,由於是被包含,所以不用加入jquery外掛,通過ajax非同步訪問後臺,後臺拿到資料庫的資料是List集合,通過Gson工具將List轉化為Json字串返回給ajax引擎,通過指令碼js動態將資料加入前臺頁面,使用前要匯入Gson的jar包

head.jsp程式碼

<script type="text/javascript">
   $(function(){
       var content ="";
      $.post(
         "${pageContext.request.contextPath}/categoryList",
         function(data){
            for(var i = 0; i < data.length; i++){
               content +="<li><a href='#'>"
+data[i].cname+"</a></li>" } $("#categoryListUl").html(content); }, "json" ) }) </script>
servlet程式碼

ProductService service = new ProductService();

List<Category> category = service.findCategory();

Gson gson = new Gson();
String s = gson.toJson(category); response.setContentType("text/html;charset=utf-8"); response.getWriter().write(s);

ajax各引數詳情

1)$.get(url, [data], [callback], [type])

2)$.post(url, [data], [callback], [type])

 

其中:

url:代表請求的伺服器端地址

data:代表請求伺服器端的資料(可以是key=value形式也可以是json格式)

callback:表示伺服器端成功響應所觸發的函式(只有正常成功返回才執行)

type:表示伺服器端返回的資料型別(jquery會根據指定的型別自動型別轉換)

常用的返回型別:text、json、html等

 

3)$.ajax( { option1:value1,option2:value2... } );

常用的option有如下:

async:是否非同步,預設是true代表非同步

data:傳送到伺服器的引數,建議使用json格式

dataType:伺服器端返回的資料型別,常用text和json

success:成功響應執行的函式,對應的型別是function型別

type:請求方式,POST/GET

url:請求伺服器端地址