这个和上一篇文章是连在一起的,基本实现表单填写和填充同步完成。目前填写实现了提交填写的功能,无提交还没太想好,希望大家提出宝贵建议。
思路:java提供查询参数->页面获得所需参数->遍历页面获得封装参数的集合->提交给servlet->完成更新->调用回调显示结果
java部分代码:上篇文章中出现的这里就不重复叙述了。
/**
* 更新调用过程
* */
public final int updater(TreeMap<String,String> parasMap){
this.parasMap=parasMap;
int ret=0;
try{
beforeProcess();
wrapSql();//组装sql语句
replaceParas();
ret=executeUpdate(sql);
}catch(Exception ex){
ex.printStackTrace();
}finally{
close();
}
return ret;
}
/**
* 获得更新参数
* */
public final JSONArray retParas(){
JSONArray jsonArray = null;
try{
beforeProcess();
wrapSql();//组装sql语句
jsonArray=JSONArray.fromObject(getParas());
}catch(Exception ex){
ex.printStackTrace();
}finally{
close();
}
return jsonArray;
}
private void replaceParas() {
for(String s:parasMap.keySet()){
sql=sql.replaceFirst("@"+s, parasMap.get(s));
}
}
public ArrayList getParas(){
int step=0;
ArrayList list=new ArrayList();
for(int i=0;i<sql.length();i++){
step=sql.indexOf("@",step);
if(step==-1){
break;
}
int endStr=sql.indexOf("'", step);
list.add(sql.substring(step+1,endStr));
step++;
}
return list;
}
/**
* 组装sql语句
* Map装servlet传送过来的参数
* 该方法用于重写
*/
public void wrapSql (TreeMap<String,String> sqlMap){}
/**
* 对list中数据进行重新组合
* 该方法用于重写
* */
public void beforeRender(){}
/**
* 组装sql语句:updater
* 该方法用于重写
*/
public void wrapSql (){}
/**
* 对map中数据进行重新组合:updater
* 该方法用于重写
* */
public void beforeProcess(){}
wrapSql()获得sql语句,编写参照如下:
@Override
public void wrapSql (){
sql="insert into qq(qq,name,mark) values('@qq','@name','@mark')";
}
js会把页面的参数传过来,替换@代替的参数,beforeProcess是在获得参数后自定义封装,然后在传给sql语句进行替换。
js部分内容如下:
/*更新填充器*/
$.fn.jUpdater = function(options,callback,err) {
/*
* 默认参数 rc:相关类
vt:更新类型(1-提交更新,2-自动更新)
submit_btn:提交按钮
paras_servlet:获得参数的servlet地址
updater_servlet:更新servlet地址
*/
var tempThis = $(this);
/*获得查询参数*/
$.getJSON(options.paras_servlet,"rc="+options.rc,function(data,status){
try{
if(data==null||data=="null"){//未获得查询参数
if(err){
err();
}
}else{
if(options.vt=="1"){//提交更新
var paras={};
$(options.submit_btn).bind("click",function(){
$.each(data,function(key,value) {//页面提交所有变量
//alert("key="+key+",value="+value);
paras[value]=$.fn.jGetDate(tempThis.find("."+value));
});
//遍历所有值
for (x in paras){
alert("数组索引或对象属性:"+x+" 对应的值:"+paras[x]);
}
paras["rc"]=options.rc;//将关联类传入
$.post(options.updater_servlet,paras,function(data,status){
if(data.indexOf("1")>-1){//执行成功
if(callback){
callback();
}
}else{//执行失败
if(err){
err();
}
}
});
});
}
if(options.vt=="2"){//自动更新
}
}
}catch(e){
alert("更新消息:发生未知异常,请查看控制台或日志!");
}
});
};
$.fn.jGetDate=function(target) {
var ret="";
if(target.is(':text')||target.is(':password')||target.is(':file')||target.is(':hidden')||target.is('textarea')||target.is('select')){
ret=target.val();
}
if(target.is(':checkbox')){
target.filter(":checked").each(function(){
ret+=","+$(this).val();
});
ret=ret.substring(1);
}
if(target.is(':radio')){
ret=target.filter(":checked").val();
}
return ret;
};
另外需要两个servlet
JGetParas:
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
String rc = request.getParameter("rc");//所对应的类名
try {
JBaseConnector a = (JBaseConnector)Class.forName(rc).newInstance();
out.print(a.retParas());
} catch (Exception e) {
e.printStackTrace();
System.out.println("can not get the ref-class name!");
}
out.flush();
out.close();
}
JUpdater.java
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
/*
* 获得参数集合并将参数放置于Map中
* */
TreeMap<String,String> map =new TreeMap<String,String>();
Enumeration pNames=request.getParameterNames();
while(pNames.hasMoreElements()){
String key=(String)pNames.nextElement();
String value=request.getParameter(key);
map.put(key, value);
}
String rc = map.get("rc");//所对应的类名
map.remove("rc");
try {
JBaseConnector a = (JBaseConnector)Class.forName(rc).newInstance();
out.print(a.updater(map));
} catch (Exception e) {
System.out.println("can not get the ref-class name!");
}
out.flush();
out.close();
}
调用过程如下:
<script>
$(function(){
$("#aa").jUpdater(
{
vt : "1",
rc : "JC.tt",
submit_btn : ".bb",
paras_servlet:"../JGetParas",
updater_servlet:"../JUpdater"
},
function() {
alert("数据加载成功");
},
function() {
alert("数据加载失败");
}
);
});
</script>
html代码部分
<div id="aa">
qq:<input type="text" class="qq" /><br />
mark:<input type="text" class="mark" /><br />
name:<input type="text" class="name" /><br />
<input class="bb" type="button" value="ss" />
</div>