BlogJava-雪山飞鹄-随笔分类-js

jquery post 中文乱码解决方案

雪山飞鹄 — Tue, 20 Mar 2012 03:46:00 GMT

前台post请求的时候对发送的数据进行encodeURIComponent()编码
例如：
var transactType= $("#transactType").attr("value");
var content=encodeURIComponent($("#content").html());
var title=encodeURIComponent($("#title").val());

$.post(
      "${path}/transact!addTransact.action",
      {"content":content,"title":title},
      function(data){
        if(data=='1'){
           alert("保存成功！");
           DG.cancel();
          }else{
           alert("保存失败！");
        }
});

后台：
用UTF-8转译
transactType = URLDecoder.decode(getStringParameter("transactType"),"UTF-8");
content = URLDecoder.decode(getStringParameter("content"),"UTF-8");
title = URLDecoder.decode(getStringParameter("title"),"UTF-8");
即可解决jQuery post请求中文乱码问题。

雪山飞鹄 2012-03-20 11:46 发表评论

Iframe高度自适应问题[子页面控制父页面高度]

雪山飞鹄 — Tue, 20 Mar 2012 01:44:00 GMT

在iframe标记引用的页面中添加如下js代码.切记是iframe的src引用的那个页面中添加

//控制父窗体iframe高度自适应js脚本
var iframeids=["videoframe"]
var iframehide="yes"
function dyniframesize()
{
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++)
{
  if (document.getElementById)
  {
   dyniframe[dyniframe.length] = window.parent.document.getElementById(iframeids[i]);
   if (dyniframe[i] && !window.opera)
   {
    dyniframe[i].style.display="block"
    if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight){
     dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight; }
    else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight){
     dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;}
   }
  }
  if ((document.all || document.getElementById) && iframehide=="no")
  {
   var tempobj=window.parent.document.all? window.parent.document.all[iframeids[i]] : window.parent.document.getElementById(iframeids[i])
   tempobj.style.display="block"
  }
}
}
if (window.addEventListener)
window.addEventListener("load", dyniframesize, false)
else if (window.attachEvent)
window.attachEvent("onload", dyniframesize)
else
window.onload=dyniframesize

其中的videoframe为父页面中iframe的id

雪山飞鹄 2012-03-20 09:44 发表评论

Iframe高度自适应问题

雪山飞鹄 — Tue, 20 Mar 2012 01:42:00 GMT

在含有iframe标签的页面下方添加如下js

查看原文地址

雪山飞鹄 2012-03-20 09:42 发表评论

【转】用原生JavaScript做一个拖拽效果 -- 简明现代魔法

雪山飞鹄 — Thu, 16 Feb 2012 03:52:00 GMT

用原生JavaScript做一个拖拽效果 -- 简明现代魔法

效果演示

拖拽状态：x:0, y:0

Drag me.

雪山飞鹄 2012-02-16 11:52 发表评论

IE浏览器上传文件时本地路径变成”C:\fakepath\”的问题

雪山飞鹄 — Sat, 31 Dec 2011 02:21:00 GMT

你可以通过设置浏览器安全选项得到真实路径：

Internet选项 -> 安全 -> 自定义级别 -> 将本地文件上载至服务器时包含本地目录路径 -> 选“启动” -> 确定

但是，作为开发者，我们不能指望客户去这么做，所以我们必须通过代码解决这个问题。

例如我的上传文件控件的HTML代码是：

那么在JS代码中我就可以这样来获取真实的文件路径：

var file_upl = document.getElementById('file_upl');
file_upl.select();

var realpath = document.selection.createRange().text;

此方案只针对IE浏览器，对其他浏览器火狐，js代码如下：

//附带不用修改浏览器安全配置的javascript代码，兼容ie， firefox全系列

雪山飞鹄 2011-12-31 10:21 发表评论

IFrame高度自适应

雪山飞鹄 — Mon, 26 Dec 2011 15:19:00 GMT

html, body { margin: 0; padding: 0; height: 100%; }
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

雪山飞鹄 2011-12-26 23:19 发表评论

js导出表格数据到word、excel

雪山飞鹄 — Tue, 13 Dec 2011 03:51:00 GMT

核心JavaScript代码

具体看附件
ExportWordAndExcel

雪山飞鹄 2011-12-13 11:51 发表评论

分享一下基于Jquery easy ui的后台管理界面

雪山飞鹄 — Sat, 23 Jul 2011 02:53:00 GMT

本人在web ui设计这块一直很菜。花了一天时间，基于jquery easy ui整了一个后台管理界面。程序的核心在页面布局这块。底层跟数据库交互，这块为了简易起见，使用Apache Commons DbUtils来做了简单的处理。兼容IE6、IE7、IE8、IE9、firefox4、firefox5、chrom、搜狗浏览器等。有心的朋友可以在其他浏览器上测试一下。
登录页面

管理页面

下载地址 http://struts2typeconverter.googlecode.com/files/sitemesh.zip

雪山飞鹄 2011-07-23 10:53 发表评论

基于servlet的文件异步上传

雪山飞鹄 — Fri, 10 Dec 2010 09:19:00 GMT

摘要: package com.future.zfs.util; import java.io.File; import java.io.IOException; import java.io.PrintWriter; import java.util.Iterator; import java.util.List; impo... 阅读全文

雪山飞鹄 2010-12-10 17:19 发表评论

js打印

雪山飞鹄 — Wed, 08 Dec 2010 06:01:00 GMT

摘要: 方法一 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = req... 阅读全文

雪山飞鹄 2010-12-08 14:01 发表评论

神奇的VML

雪山飞鹄 — Mon, 08 Nov 2010 09:25:00 GMT

摘要: vml是什么,大家自己baidu、google vml.zip 下图为用vml在IE浏览器下实现的效果图 ellipserVML.js //点的对象: function point(x0,y0) { this.x = x0; this.y ... 阅读全文

雪山飞鹄 2010-11-08 17:25 发表评论

js在线压缩

雪山飞鹄 — Wed, 03 Nov 2010 03:32:00 GMT

http://dean.edwards.name/packer/
据说jquery就是使用它来压缩,以减小体积的，大家不妨试试,很不错的.

雪山飞鹄 2010-11-03 11:32 发表评论

DOM中的innerHTML、innerText和outerHTML、outerText的区别[转]

雪山飞鹄 — Wed, 03 Nov 2010 02:38:00 GMT

本文转自http://xphnet.hpsbhq.com/paperdetail.aspx?paperid=31

1、功能讲解:
　　innerHTML 设置或获取位于对象起始和结束标签内的 HTML
　　outerHTML 设置或获取对象及其内容的 HTML 形式
　　innerText 设置或获取位于对象起始和结束标签内的文本
　　outerText 设置(包括标签)或获取(不包括标签)对象的文本
　　2、示例代码（可直接复制后转存执行）:
　　
　　
　　Demo
　　
　　
　　
　　
　　

innerHTML效果.

innerText效果.

outerHTML效果.

outerText效果.

　　
　　
　　3、不同之处:
　　简单的说innerHTML和outerHTML、innerText与outerText的不同之处在于：
　　1）、innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析，而innerText与outerText则不会。
　　2)、在设置时，innerHTML与innerText仅设置标签内的文本，而outerHTML与outerText设置包括标签在内的文本。

雪山飞鹄 2010-11-03 10:38 发表评论

jquery之ajaxfileupload异步上传插件

雪山飞鹄 — Tue, 02 Nov 2010 08:57:00 GMT

点我下载工程代码
由于项目需求，在处理文件上传时需要使用到文件的异步上传。这里使用Jquery Ajax File Uploader这个组件下载地址：http://www.phpletter.com/download_project_version.php?version_id=6
服务器端采用struts2来处理文件上传。
所需环境：
jquery.js
ajaxfileupload.js
struts2所依赖的jar包
及struts2-json-plugin-2.1.8.1.jar
编写文件上传的Action

package com.ajaxfile.action;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionSupport;

@SuppressWarnings("serial")
public class FileAction extends ActionSupport {

    private File file;
    private String fileFileName;
    private String fileFileContentType;

    private String message = "你已成功上传文件";

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public File getFile() {
        return file;
    }

    public void setFile(File file) {
        this.file = file;
    }

    public String getFileFileName() {
        return fileFileName;
    }

    public void setFileFileName(String fileFileName) {
        this.fileFileName = fileFileName;
    }

    public String getFileFileContentType() {
        return fileFileContentType;
    }

    public void setFileFileContentType(String fileFileContentType) {
        this.fileFileContentType = fileFileContentType;
    }

    @SuppressWarnings("deprecation")
    @Override
    public String execute() throws Exception {

        String path = ServletActionContext.getRequest().getRealPath("/upload");

        try {
            File f = this.getFile();
            if(this.getFileFileName().endsWith(".exe")){
                message="对不起,你上传的文件格式不允许!!!";
                return ERROR;
            }
            FileInputStream inputStream = new FileInputStream(f);
            FileOutputStream outputStream = new FileOutputStream(path + "/"+ this.getFileFileName());
            byte[] buf = new byte[1024];
            int length = 0;
            while ((length = inputStream.read(buf)) != -1) {
                outputStream.write(buf, 0, length);
            }
            inputStream.close();
            outputStream.flush();
        } catch (Exception e) {
            e.printStackTrace();
            message = "对不起,文件上传失败了!!!!";
        }
        return SUCCESS;
    }

}

