Jquery 异步提交表单(post)

简介: 方法  $.post(url,params,function(data){});表单的action,method属性都没有input 的类型只能为button不能为submit只能为button,否则点击button会执行表单action,不会走jquery异步前台代码<script type="text/javascript">$(function()        

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

表单的action,method属性都没有

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

前台代码

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


后台代码:

 public void save(){
  PrintWriter out=null;
  try {
   System.out.println(oid);
   System.out.println(remark);
   orderService.saveRemark(oid,remark);
   HttpServletResponse response=ServletActionContext.getResponse();
     out=response.getWriter();
     out.print(true);
     out.flush();
     out.close();
   
  } catch (Exception e) {
   
   e.printStackTrace();
   out.flush();
   out.close();
   out.println(0);
  }
  
  
 }



webx框架

velocity模板实现代码

分页bean

package com.alibaba.uyuni.biz.common.bo.dto;

import java.io.Serializable;

import com.alibaba.uyuni.common.enums.NumEnum;

/**
 * 类Page.java的实现描述:TODO 类实现描述
 * 
 * @author 杨冬 2014年8月21日 下午1:19:25
 */
public class UyuniPage<T> implements Serializable {

    /**
     * 
     */
    private static final long serialVersionUID = 8104777827863916550L;
    /** 每页显示记录数 **/
    private Integer           pageSize;
    /** 查询的集合 **/
    private T                 data;
    /** 总页数 **/
    private int               totalPage;
    /** 当前页,第几页 **/
    private Integer           pageIndex;
    /** 总记录数 **/
    private Integer           totalNum;
    /** 是否有下页 **/
    private boolean           hasNextPage      = false;
    /** 是否有上页 **/
    private boolean           hasPreviousPage  = false;

    /**
     * @param pageSize 每页条数
     * @param pageIndex 当前页,第几页
     * @param totalNum 总记录数
     * @param data 查询的集合
     */
    public UyuniPage(Integer pageSize, Integer pageIndex, Integer totalNum, T data){
        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);

    }

    /**
     * @return the pageSize
     */
    public Integer getPageSize() {
        return pageSize;
    }

    /**
     * @param pageSize the pageSize to set
     */
    public void setPageSize(Integer pageSize) {
        this.pageSize = pageSize;
    }

    /**
     * @return the data
     */
    public T getData() {
        return data;
    }

    /**
     * @param data the data to set
     */
    public void setData(T data) {
        this.data = data;
    }

    /**
     * @return the totalPage
     */
    public int getTotalPage() {
        return totalPage;
    }

    /**
     * @param totalPage the totalPage to set
     */
    public void setTotalPage(int totalPage) {
        this.totalPage = totalPage;
    }

    /**
     * @return the pageIndex
     */
    public Integer getPageIndex() {
        return pageIndex;
    }

    /**
     * @param pageIndex the pageIndex to set
     */
    public void setPageIndex(Integer pageIndex) {
        this.pageIndex = pageIndex;
    }

    /**
     * @return the totalNum
     */
    public Integer getTotalNum() {
        return totalNum;
    }

    /**
     * @param totalNum the totalNum to set
     */
    public void setTotalNum(Integer totalNum) {
        this.totalNum = totalNum;
    }

    /**
     * @return the hasNextPage
     */
    public boolean isHasNextPage() {
        return hasNextPage;
    }

    /**
     * @param hasNextPage the hasNextPage to set
     */
    public void setHasNextPage(boolean hasNextPage) {
        this.hasNextPage = hasNextPage;
    }

    /**
     * @return the hasPreviousPage
     */
    public boolean isHasPreviousPage() {
        return hasPreviousPage;
    }

    /**
     * @param hasPreviousPage the hasPreviousPage to set
     */
    public void setHasPreviousPage(boolean hasPreviousPage) {
        this.hasPreviousPage = hasPreviousPage;
    }

    /**
     * @return the serialversionuid
     */
    public static long getSerialversionuid() {
        return serialVersionUID;
    }

}

vm页面

  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <script type="text/javascript">

        $(function()
        {
               $("#confirm").click(function(){
                var studentId=$("#studentId").val();
                if(studentId==""){
                    alert("新增学生");
                    $.ajax({
                        url:"/project/studentRpc/newStudent.json",
                        type:"post",
                        data:$('#studentform').serialize(),
                        dataType: 'json',
                        success:function(data){
                            var isAdd= 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){
                            var isDeleted= data.content.successed;
                            if(isDeleted==true){
                                alert("更新成功");
                                window.location.reload();
                            }
                        }
                    });
                }
            })
        })
    </script>
