近期的项目需要实现前台的流程图绘制的功能,由于完全没有接触过相关的技术,所以一直没有头绪不知道该用什么技术去实现如何去实现。在网站上,我也查到了很多关于在线流程图的的网站,Tersus,Gliffy, Flowchart等 都是很不错的网站。
由此我了解到大多是使用了javascript ,ajax,jquery的技术,所以我就开始去看看这方面的书籍。javascript主要是提供一些网页上的效果,jquery则是用javascript写的一些库其中实现了很多功能(就包括我的流程图绘制的功能),ajax是属于动态的局部地和后台进行交互的技术。
虽然还是刚刚接触,但是感觉有了jquery以后网页的效果就变得更加绚并且调用相当简单。
因为还是新手,所以没有很多总结的东西。我就将一些比较有用的代码贴出来。(我使用的是jsp+jquery)
推荐使用火狐中的firebug来调试js
一、js和servlet之间的交互
js
- function addItem() {
- with (document.getElementById("orderForm")) {
- var product =document.getElementsByName("name");
- for(var i=0;i<product.length;i++)
- {
- alert(product[i].value);
- }
- action = "order.do?method=add&product="+product;
- method = "post";
- submit();
- }
- }
- String object[] = request.getParameterValues("product");
- for(int i=0;i<object.length;i++)
- {
- System.out.println(" 获取的数组值为" +object[i]);
- }
servlet也是通过getParameter来获取参数的
向servlet传参需要使用post模式
用js触发servlet并传参
function dispatchServlet(){
var tmp = document.createElement("form");
var action = "http://.../servlet.do?param1=aaa¶m2=bbb";
tmp.action = action;
tmp.method = "post";
document.body.appendChild(tmp);
tmp.submit();
return tmp;
}
servlet.do?param1=aaa¶m2=bbb";
”?“后面跟参数 [参数名称]=[参数值]
多个参数用 ”&“间隔开。
这样,在servlet中就可以的到参数
String param1 = request.getParameter("param1");
String param2 = request.getParameter("param2");
二、json字符串的处理
使用json2.js 调用
将json转为字符串
var obj={a:[2,3],b:{m:[3,4],n:2} };
var jsonStr = JSON.stringify( obj );
alert(jsonStr);
//将显示 {"a":[2,3],"b":{"m":[3,4],"n":2}}
将字符串转换为json
var c='{"name":"Mike","sex":"女","age":"29"}';
var cToObj=eval("("+c+")");
alert(typeof(cToObj));
三、js中的数组使用
针对这种类型的字符串的处理
{"nodes":{"demo_node_3":{"name":"Start","left":217,"top":25,"type":"start","width":24,"height":24},"demo_node_4":{"name":"Add","left":74,"top":152,"type":"chat","width":86,"height":24},"demo_node_5":{"name":"branch","left":181,"top":88,"type":"fork","width":86,"height":24},"demo_node_8":{"name":"Sub","left":269,"top":152,"type":"chat","width":86,"height":24},"demo_node_11":{"name":"Combine","left":188,"top":230,"type":"join","width":86,"height":24},"demo_node_14":{"name":"end","left":230,"top":298,"type":"end","width":24,"height":24}}
var jsonStr = eval("("+json+")");
var nodes = jsonStr.nodes;
var nodearr = new Array();
for(var n in nodes)
{
alert(nodes[n].name+n);
nodearr.push([n,nodes[n].name]);
}
var lines = jsonStr.lines;
var linesarr = new Array();
for(var l in lines)
{
linesarr.push([l,lines[l].name,lines[l].from,lines[l].to]);
}