MUI框架编写修改密码页面并且ajax请求后台数据拿到接口完成修改密码功能

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

<title>修改密码</title>
<link rel="stylesheet" href="css/mui.min.css"/>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/password_change.css"/>
<link rel="stylesheet" href="css/iscroll.css"/>

</head>
<body>
<header class="mui-bar mui-bar-nav" style="display: block;height: 64px;padding-top:20px">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">修改密码</h1>
</header>
<div id="wrapper">
<div id="scroller" style="transform-origin: 0px 0px 0px; transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(0px, 0px) scale(1) translateZ(0px);">
<div class="mui-content"style="padding-top: 64px;">
<div class="mui-content-padded" style="margin: 0px;margin-top: 14px">
<form class="mui-input-group">
<div class="mui-input-row">
<input type="password" class="mui-input-clear" placeholder="请输入旧密码" id="oldpwd">
</div>
<div class="mui-input-row">
<input type="password" class="mui-input-clear" placeholder="请输入新密码" id="newpwd">
</div>
<div class="mui-input-row">
<input type="password" class="mui-input-clear" placeholder="请再次输入新密码"id="newpwdagain">
</div>
</form>
</div>
<button type="button" class="mui-btn mui-btn-primary mui-btn-block content_btn" onclick="submit()">完成</button>
</div>

</div>
</div>
<script src="js/mui.min.js "></script>
<script src="js/jquery.min.js"></script>
<script>
//跳转页面方法
function showpage(x,y)
{
mui.openWindow({
url: x,
id: y,
preload: true,
show: {
aniShow: ‘pop-in‘
},
styles: {
popGesture: ‘hide‘
},
waiting: {
autoShow: false
}
});
}

</script>
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript">
//调用下拉滑动弹回效果
var Scroll = new iScroll(‘wrapper‘,{vScroll: true,hScrollbar:false});
//ajax异步请求验证与修改密码
function submit(){
//开始传值请求
var guid="501A73825438A410E050007F01003B83";
var OldPass=$(‘#oldpwd‘).val();
var NewPass=$(‘#newpwd‘).val();
var url = "这里放后台给你的借口地址URL哦!!!"
//首先判断密码框是否为空
var newpwdagain=$(‘#newpwdagain‘).val();
if(OldPass==""){
alert(‘旧密码不能为空‘);
}
if(NewPass==""||newpwdagain==""){
alert(‘新密码不能为空‘);
}else{
$.ajax({
type: "post",
url: url,
success: function(result){
result = result.trim();
result = result.replace(/\n/g,‘‘);
alert(result);
}
});
}

}
</script>
</body>
</html>

时间: 2024-10-12 09:32:15

MUI框架编写修改密码页面并且ajax请求后台数据拿到接口完成修改密码功能的相关文章

vue实战使用ajax请求后台数据(小白)

vue实战使用ajax请求后台数据(小白) 前言:前端小白入门到这个阶段,应该会知道我们所做的页面上那些数据,绝大部分都不是静态的数据,而是通过调用后台接口把数据渲染到页面上的效果.ajax可以帮助我们更好的去实现这一点,下面是详解在vue中如何使用它. vue本身它是不支持直接发送ajax请求的,需要用到axios(一个基于promise的HTTP库,可以用在浏览器和node.js中)这是Axios文档的介绍,详细可查看:https://www.kancloud.cn/yunye/axios/

ajax 请求后台数据返回异常 及 提示404方法名不存在

1.正常使用 Ajax 调取后台数据时,提示方法名不存在,Ajax前端正常,方法类bean注入正常,方法注解正常.但参数解析时出现异常. @RequestMapping(value="/getProject") @ResponseBody public Map<String,Object> getProject(@RequestBody Map<String, Object> paraMap,HttpServletRequest request){ Map<

js页面用定时任务通过AJAX获取后台数据,但是从这个页面跳转到其他页面后,定时任务仍然在定时请求后台

setInterval(function(){//ajax 请求后台数据},1000);这个是A页面的定时器然后我在A页面通过其他请求跳转到其他页面之后后台发现A页面的定时器的那个请求仍然在执行为什么会出现这种情况呢?怎么能让我跳转到其他页面之后定时任务不执行呢? yj327243832 | 浏览 1987 次  2014-08-22 17:26 2014-08-23 11:03 最佳答案 个人感觉如果A页面已经跳转到其他页面,那么那个定时器的请求应该不会再被执行,因为A页面在浏览器中应该已经被

滑轮滚动到页面底部ajax加载数据

滚动下拉到页面底部加载数据是很多瀑布流网站的做法,那来看看配合jsonp是如何实现的吧 当然本例子采用的是jquery库,后期会做成原生js.本例的数据调用的是锋利的jquery一书提供的一段json. 首先要先判断页面怎么样才是滚动到底部,也就是scrollTop+window的height是否大于document的height,jquery如下代码: $(window).scrollTop()+$(window).height()>=$(document).height(): 再给windo

ajax同步异步设置导致的问题及return返回值(返回ajax请求的数据)

一.ajax同步异步设置导致父子页面数据更新不一致问题. 1.在修复入宿退宿功能时,发现点击退宿.入宿按钮时.父页面数据更新了但是子页面数据要重新打开才能更新.如下图: 因为数据刷新函数如下:父页面刷新函数findRoomPeople()采用的是异步,所以,操作的数据还没更新,子页面刷新函数loadRoomInfo()就已经执行,所以获取到的数据还是之前的数据. <script> roomHandle: function () { /*刷新数据变化*/ parent.cootoo_room.f

ajax请求后台,返回json格式数据,模板!

添加一个用户的时候,需要找出公司下所有的部门,和相应部门下的角色,利用ajax请求,实现联动技术.将返回的json格式数据,添加到select标签下. <script type="text/javascript">        //加载出部门的信息            function loadGroup(){                            $.ajax({                    type:"post",  

用ajax获取后台数据,返回json数据,怎么在前台使用?

用ajax获取后台数据,返回json数据,怎么在前台使用呢? 后台 C# code ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 if (dataType == "SearchCustomer")                 {                     int ID;                     if (Int32.TryParse(CustomerID, out ID))                     {    

ajax请求返回数据,模板中的数据处理

/*ajax请求返回数据,模板中的数据处理*/ function QueryGameAsset(){ var new_start_time=$('#new_start_time').val();//开始时间 var new_end_time=$('#new_end_time').val();//结束时间 if(!new_start_time||!new_end_time){ alert("时间不能为空"); return false; } $.ajax({ url:'/Statisti

mvc5 webap2 前台如何使用 ajax 请求后台API

按照正常的写法,总是出现404错误,研究了很久,在这里找到了解决方案:http://buxuxiao.com/article/using-jquery-to-post-frombody-parameters-to-web-api 现在总结一下, 单个参数的情况下: 1.后台参数正确的写法如下: [Route("Services/{controller}/{action}")] [HttpPost] [HttpGet] public string UploadTransportNetwo