温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Jquery 异步提交表单(post)

发布时间:2020-07-04 09:54:49 来源:网络 阅读:3951 作者:jethai 栏目:web开发

方法  $.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

 

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI