使用ajax请求,模态框调用并更改密码

前端页面

<a href="javascript:void(0);" onclick="changPassword()">
  <i class="ace-icon fa fa-cog"></i>
  修改密码
</a>

<script type="text/javascript">
  //打开模态框
  function changPassword(){
    $("#navbar_edit").modal({
      backdrop :‘static‘
    });
  }
</script>
<#include "/include/navbar_edit.html">

<!-- 模态框(Modal) -->
<div class="modal fade" id="navbar_edit" tabindex="-1" role="dialog"
  aria-labelledby="roleEditLabel" aria-hidden="true">
  <div class="modal-dialog" style="width:500px;">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title" id="roleEditLabel">修改密码</h4>
      </div>
      <div class="modal-body">
      <div style="width:90%;">
        <form class="form-horizontal" id="navbar_pwd_reset">
          <div class="form-group">
            <label class="col-sm-4 control-label" for="old_password">旧密码:</label>
            <div class="col-sm-8" style="padding:0">
            <input class="col-sm-12" type="password" id="old_password"
              name="old_password" placeholder="请输入旧密码 " />
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-4 control-label" for="new_password">新密码:</label>
            <div class="col-sm-8" style="padding:0">
            <input class="col-sm-12" type="password" id="new_password"
              name="new_password" placeholder="请输入新密码 " />
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-4 control-label" for="confirm_password">确认新密码:</label>
            <div class="col-sm-8" style="padding:0">
              <input class="col-sm-12" type="password" id="confirm_password"
                name="confirm_password" placeholder="确认新密码 " />
            </div>
          </div>
        </form>
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-xs btn-default"
          data-dismiss="modal" id="navbar_close_btn">
        <i class="ace-icon fa fa-times bigger-110"></i> <span
          class="bigger-110 no-text-shadow">关闭</span>
      </button>
      <button type="button" class="btn btn-xs btn-primary" id="navbar_save_btn">
        <i class="ace-icon fa fa-floppy-o bigger-110"></i> <span
          class="bigger-110 no-text-shadow">保存</span>
      </button>
    </div>
   </div>
    <!-- /.modal-content -->
  </div>
<!-- /.modal -->
</div>

<script type="text/javascript">
  $("#navbar_edit").on("show.bs.modal", function() {
    $("#navbar_edit #navbar_pwd_reset").formClear();

  });
  $("#navbar_edit").on("hidden.bs.modal", function() {
    $(this).removeData("bs.modal");

  });
  $(document).on("click", "#navbar_save_btn", function(e) {
    var old_psd = $("#navbar_pwd_reset #old_password").val();
    var new_psd = $("#navbar_pwd_reset #new_password").val();
    var con_psd = $("#navbar_pwd_reset #confirm_password").val();
    //alert(old_psd);
    //alert(new_psd);
    //alert(con_psd);
    if (old_psd == "" || new_psd == "" || con_psd == "") {
    bootbox.alert("相关字段不为空,请输入!");
      return false;
    };
    if (old_psd == new_psd) {
    bootbox.alert("旧密码和新密码相同,请重新输入!");
      return false;
    };
    if (new_psd != con_psd) {
      bootbox.alert("两次输入新密码不相同,请重新输入!");
      return false;
    };
    var params = $("#navbar_pwd_reset").serialize();
      //alert(params);
      $.ajax({
        cache : true,
        type : "POST",
        url : "${ctx!}/modifyPassword",
        data : params,
        async : false,
        error : function(request) {
          bootbox.alert("服务器连接错误,请稍后再试");
        },
        success : function(data) {
          if (SQ.isOK(data)) {
            bootbox.alert("重置成功", function() {
              $("#navbar_close_btn").click();
            });
          } else {
            bootbox.alert("重置失败:" + SQ.getMessage(data));
          }
        },
      });
    });
</script>

后端页面

public void modifyPassword() {
  BasMember sysUser = this.getLoginUser();

  if (sysUser == null || sysUser.getInt(BasMember.IsDelete).equals(1)) {
    render(new JsonRender(new AjaxResult(Constants.RESPONSE_STATUS_FAIL, "会话已过期,请重新登录!")).forIE());
    return;
  }

  // 旧秘密
  String password = getPara("old_password");
  password = CommonUtil.getEncryptedPwd(password);
  if (!password.equals(sysUser.get(BasMember.Password))) {
    render(new JsonRender(new AjaxResult(Constants.RESPONSE_STATUS_FAIL, "旧密码不正确!")).forIE());
    return;
  }

  // 新密码
  password = getPara("new_password");
  password = CommonUtil.getEncryptedPwd(password);

  // 赋值
  sysUser.set(BasMember.Password, password);
  sysUser.set(BasMember.ModifyBy, this.getLoginId());
  sysUser.set(BasMember.ModifyTime, StringUtil.getNowTime());
  if (!sysUser.update()) {
    render(new JsonRender(new AjaxResult(Constants.RESPONSE_STATUS_FAIL, "修改时出现异常")).forIE());
  }
  render(new JsonRender(new AjaxResult(Constants.RESPONSE_STATUS_OK, "修改成功!")).forIE());
}

时间: 2024-09-29 23:53:41

使用ajax请求,模态框调用并更改密码的相关文章

ajax+json模态框中分页(spring+struts+mybatis+easyui分页插件)

0.业务需求: 点击每个数字的时候可以显示每个对应的详细记录.也就是得点击11的时候拿着开采部与C级去查询. 1.页面中的模态框与分页组件(注意:需要隐藏一个页号,点击分页插件的时候给隐藏的页号赋值,ajax再次请求的时候取页面的页号值) <!-- 隐藏查询条件的页号 --> <input type="hidden" name="currentPage" id="currentPage"> <!-- 模态框 统计详细

ajax请求,html调用js

1:html中调用js中的函数,js使用ajax请求向后台请求,返回数据. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> var url; //定义变量url function link() { //你的功能 $.ajax({ //ajax请求

ajax 请求发出了,数据更改了,但是没进入success 函数 把success 换成 complete

$(function(){ $(document).on('tap','.w-location-group .mui-table-view-cell',function(){ var bool = $(this).find('span.location-ico').attr('data-id') == 1; var boolen = $('.write-del span').hasClass('bianji504'); if(boolen){ $('.w-location-group .mui-

ajax及模态框

//修改$("#eventList").on("click",".btn-edit",function () { var _id = $(this).parent().data("id"); var model_id = $("#resBox").find(".list-modal").find(".actt").data("id"); var _

jQuery delegate方法实现Ajax请求事件不丢失

给元素绑定click事件后 ,遇到一个问题:当执行一些ajax请求,再次调用此页面,里面的这个click事件就失效了 比如说:我的分页是一个ajax请求 但我点下一页时 后生成的元素a就没有了click事件了 自己做项目时遇到的问题: 批量删除复选框,当点击删除的时候出发jquery页面写的方法获取所有复选框的值,直接smarty注入调取页面时没问题,当根据条件查询(Ajax实现),再次调用页面列出记录时,单击事件失效 原因:ajax加载内容是在$(document).ready()之后的操作,

防止重复发送ajax请求

前端代码是当输入密码个数为6个的时候,触发ajax请求,但输入很快的时候会触发多个请求,为了防止重复发送请求. 可以利用jquery ajaxPrefilterzhong中断请求 局限性:仅仅对jquery 发送的ajax请求有作用 调用abort后jquery会执行error的方法,抛出abort的异常信息.可以使用以下方式区分出该类型的异常. error:function(jqXHR, textStatus, errorThrown){ if(errorThrown != 'abort'){

Ajax请求过程中显示“进度”的简单实现

Ajax在Web应用中使用得越来越频繁.在进行Ajax调用过程中一般都具有这样的做法:显示一个GIF图片动画表明后台正在工作,同时阻止用户操作本页面(比如Ajax请求通过某个按钮触发,用户不能频繁点击该按钮产生多个并发Ajax请求):调用完成后,图片消失,当前页面运行重新编辑.以下图为例,页面中通过一个Load链接以Ajax请求的方式加载数据(左).当用户点击该链接之后,Ajax请求开始,GIF图片显示“Loading“状态,同时当前页面被“罩住”防止用户继续点击Load按钮(中):Ajax请求

使用jQuery形成Ajax请求

1.创建MVC4新项目,使用"Internet应用程序"模板. 2.添加CustomAjax控制器,具体代码如下. public class CustomAjaxController : Controller { public ActionResult Index() { return View(); } public ActionResult PrivacyPolicy() { return PartialView(); } } 3.添加PrivacyPolicy分部视图 @sect

jquery.ajax请求aspx和ashx的异同 Jquery Ajax调用aspx页面方法

1.jquery.ajax请求aspx 请求aspx的静态方法要注意一下问题: (1)aspx的后台方法必须静态,而且添加webmethod特性 (2)在ajax方法中contentType必须是"application/json", (3)data传递的数据必须是严格的json数据,如"{'a':'aa','b':'bb'}",而且参数必须和静态方法的参数一 一对应 (4)aspx的后台方法返回的数据默认形式是"{'d':'返回的内容'}",所