</head>
<body>
#if(${studentDto.id})
修改
#else
新增
#end
<form id="studentform">
    <input  id="studentId" type="hidden" name="id" value="$!studentDto.id"><br>
    姓名<input type="text" name="name" value="$!studentDto.name"><br>
    年龄<input type="text" name="age" value="$!studentDto.age"><br>
    性别<input type="text" name="sex" value="$!studentDto.sex"><br>
    年级<input type="text" name="grade" value="$!studentDto.grade"><br>
    班级<input type="text" name="team" value="$!studentDto.team"><br>
    老师<input type="text" name="teacher" value="$!studentDto.teacher"><br>
</form>
<button id="confirm">提交</button>
</body>

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


分页显示页面

#set($nextpage=$pb.pageIndex + 1)
#set($previouspage=$pb.pageIndex - 1)

#if($pb.hasPreviousPage == true)     
<a href="/project/student/studentshow.htm?pageIndex=$previouspage">上一页</a>
#end

#if($pb.hasNextPage == true) 
<a href="/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><a href="/project/student/form.htm?studentId=${studentDto.id}">编辑</a></td>
      <td><a href="javascript:void(0);" onclick = "return delStudent(${studentDto.id});">删除</a></td>
      </tr>
      <br>
#end      
<a href="/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

 

本文出自 “点滴积累” 博客,请务必保留此出处http://tianxingzhe.blog.51cto.com/3390077/1682600

目录
相关文章
|
5月前
|
JavaScript 前端开发
jquery中有.post,.get,$.getJSON为什么没postJSON
jquery中有.post,.get,$.getJSON为什么没postJSON
|
8月前
|
JSON 前端开发 JavaScript
AJAX(GET POST请求、 jQuery axios 发送请求、跨域--cors、请求超时、网络异常、放弃请求、重复发送请求)(三)
AJAX(GET POST请求、 jQuery axios 发送请求、跨域--cors、请求超时、网络异常、放弃请求、重复发送请求)(三)
|
1月前
|
安全 JavaScript 数据安全/隐私保护
jQuery会员中心安全修改表单特效
jQuery实现的会员中心安全修改表单特效代码是一款实现了可以修改登录密码,交易密码,手机号码,实名认证,电子邮箱,安全设置表单,会员表单等设置效果的代码
14 4
jQuery会员中心安全修改表单特效
|
6月前
|
JavaScript 前端开发
前端基础 -JQuery之 表单选择器
前端基础 -JQuery之 表单选择器
28 0
|
2月前
|
JavaScript 前端开发 数据格式
2022年11月23日——jQuery——T1(基础选择器与表单选择器)
2022年11月23日——jQuery——T1(基础选择器与表单选择器)
46 0
|
6月前
|
JavaScript 前端开发
前端基础 - JQuery 简单的表单校验器
前端基础 - JQuery 简单的表单校验器
31 0
|
8月前
|
缓存 JSON 前端开发
AJAX(GET POST请求、 jQuery axios 发送请求、跨域--cors、请求超时、网络异常、放弃请求、重复发送请求)(二)
AJAX(GET POST请求、 jQuery axios 发送请求、跨域--cors、请求超时、网络异常、放弃请求、重复发送请求)(二)
|
8月前
|
XML 数据采集 Web App开发
AJAX(GET POST请求、 jQuery axios 发送请求、跨域--cors、请求超时、网络异常、放弃请求、重复发送请求)(一)
AJAX(GET POST请求、 jQuery axios 发送请求、跨域--cors、请求超时、网络异常、放弃请求、重复发送请求)
|
10月前
|
JavaScript 前端开发
Form表单利用Jquery Validate验证以及ajax提交
Form表单利用Jquery Validate验证以及ajax提交
50 0
|
11月前
|
缓存 JavaScript 前端开发
开心档之jQuery - AJAX get() 和 post() 方法
【摘要】 jQuery - AJAX get() 和 post() 方法jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。HTTP 请求:GET vs. POST两种在客户端和服务器端进行请求-响应的常用方法是:GET 和 POST。GET - 从指定的资源请求数据POST - 向指定的资源提交要处理的数据GET 基本上用于从服务器获得(取...