楼主: zhour560

求助---使用Ajax传递中文参数

[复制链接]
论坛徽章:
8
授权会员
日期:2006-10-19 11:36:01
11#
 楼主| 发表于 2006-9-14 16:57 | 只看该作者
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<html>
  <head>
    <title>article.html</title>
  <script type="text/javascript" src="js/common.js"></script>
  <script type="text/javascript">
  var completeDiv;
  var inputField;
  var nameTable;
  var nameTableBody;
  function initVars() {
     inputField = document.getElementById("title";            
     nameTable = document.getElementById("name_table";
     completeDiv = document.getElementById("popup";
     nameTableBody = document.getElementById("name_table_body";
     
  }

  function findNames(){
   initVars();
   if (inputField.value.length > 0) {
       createXMLHttpRequest();  
       var url = "article.do?method=search&title="+escape(inputField.value);  
                        
       xmlHttp.open("GET", url, true);
       xmlHttp.onreadystatechange = callback;
       xmlHttp.send(null);
    } else {
       clearNames();
    }
  }
  function callback() {
            if (xmlHttp.readyState == 4) {
                if (xmlHttp.status == 200) {
               
                    var name = xmlHttp.responseXML.getElementsByTagName("title"[0].firstChild.data;
                    setNames(xmlHttp.responseXML.getElementsByTagName("title");
                } else if (xmlHttp.status == 204){
                    clearNames();
                  
                }
            }
        }
        
        function setNames(the_names) {            
            clearNames();
            var size = the_names.length;
            setOffsets();

            var row, cell, txtNode;
            for (var i = 0; i < size; i++) {
                var nextNode = the_names.firstChild.data;
                row = document.createElement("tr";
                cell = document.createElement("td";
               
                cell.onmouseout = function() {this.className='mouseOver';};
                cell.onmouseover = function() {this.className='mouseOut';};
                cell.setAttribute("bgcolor", "#FFFAFA";
                cell.setAttribute("border", "0";
                cell.onclick = function() { populateName(this); } ;                             

                txtNode = document.createTextNode(nextNode);
                cell.appendChild(txtNode);
                row.appendChild(cell);
                nameTableBody.appendChild(row);
               
            }
        }

        function setOffsets() {
            var end = inputField.offsetWidth;
            var left = calculateOffsetLeft(inputField);
            var top = calculateOffsetTop(inputField) + inputField.offsetHeight;

            completeDiv.style.border = "black 1px solid";
            completeDiv.style.left = left + "px";
            completeDiv.style.top = top + "px";
            nameTable.style.width = end + "px";
        }
        
        function calculateOffsetLeft(field) {
          return calculateOffset(field, "offsetLeft");
        }

        function calculateOffsetTop(field) {
          return calculateOffset(field, "offsetTop");
        }

        function calculateOffset(field, attr) {
          var offset = 0;
          while(field) {
            offset += field[attr];
            field = field.offsetParent;
          }
          return offset;
        }

        function populateName(cell) {
            inputField.value = cell.firstChild.nodeValue;
            clearNames();
        }
  function clearNames() {
     var ind = nameTableBody.childNodes.length;
     for (var i = ind - 1; i >= 0 ; i--) {
       nameTableBody.removeChild(nameTableBody.childNodes);
     }
    completeDiv.style.border = "none";
  }
  </script>
  </head>
  
  <body>
    <h3>Ajax Auto Complete Example</h3>
    请输入名称:<input type="text" name="title" id="title" size="30" width="100" height="20" onkeyup="findNames();">
    <div style="position:absolute;" id="popup">
        <table id="name_table" bgcolor="#FFFAFA" border="0" cellspacing="0" cellpadding="0"/>            
            <tbody id="name_table_body"></tbody>
        </table>
    </div>
  </body>
</html>

使用道具 举报

回复
论坛徽章:
8
授权会员
日期:2006-10-19 11:36:01
12#
 楼主| 发表于 2006-9-14 16:58 | 只看该作者
/*
* Generated by MyEclipse Struts
* Template path: templates/java/JavaClass.vtl
*/
package com.rain.struts.action;

import java.io.IOException;
import java.io.PrintWriter;
import java.io.UnsupportedEncodingException;
import java.util.Iterator;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import org.apache.struts.actions.DispatchAction;
import org.apache.struts.validator.DynaValidatorForm;

import com.rain.bean.ArticleDao;

/**
* MyEclipse Struts
* Creation date: 09-12-2006
*
* XDoclet definition:
* @struts.action parameter="method"
*/
public class ArticleAction extends DispatchAction {
        /*
         * Generated Methods
         */

        /**
         * Method execute
         * @param mapping
         * @param form
         * @param request
         * @param response
         * @return ActionForward
         */
        public ActionForward search(ActionMapping mapping, ActionForm form,
                        HttpServletRequest request, HttpServletResponse response) {
                DynaValidatorForm articleForm = (DynaValidatorForm)form;
               
                ArticleDao dao=new ArticleDao();
                System.out.println("form: "+articleForm.getString("title");
                Iterator it=dao.findAllName(articleForm.getString("title").iterator();
               
                if(it.hasNext()){
                        PrintWriter out;
                        try {
                               
                                response.setContentType("text/xml;charset=UTF-8";
                                response.setHeader("Cache-Control", "no-cache";
                                out = response.getWriter();
                                out.println("<response>";
                                while(it.hasNext()){
                                        String name=it.next().toString();
                                        out.println("<title>"+name+"</title>";
                                }
                                out.println("</response>";
                                it=null;
                                out.close();
                        } catch (IOException e) {
                                // TODO 自动生成 catch 块
                                e.printStackTrace();
                        }
                       
                }else{
                        response.setStatus(HttpServletResponse.SC_NO_CONTENT);
                }
                return null;
        }
}

使用道具 举报

回复
论坛徽章:
8
授权会员
日期:2006-10-19 11:36:01
13#
 楼主| 发表于 2006-9-15 08:10 | 只看该作者
牛人,跑哪去了,快帮我看看呀`~?~?~~~该怎么改呀~?~

使用道具 举报

回复
论坛徽章:
8
授权会员
日期:2006-10-19 11:36:01
14#
 楼主| 发表于 2006-9-15 10:13 | 只看该作者
此问题已经解决!!!

使用道具 举报

回复
论坛徽章:
0
15#
发表于 2006-9-17 10:10 | 只看该作者
怎么么解决的?我也有同样的问题呀!可否说一下!

使用道具 举报

回复
论坛徽章:
8
授权会员
日期:2006-10-19 11:36:01
16#
 楼主| 发表于 2006-9-17 16:54 | 只看该作者
把前面Ajax里面的escapse换成encodeURI,然后在Action中试用getbyte()方法转化参数。

使用道具 举报

回复
论坛徽章:
0
17#
发表于 2009-5-29 00:54 | 只看该作者
js escape是utf8编码的,所以你要在服务器端加个过滤器: request.setCharactorEncoding("utf8");

使用道具 举报

回复
论坛徽章:
131
乌索普
日期:2017-09-26 13:06:30马上加薪
日期:2014-11-22 01:34:242014年世界杯参赛球队: 尼日利亚
日期:2014-06-17 15:23:23马上有对象
日期:2014-05-11 19:35:172014年新春福章
日期:2014-04-04 16:16:58马上有对象
日期:2014-03-08 16:50:54马上加薪
日期:2014-02-19 11:55:14马上有对象
日期:2014-02-19 11:55:14马上有钱
日期:2014-02-19 11:55:14马上有房
日期:2014-02-19 11:55:14
18#
发表于 2009-5-29 17:03 | 只看该作者
原帖由 kandyer0 于 2009-5-29 00:54 发表
js escape是utf8编码的,所以你要在服务器端加个过滤器: request.setCharactorEncoding("utf8");

使用道具 举报

回复
论坛徽章:
0
19#
发表于 2009-6-4 17:54 | 只看该作者
//在传递中文之前先将其转码
str=encodeURI(encodeURI(str));
//然后在服务器端取的时候进行解码

String str=request.getParameter("str");
str=java.net.URLDecoder.decode(_str,"utf-8").toString();
这样就可以了

使用道具 举报

回复
论坛徽章:
53
2010新春纪念徽章
日期:2010-03-01 11:19:062012新春纪念徽章
日期:2012-02-13 15:12:252012新春纪念徽章
日期:2012-02-13 15:12:252012新春纪念徽章
日期:2012-02-13 15:12:252012新春纪念徽章
日期:2012-02-13 15:12:25版主1段
日期:2012-05-15 15:24:112013年新春福章
日期:2013-02-25 14:51:24马上有车
日期:2014-02-19 11:55:14马上有房
日期:2014-02-19 11:55:14马上有钱
日期:2014-02-19 11:55:14
20#
发表于 2009-6-8 10:46 | 只看该作者
这个比较典型,呵呵

使用道具 举报

回复

您需要登录后才可以回帖 登录 | 注册

本版积分规则 发表回复

TOP技术积分榜 社区积分榜 徽章 团队 统计 知识索引树 积分竞拍 文本模式 帮助
  ITPUB首页 | ITPUB论坛 | 数据库技术 | 企业信息化 | 开发技术 | 微软技术 | 软件工程与项目管理 | IBM技术园地 | 行业纵向讨论 | IT招聘 | IT文档
  ChinaUnix | ChinaUnix博客 | ChinaUnix论坛
CopyRight 1999-2011 itpub.net All Right Reserved. 北京盛拓优讯信息技术有限公司版权所有 联系我们 未成年人举报专区 
京ICP备16024965号-8  北京市公安局海淀分局网监中心备案编号:11010802021510 广播电视节目制作经营许可证:编号(京)字第1149号
  
快速回复 返回顶部 返回列表