struts.xml

xml version="1.0" encoding="UTF-8" ?>
DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
    <package name="struts2" extends="json-default">
        <action name="fileUploadAction" class="com.ajaxfile.action.FileAction">
            <result type="json" name="success">
                <param name="contentType">
                    text/html
                param>
            result>
            <result type="json" name="error">
                <param name="contentType">
                    text/html
                param>
            result>
        action>
    package>
struts>

注意结合Action观察struts.xml中result的配置。

contentType参数是一定要有的，否则浏览器总是提示将返回的JSON结果另存为文件，不会交给ajaxfileupload处理。这是因为struts2 JSON Plugin默认的contentType为application/json，而ajaxfileupload则要求为text/html。
文件上传的jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title heretitle>
        <script type="text/javascript" src="js/jquery.js">script>
        <script type="text/javascript" src="js/ajaxfileupload.js">script>
        <script type="text/javascript">
    function ajaxFileUpload()
    {

        $("#loading")
        .ajaxStart(function(){
            $(this).show();
        })//开始上传文件时显示一个图片
        .ajaxComplete(function(){
            $(this).hide();
        });//文件上传完成将图片隐藏起来

        $.ajaxFileUpload
        (
            {
                url:'fileUploadAction.action',//用于文件上传的服务器端请求地址
                secureuri:false,//一般设置为false
                fileElementId:'file',//文件上传空间的id属性
                dataType: 'json',//返回值类型一般设置为json
                success: function (data, status)  //服务器成功响应处理函数
                {
                    alert(data.message);//从服务器返回的json中取出message中的数据,其中message为在struts2中action中定义的成员变量

                    if(typeof(data.error) != 'undefined')
                    {
                        if(data.error != '')
                        {
                            alert(data.error);
                        }else
                        {
                            alert(data.message);
                        }
                    }
                },
                error: function (data, status, e)//服务器响应失败处理函数
                {
                    alert(e);
                }
            }
        )

        return false;

    }
    script>
    head>
    <body>
        <img src="loading.gif" id="loading" style="display: none;">
        <input type="file" id="file" name="file" />
        <br />
        <input type="button" value="上传" onclick="return ajaxFileUpload();">
    body>
html>

注意观察中的代码，并没有form表单。只是在按钮点击的时候触发ajaxFileUpload()方法。需要注意的是js文件引入的先后顺序，ajaxfileupload.js依赖于jquery因此你知道的。
点我下载工程代码

雪山飞鹄 2010-11-02 16:57 发表评论

FusionCharts Free中文开发指南

雪山飞鹄 — Mon, 26 Jul 2010 00:39:00 GMT

之前了，在blog上发了FusionCharts的一些demo，后来好多朋友加Q发email给我，要求发一些资料，作为学习参考。现将资料提供出来。有需要的可以直接下载。大家有事发mail，不要加Q了，加Q有可能我不能及时回复你。
点我下载FusionCharts Free中文开发指南.pdf

雪山飞鹄 2010-07-26 08:39 发表评论

轻松使用jquery解析XML

雪山飞鹄 — Sat, 10 Jul 2010 04:28:00 GMT

xml文件结构:books.xml

xml version="1.0" encoding="UTF-8"?>
<root>
    <book id="1">
        <name>深入浅出extjsname>
        <author>张三author>
        <price>88price>
    book>
    <book id="2">
        <name>锋利的jQueryname>
        <author>李四author>
        <price>99price>
    book>
    <book id="3">
        <name>深入浅出flexname>
        <author>王五author>
        <price>108price>
    book>
    <book id="4">
        <name>java编程思想name>
        <author>钱七author>
        <price>128price>
    book>
root>

页面代码:

DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery解析xmltitle>
<script type="text/javascript" src="js/jquery-1.4.2.min.js">script>
<script type="text/javascript">
    $(function(){
        $.post('books.xml',function(data){
            //查找所有的book节点
            var s="";
            $(data).find('book').each(function(i){
                var id=$(this).attr('id');
                var name=$(this).children('name').text();
                var author=$(this).children('author').text();
                var price=$(this).children('price').text();
                s+=id+"    "+name+"    "+author+"    "+price+"
";
            });
            $('#mydiv').html(s);
        });
    });
script>
head>
<body>
    <div id='mydiv'>div>
body>
html>

效果图:

完整示例下载

雪山飞鹄 2010-07-10 12:28 发表评论