1、导入jQuery1.2.6的js文件,请自行下载;
2、编写可重用的js方法:
- // 发送request请求
- // 注意:需要jQuery的支持
- // url:要请求的URL,如:/xxx/AjaxAction.do
- // data:要请求的参数,与url一起构成一个完整的URL请求,如:method=list&id=123
- // callback:回调函数的名称,如:send_request_callback,请求成功后,会调用send_request_callback函数
- function ajax_request(url,data,callback){
- jQuery.ajax({
- type: "POST", // GET,POST
- url: url, // AjaxAction.do
- data: data, // method=list&id=123
- success: function(responseText){
- var text = responseText.replace(//"/g,"///"");
- var commond = callback + "(/"" + text + "/")";
- eval(commond);
- },
- error: function (XMLHttpRequest, textStatus, errorThrown) {
- alert("Ajax请求失败!");
- }
- });
- }
- // 将某DIV层定位到parent的正下方
- // 用于类似Google搜索框中下拉提示框的功能,需要和Ajax结合使用
- function relocation(parent,div_id){
- var offsetLeft = parent.offsetLeft; // parent相对父元素的左端端偏移量
- var offsetTop = parent.offsetTop; // parent相对父元素的顶端偏移量
- var offsetHeight = parent.offsetHeight; // parent的高度
- // 循环获得元素的父级控件,累加左和顶端偏移量
- var obj = parent.offsetParent;
- while (obj) {
- offsetLeft += obj.offsetLeft;
- offsetTop += obj.offsetTop;
- obj = obj.offsetParent;
- }
- var div_obj = document.getElementById(div_id);
- div_obj.style.position = "absolute"; // 设定child为绝对位置
- div_obj.style.left = offsetLeft + "px"; // 设置child的相对左方的距离
- div_obj.style.top = (offsetTop + offsetHeight) + "px"; // 设置child的相对上方的距离
- }
- // 对简体中文进行2次escape转码,后台Java需要有对应的解码方法(JavaScriptEscape.unescape(str))。
- // 注意:如果只转码一次没有用
- function encodeEscape(ch){
- return escape(escape(ch));
- }
- // 隐藏某对象,使其不可见
- // obj_id:对象的id属性
- function hidden(obj_id){
- var obj = document.getElementById(obj_id);
- if(typeof(obj) != "undefined"){
- obj.style.display = "none";
- }
- }
- // 显示某对象,使其可见
- // obj_id:对象的id属性
- function show(obj_id){
- var obj = document.getElementById(obj_id);
- if(typeof(obj) != "undefined"){
- obj.style.display = "block";
- }
- }
3、页面文件如下:
- <!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=GBK" />
- <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
- <title></title>
- <script type="text/javascript" language="javascript" src="/script/jquery/jquery-1.2.6.min.js"></script>
- <script type="text/javascript" language="javascript" src="/script/jquery/ajax.js"></script>
- <style type="text/css">
- .tip_div{
- background-color:#F7E3DC;
- height:200px;
- overflow:auto;
- display:none;
- }
- .tip_div_table{
- margin:0;
- border-collapse:collapse;
- border:1px solid #D99D9D;
- }
- .tip_div_table tr{
- margin:0;
- padding:0;
- }
- .tip_div_table td {
- border:1px solid #D99D9D;
- margin:0;
- padding:-2 0 -2 2px;
- white-space:nowrap;
- }
- </style>
- <script language="javascript">
- // 搜索产品名称
- var search_CPMC_last_value = "";
- function search_CPMC(){
- // 产品名称
- var CPMC = document.getElementById("CPMC").value;
- if(CPMC != "" && CPMC == search_CPMC_last_value){
- return;
- } else {
- search_CPMC_last_value = CPMC;
- }
- // 表名
- var LX = document.getElementById("LX").value;
- var table = "QYSJ_HZ_CPYB" + LX;
- // 行业大类
- var HYDL = document.getElementById("HYDL_select").value;
- document.frm.HYDL.value = HYDL;
- if(HYDL != ""){
- var url = "/AjaxAction.do";
- var data = "method=query_CPMC_for_input&select_name=CPMC&table=" + table + "HYDL=" + encodeEscape(HYDL) + "CPMC=" + encodeEscape(CPMC);
- ajax_request(url,data,"search_CPMC_callback");
- }
- }
- // 搜索产品名称 回调函数
- function search_CPMC_callback(responseText){
- document.getElementById("CPMC_div").innerHTML = responseText;
- document.getElementById("CPMC_div").style.display = "block";
- relocation(document.getElementById("CPMC"),'CPMC_div');
- }
- function do_select_CPMC(CPMC){
- document.getElementById("CPMC").value = CPMC;
- hidden("CPMC_div");
- }
- </script>
- </head>
- <body>
- 行业大类:
- <select id="HYDL_select" class="SelectBox">
- <option value="" selected>选择行业</option>
- <option value="电子信息" >电子信息</option>
- <option value="石化" >石化</option>
- </select>
- <input type="text" id="CPMC" name="CPMC" value="" ondblclick="search_CPMC()" onKeyUp="search_CPMC()" />
- <div id="CPMC_div" class="tip_div">没有结果</div>
- </body>
- </html>
4、后台Action代码如下,主要功能就是查询数据库,拼接HTML代码,然后传到页面中。
- public ActionForward query_CPMC_for_input(ActionMapping mapping, ActionForm form,
- HttpServletRequest request, HttpServletResponse response,
- ActionContext context) throws Exception {
- // request.setCharacterEncoding("UTF-8");
- CommonService cs = CommonService.getInstance();
- EscapeTool esc = new EscapeTool();
- StringBuffer sb = new StringBuffer();
- // 下拉列表的name值
- String select_name = RequestUtils.getParameter(request, "select_name", null);
- // 行业大类(名称)
- String HYDL = RequestUtils.getParameter(request, "HYDL", null);
- HYDL = AjaxEncode(HYDL);
- // 已输入的产品名称
- String CPMC = RequestUtils.getParameter(request, "CPMC", null);
- CPMC = AjaxEncode(CPMC);
- // 省市名称
- String SSMC = RequestUtils.getParameter(request, "SSMC", null);
- SSMC = AjaxEncode(SSMC);
- // 要查询的表名
- String table = RequestUtils.getParameter(request, "table", null);
- // 表名不能为空,且行业大类和省市名称不能同时都为空(即允许之一为空)
- if(table != null && (HYDL != null || SSMC != null)){
- // 根据行业、省市查询产品列表,
- List CPMC_list = ...;
- // 拼接select组件
- sb.append("<table class=/"tip_div_table/" border=/"0/" cellpadding=/"0/" cellspacing=/"0/">");
- for (int i = 0; i < CPMC_list.size(); i++) {
- Map map = (Map)CPMC_list.get(i);
- String MC = (String)map.get("CPMC");
- MC = esc.html(MC);
- sb.append("<tr>");
- sb.append("<td οnclick=/"do_select_" + select_name + "('" + MC + "')/">" + MC + "</td>");
- sb.append("</tr>");
- }
- sb.append("</table>");
- }
- response.setHeader("Cache-Control", "no-cache, must-revalidate");
- response.setContentType("text/html;charset=GBK");
- response.getWriter().write(sb.toString());
- return null;
- }
- /**
- * 对Ajax传过来的字符串进行解码
- * @param str
- * @return
- */
- private String AjaxEncode(String str){
- String ret = null;
- try {
- if(str != null){
- ret = JavaScriptEscape.unescape(str);
- }
- } catch (Exception e) {
- e.printStackTrace();
- }
- return ret;
- }
5、最后要注意的主要是Ajax传参数时的编码问题,此例主要使用encodeEscape()方法在传参数之前进行编码,然后在Action中用JavaScriptEscape.unescape(str)转码。源码如下:
- /**
- * JavaScript escape/unescape 编码的Java实现
- * author jackyz keep this copyright info while using this method by free
- */
- public class JavaScriptEscape {
- private final static String[] hex = { "00", "01", "02", "03", "04", "05",
- "06", "07", "08", "09", "0A", "0B", "0C", "0D", "0E", "0F", "10",
- "11", "12", "13", "14", "15", "16", "17", "18", "19", "1A", "1B",
- "1C", "1D", "1E", "1F", "20", "21", "22", "23", "24", "25", "26",
- "27", "28", "29", "2A", "2B", "2C", "2D", "2E", "2F", "30", "31",
- "32", "33", "34", "35", "36", "37", "38", "39", "3A", "3B", "3C",
- "3D", "3E", "3F", "40", "41", "42", "43", "44", "45", "46", "47",
- "48", "49", "4A", "4B", "4C", "4D", "4E", "4F", "50", "51", "52",
- "53", "54", "55", "56", "57", "58", "59", "5A", "5B", "5C", "5D",
- "5E", "5F", "60", "61", "62", "63", "64", "65", "66", "67", "68",
- "69", "6A", "6B", "6C", "6D", "6E", "6F", "70", "71", "72", "73",
- "74", "75", "76", "77", "78", "79", "7A", "7B", "7C", "7D", "7E",
- "7F", "80", "81", "82", "83", "84", "85", "86", "87", "88", "89",
- "8A", "8B", "8C", "8D", "8E", "8F", "90", "91", "92", "93", "94",
- "95", "96", "97", "98", "99", "9A", "9B", "9C", "9D", "9E", "9F",
- "A0", "A1", "A2", "A3", "A4", "A5", "A6", "A7", "A8", "A9", "AA",
- "AB", "AC", "AD", "AE", "AF", "B0", "B1", "B2", "B3", "B4", "B5",
- "B6", "B7", "B8", "B9", "BA", "BB", "BC", "BD", "BE", "BF", "C0",
- "C1", "C2", "C3", "C4", "C5", "C6", "C7", "C8", "C9", "CA", "CB",
- "CC", "CD", "CE", "CF", "D0", "D1", "D2", "D3", "D4", "D5", "D6",
- "D7", "D8", "D9", "DA", "DB", "DC", "DD", "DE", "DF", "E0", "E1",
- "E2", "E3", "E4", "E5", "E6", "E7", "E8", "E9", "EA", "EB", "EC",
- "ED", "EE", "EF", "F0", "F1", "F2", "F3", "F4", "F5", "F6", "F7",
- "F8", "F9", "FA", "FB", "FC", "FD", "FE", "FF" };
- private final static byte[] val = { 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
- 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
- 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
- 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
- 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x00, 0x01,
- 0x02, 0x03, 0x04, 0x05, 0x06, 0x07, 0x08, 0x09, 0x3F, 0x3F, 0x3F,
- 0x3F, 0x3F, 0x3F, 0x3F, 0x0A, 0x0B, 0x0C, 0x0D, 0x0E, 0x0F, 0x3F,
- 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
- 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
- 0x3F, 0x3F, 0x3F, 0x0A, 0x0B, 0x0C, 0x0D, 0x0E, 0x0F, 0x3F, 0x3F,
- 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
- 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
- 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
- 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
- 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
- 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
- 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
- 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
- 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
- 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
- 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
- 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
- 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F,
- 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F, 0x3F };
- /**
- * 编码
- *
- * @param s
- * @return
- */
- public static String escape(String s) {
- StringBuffer sbuf = new StringBuffer();
- int len = s.length();
- for (int i = 0; i < len; i++) {
- int ch = s.charAt(i);
- if ('A' <= ch && ch <= 'Z') {
- sbuf.append((char) ch);
- } else if ('a' <= ch && ch <= 'z') {
- sbuf.append((char) ch);
- } else if ('0' <= ch && ch <= '9') {
- sbuf.append((char) ch);
- } else if (ch == '-' || ch == '_' || ch == '.' || ch == '!'
- || ch == '~' || ch == '*' || ch == '/'' || ch == '('
- || ch == ')') {
- sbuf.append((char) ch);
- } else if (ch <= 0x007F) {
- sbuf.append('%');
- sbuf.append(hex[ch]);
- } else {
- sbuf.append('%');
- sbuf.append('u');
- sbuf.append(hex[(ch >>> 8)]);
- sbuf.append(hex[(0x00FF & ch)]);
- }
- }
- return sbuf.toString();
- }
- /**
- * 解码 说明:本方法保证 不论参数s是否经过escape()编码,均能得到正确的“解码”结果
- *
- * @param s
- * @return
- */
- public static String unescape(String s) {
- StringBuffer sbuf = new StringBuffer();
- int i = 0;
- int len = s.length();
- while (i < len) {
- int ch = s.charAt(i);
- if ('A' <= ch && ch <= 'Z') {
- sbuf.append((char) ch);
- } else if ('a' <= ch && ch <= 'z') {
- sbuf.append((char) ch);
- } else if ('0' <= ch && ch <= '9') {
- sbuf.append((char) ch);
- } else if (ch == '-' || ch == '_' || ch == '.' || ch == '!'
- || ch == '~' || ch == '*' || ch == '/'' || ch == '('
- || ch == ')') {
- sbuf.append((char) ch);
- } else if (ch == '%') {
- int cint = 0;
- if ('u' != s.charAt(i + 1)) {
- cint = (cint << 4) | val[s.charAt(i + 1)];
- cint = (cint << 4) | val[s.charAt(i + 2)];
- i += 2;
- } else {
- cint = (cint << 4) | val[s.charAt(i + 2)];
- cint = (cint << 4) | val[s.charAt(i + 3)];
- cint = (cint << 4) | val[s.charAt(i + 4)];
- cint = (cint << 4) | val[s.charAt(i + 5)];
- i += 5;
- }
- sbuf.append((char) cint);
- } else {
- sbuf.append((char) ch);
- }
- i++;
- }
- return sbuf.toString();
- }
- public static void main(String[] args) {
- String stest = "简体中文1234 abcd[]()<+>,.~//";
- System.out.println(stest);
- System.out.println(escape(stest));
- System.out.println(unescape(escape(stest)));
- }
- }