Jquery 异步提交表单(post)

2025-01-12 技术教程

方法 $.post(url,params,function(data){});

表单的action，method属性都没有

input 的类型只能为button不能为submit只能为button,否则点击button会执行表单action,不会走jquery异步

前台代码

<scripttype="text/javascript">$(function(){//异步提交表单$("#save").click(function(){$.post("${ctx}/order/save.action",$("#form1").serialize(),function(data){if(data=="true"){alert("备注保存成功");}})})})</script><formid="form1"><inputtype="hidden"name="oid"value="${orderVo.id}"><textareaclass="form-control"name="remark"id="text"rows="3"cols="140">${orderVo.remark}</textarea><inputid="save"class="btnbtn-primary"type="button"value="保存"/>

后台代码:

publicvoidsave(){PrintWriterout=null;try{System.out.println(oid);System.out.println(remark);orderService.saveRemark(oid,remark);HttpServletResponseresponse=ServletActionContext.getResponse();out=response.getWriter();out.print(true);out.flush();out.close();}catch(Exceptione){e.printStackTrace();out.flush();out.close();out.println(0);}}

webx框架

velocity模板实现代码

分页bean

packagecom.alibaba.uyuni.biz.common.bo.dto;importjava.io.Serializable;importcom.alibaba.uyuni.common.enums.NumEnum;/***类Page.java的实现描述：TODO类实现描述**@author杨冬2014年8月21日下午1:19:25*/publicclassUyuniPage<T>implementsSerializable{/****/privatestaticfinallongserialVersionUID=8104777827863916550L;/**每页显示记录数**/privateIntegerpageSize;/**查询的集合**/privateTdata;/**总页数**/privateinttotalPage;/**当前页，第几页**/privateIntegerpageIndex;/**总记录数**/privateIntegertotalNum;/**是否有下页**/privatebooleanhasNextPage=false;/**是否有上页**/privatebooleanhasPreviousPage=false;/***@parampageSize每页条数*@parampageIndex当前页，第几页*@paramtotalNum总记录数*@paramdata查询的集合*/publicUyuniPage(IntegerpageSize,IntegerpageIndex,IntegertotalNum,Tdata){super();if(pageSize==null||pageSize==0){pageSize=NumEnum.FIVE.getValue();}if(pageIndex==null||pageIndex==0){pageIndex=NumEnum.ONE.getValue();}if(totalNum==null||totalNum==0){totalNum=0;}this.pageSize=pageSize;this.data=data;//pageSize==0会报错this.totalPage=(totalNum%pageSize==0)?(totalNum/pageSize):(totalNum/pageSize+1);this.pageIndex=(pageIndex==0)?(1):(pageIndex);this.totalNum=totalNum;this.hasNextPage=(this.totalPage>1&&this.totalPage>this.pageIndex);this.hasPreviousPage=(this.pageIndex>1);}/***@returnthepageSize*/publicIntegergetPageSize(){returnpageSize;}/***@parampageSizethepageSizetoset*/publicvoidsetPageSize(IntegerpageSize){this.pageSize=pageSize;}/***@returnthedata*/publicTgetData(){returndata;}/***@paramdatathedatatoset*/publicvoidsetData(Tdata){this.data=data;}/***@returnthetotalPage*/publicintgetTotalPage(){returntotalPage;}/***@paramtotalPagethetotalPagetoset*/publicvoidsetTotalPage(inttotalPage){this.totalPage=totalPage;}/***@returnthepageIndex*/publicIntegergetPageIndex(){returnpageIndex;}/***@parampageIndexthepageIndextoset*/publicvoidsetPageIndex(IntegerpageIndex){this.pageIndex=pageIndex;}/***@returnthetotalNum*/publicIntegergetTotalNum(){returntotalNum;}/***@paramtotalNumthetotalNumtoset*/publicvoidsetTotalNum(IntegertotalNum){this.totalNum=totalNum;}/***@returnthehasNextPage*/publicbooleanisHasNextPage(){returnhasNextPage;}/***@paramhasNextPagethehasNextPagetoset*/publicvoidsetHasNextPage(booleanhasNextPage){this.hasNextPage=hasNextPage;}/***@returnthehasPreviousPage*/publicbooleanisHasPreviousPage(){returnhasPreviousPage;}/***@paramhasPreviousPagethehasPreviousPagetoset*/publicvoidsetHasPreviousPage(booleanhasPreviousPage){this.hasPreviousPage=hasPreviousPage;}/***@returntheserialversionuid*/publicstaticlonggetSerialversionuid(){returnserialVersionUID;}}

vm页面

<scriptsrc="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script><scripttype="text/javascript">$(function(){$("#confirm").click(function(){varstudentId=$("#studentId").val();if(studentId==""){alert("新增学生");$.ajax({url:"/project/studentRpc/newStudent.json",type:"post",data:$('#studentform').serialize(),dataType:'json',success:function(data){varisAdd=data.content.successed;if(isAdd==true){alert("新增成功");window.location.reload();}}});}else{//更新学生$.ajax({url:"/project/studentRpc/"+studentId+"/updateStudent.json",type:"post",data:$('#studentform').serialize(),dataType:'json',success:function(data){varisDeleted=data.content.successed;if(isDeleted==true){alert("更新成功");window.location.reload();}}});}})})</script></head><body>#if(${studentDto.id})修改#else新增#end<formid="studentform"><inputid="studentId"type="hidden"name="id"value="$!studentDto.id"><br>姓名<inputtype="text"name="name"value="$!studentDto.name"><br>年龄<inputtype="text"name="age"value="$!studentDto.age"><br>性别<inputtype="text"name="sex"value="$!studentDto.sex"><br>年级<inputtype="text"name="grade"value="$!studentDto.grade"><br>班级<inputtype="text"name="team"value="$!studentDto.team"><br>老师<inputtype="text"name="teacher"value="$!studentDto.teacher"><br></form><buttonid="confirm">提交</button></body>

buttom标签必须放到form标签外面，否则点击button会执行表单action,不会走绑定的异步事件

分页显示页面

#set($nextpage=$pb.pageIndex+1)#set($previouspage=$pb.pageIndex-1)#if($pb.hasPreviousPage==true)<ahref="/project/student/studentshow.htm?pageIndex=$previouspage">上一页</a>#end#if($pb.hasNextPage==true)<ahref="/project/student/studentshow.htm?pageIndex=$nextpage">下一页</a>#end<br>#foreach(${studentDto}in${result})<tr><td>${studentDto.id}</td><td>${studentDto.name}</td><td>${studentDto.age}</td><td>${studentDto.sex}</td><td>${studentDto.grade}</td><td>${studentDto.team}</td><td>${studentDto.teacher}</td><td><ahref="/project/student/form.htm?studentId=${studentDto.id}">编辑</a></td><td><ahref="javascript:void(0);"onclick="returndelStudent(${studentDto.id});">删除</a></td></tr><br>#end<ahref="/project/student/form.htm">新增</a></div>

vm做加减运算必须在set标签里面做，且运算符两边必须有空格

#set($a=10)#set($b=$a-1)------------<span>$b</span>

不能直接像freemaker一样 ${b-1}

http://liu400liu.iteye.com/blog/1197466

参考文章：

http://1194867672-qq-com.iteye.com/blog/1945827