posts - 26, comments - 14, trackbacks - 0

jQuery確實是一個挺好的輕量級的JS框架，能幫助我們快速的開發(fā)JS應(yīng)用，并在一定程度上改變了我們寫JavaScript代碼的習(xí)慣。

廢話少說，直接進入正題，我們先來看一些簡單的方法，這些方法都是對jQuery.ajax()進行封裝以方便我們使用的方法，當(dāng)然，如果要處理復(fù)雜的邏輯，還是需要用到j(luò)Query.ajax()的(這個后面會說到).

1. load( url, [data], [callback] ) ：載入遠(yuǎn)程 HTML 文件代碼并插入至 DOM 中。

url (String) : 請求的HTML頁的URL地址。

data (Map) : (可選參數(shù)) 發(fā)送至服務(wù)器的 key/value 數(shù)據(jù)。

callback (Callback) : (可選參數(shù)) 請求完成時(不需要是success的)的回調(diào)函數(shù)。

這個方法默認(rèn)使用 GET 方式來傳遞的，如果[data]參數(shù)有傳遞數(shù)據(jù)進去，就會自動轉(zhuǎn)換為POST方式的。jQuery 1.2 中，可以指定選擇符，來篩選載入的 HTML 文檔，DOM 中將僅插入篩選出的 HTML 代碼。語法形如 "url #some > selector"。

這個方法可以很方便的動態(tài)加載一些HTML文件，例如表單。

2. jQuery.get( url, [data], [callback] )：使用GET方式來進行異步請求

參數(shù)：

url (String) : 發(fā)送請求的URL地址.

data (Map) : (可選) 要發(fā)送給服務(wù)器的數(shù)據(jù)，以 Key/value 的鍵值對形式表示，會做為QueryString附加到請求URL中。

callback (Function) : (可選) 載入成功時回調(diào)函數(shù)(只有當(dāng)Response的返回狀態(tài)是success才是調(diào)用該方法)。

這是一個簡單的 GET 請求功能以取代復(fù)雜 $.ajax 。請求成功時可調(diào)用回調(diào)函數(shù)。如果需要在出錯時執(zhí)行函數(shù)，請使用 $.ajax。示例代碼：

		$.get("./Ajax.aspx", {Action:"get",Name:"lulu"}, function (data, textStatus){
//返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等.
this; // 在這里this指向的是Ajax請求的選項配置信息，請參考下圖
alert(data);
//alert(textStatus);//請求狀態(tài)：success，error等等。

當(dāng)然這里捕捉不到error，因為error的時候根本不會運行該回調(diào)函數(shù)
//alert(this);
});

示例代碼：

$.getJSON("servlet/TableServlet?flag=query", "", function(response){
        $.each(response,function(i){
         sel.src.add({id: response[i].id, name: response[i].name, address: response[i].address});
        })
       sel.render();
      });
    });

下面我做了一個利用jQuery Ajax 做了以小小的Demo;

其中java 部分主要代碼：

package com.bx.web.action;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

import com.bx.dao.impl.HibernateUserDAO;
import com.bx.hibernate.User;

public class TableServlet extends HttpServlet {

/**
*
*/
private static final long serialVersionUID = 5469871499359894890L;

User user=new User();

public void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {

  this.doPost(request, response);
}

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

  String flag=request.getParameter("flag");
  if(flag!=null&&"flag".equals("flag")){
   query(request,response);
  }
}

public void query(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
  HibernateUserDAO test=new HibernateUserDAO();
  List<User> list = test.getUserList();

  for(User userlist:list){
   System.out.println("Table UserName+++"+userlist.getName()+
   "......Hibernate Dbconfig....User.Address"+userlist.getAddress());
  }

  JSONArray jr=JSONArray.fromObject(list);
  String jsonUser=jr.toString();
  PrintWriter out = response.getWriter();
  out.print(jsonUser);
  out.flush();
  out.close();
}
}

jsp中的代碼如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>tabledemo</title>
    <link href="css/style.css" type="text/css" rel="stylesheet"/>
    <script src="scripts/jquery.js" type="text/javascript"></script>
    <script src="scripts/PagerView.js" type="text/javascript"></script>
    <script src="scripts/SelectorView.js" type="text/javascript"></script>
    <script src="scripts/SortView.js" type="text/javascript"></script>
    <script src="scripts/TableView.js" type="text/javascript"></script>

  <script type="text/javascript">
  $ (document).ready (function() {
   var sel = new SelectorView('sel_div');
    sel.src.header = {
     id   : '編號',
     name  : '姓名',
     address: '地址'

    };
    sel.dst.header = {
     id : '編號',
     name: '姓名',
     address: '地址'
    };
    sel.src.dataKey = 'id';
    sel.src.title = '可選';

    sel.dst.dataKey = 'id';
    sel.dst.title = '已選';
    sel.render();
    $.getJSON("servlet/TableServlet?flag=query", "", function(response){
        $.each(response,function(i){
         sel.src.add({id: response[i].id, name: response[i].name, address: response[i].address});
        })
       sel.render();
      });
    });
  </script>
</head>

<body>

<div id="sel_div"></div>