ajax

ajax

layui中使用form表单监听ajax异步验证注册完整案例

博客gallon 发表了文章 • 0 个评论 • 1883 次浏览 • 2018-09-30 16:02 • 来自相关话题

layui中使用form表单监听ajax异步验证注册完整案例:   一.html代码如下:   <!DOCTYPE html> <html> <head> ...查看全部
layui中使用form表单监听ajax异步验证注册完整案例:
 
一.html代码如下:
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="keywords" content="雷小天">
<meta name="description" content="雷小天博客-layui中使用form表单监听异步验证注册">
<link rel="stylesheet" href="__RES__/layui/css/layui.css">
<link rel="stylesheet" href="__RES__/css/global.css">
</head>
<body>

<div class="fly-header layui-bg-black">
<div class="layui-container">
<a class="fly-logo" href="{:U('device/getinfo')}">
<img src="__RES__/images/logo.png" alt="layui">
</a>


<ul class="layui-nav fly-nav-user">
<!-- 未登入的状态 -->
<li class="layui-nav-item">
<a class="iconfont icon-touxiang layui-hide-xs" href="user/login.html"></a>
</li>
<li class="layui-nav-item">
<a href="{:U('device/login')}">登入</a>
</li>
<li class="layui-nav-item">
<a href="javascript::void;">注册</a>
</li>

</ul>
</div>
</div>

<div class="layui-container fly-marginTop">
<div class="fly-panel fly-panel-user" pad20>
<div class="layui-tab layui-tab-brief" lay-filter="user">
<ul class="layui-tab-title">
<li><a href="{:U('device/login')}">登入</a></li>
<li class="layui-this">注册</li>
</ul>
<div class="layui-form layui-tab-content" id="LAY_ucm" style="padding: 20px 0;">
<div class="layui-tab-item layui-show">
<div class="layui-form layui-form-pane">
<form method="post">
<div class="layui-form-item">
<label for="L_username" class="layui-form-label">手机</label>
<div class="layui-input-inline">
<input type="text" id="signuppassdata" name="phone" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
</div>

<div class="layui-form-item">
<label for="L_username" class="layui-form-label">卡号</label>
<div class="layui-input-inline">
<input type="text" id="cardno" name="cardno" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
</div>


<div class="layui-form-item">

<button class="layui-btn" type="submit" lay-filter="reg" lay-submit="" id="signuppass" >立即注册</button>

</div>

</form>
</div>
</div>
</div>
</div>
</div>

</div>

<div class="fly-footer">
<p>开门社区 2018 &copy; <a href="http://www.100txy.com/" target="_blank">100txy.com 出品</a></p>
<p><a href="JavaScript::void;" target="_blank">雷小天博客</a></p>
</div>

<script src="__PUBLIC__/mobile/js/jquery.js"></script>
<script src="__RES__/layui/layui.js"></script>
<script>

//监听提交
layui.use('form', function(){
var form = layui.form;
form.on('submit(reg)', function(data){
// layer.msg(JSON.stringify(data.field));//弹出json格式所有表单的值
var phone=data.field.phone;
var cardno=data.field.cardno;
if(phone.length!=11){
layer.msg('请输入有效的手机号码', {icon: 2});
return false;
}
var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
if(!myreg.test(phone)){
layer.msg('请输入有效的手机号码', {icon: 2});
return false;
}
if(cardno.length!=8){
layer.msg('请输入有效的卡片内码!', {icon: 2});
return false;
}
$.ajax({
type:"POST",
url:"index.php?m=Home&c=Device&a=ajax_reg",
data:"phone="+phone+"&cardno="+cardno,
dataType:"json",
success:function(data){
if(data.status=='yes'){
layer.msg('注册成功!', {icon: 1});
var url = "{:U('device/getinfo')}"; //成功跳转的url
setTimeout(window.location.href=url,2000);
}else{
layer.msg(data.msg, {icon: 2});
}
},
});
return false;
});
});

</script>

</body>
</html>
二.php代码如下:
 
//表单异步提交
public function ajax_reg(){
if(isset($_POST['phone'])&&isset($_POST['cardno'])){
$roomnostr = M("userinfo")->where(array('cardno'=>$_POST['cardno']))->getField('roomno');
if(!$roomnostr){
echo json_encode(array('status'=>'no','msg'=>'无效的卡片内码,请联系管理员!'));
exit();
}
$wechatinfo=$_SESSION['wechatinfo'];
if(!$wechatinfo){
echo json_encode(array('status'=>'no','msg'=>'页面已过期请重新扫码进入!'));
exit();
}

$result= M("weixin")->where(array('openid'=>$wechatinfo['openid']))->field('is_signup,area_id')->find();
$areaArr=explode('-',$result['area_id']);
// $result=M("weixin")->getFieldByOpenid($_POST['openid'],'is_signup');
if(isset($result)&&$result['is_signup']==1){//如果注册过一次下次只更新门区
$new_area=$roomnostr;
$reg=M("weixin")->where(array('openid'=>$wechatinfo['openid']))->save(array('area_id'=>$new_area));
echo json_encode(array('status'=>'no','type'=>'signuppass','msg'=>'你已注册为该门区的租户,请勿重复注册!'));
exit();
}else{
$data=array(
'is_signup'=>1,
'phone'=>$_POST['phone'],
'openid'=>$wechatinfo['openid'],
'nickname'=>$wechatinfo['nickname'],
'sex'=>$wechatinfo['sex'],
'headimgurl'=>$wechatinfo['headimgurl'],
'area_id'=>$roomnostr,
'regtime'=>time(),
'cardno'=>$_POST['cardno'],
);
$reg=M("weixin")->add($data);
if($reg){
echo json_encode(array('status'=>'yes','msg'=>'恭喜你,注册成功!'));
}
}

}
}

thinkcmf模板开发教程之<四>jquery动态往评论列表li中前添加和后追加

博客maomao 发表了文章 • 0 个评论 • 1453 次浏览 • 2018-09-19 22:10 • 来自相关话题

thinkcmf模板开发教程之<四>jquery动态往评论列表li中前添加和后追加:   一.前添加的jquery代码如下:   $(" <li class=\"commen ...查看全部
thinkcmf模板开发教程之<四>jquery动态往评论列表li中前添加和后追加:
 
一.前添加的jquery代码如下:
 
$(" <li class=\"comment-content\"><span class=\"comment-f\">#"+data.id+"</span><div class=\"comment-main\"><p><a class=\"address\" href=\"javascript:;\" rel=\"nofollow\" target=\"_blank\">"+data.user_nickname+"</a><span class=\"time\">("+data.add_time+")</span><br>"+data.content+"</p></div></li>").prependTo("#comment_list");
二.后追加的jquery的代码如下:
 
$("#comment_list").append(" <li class=\"comment-content\"><span class=\"comment-f\">#"+data.id+"</span><div class=\"comment-main\"><p><a class=\"address\" href=\"javascript:;\" rel=\"nofollow\" target=\"_blank\">"+data.user_nickname+"</a><span class=\"time\">("+data.add_time+")</span><br>"+data.content+"</p></div></li>");

三.给大写一个完整的jquery前添加,后追加的案例如下:
 
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./jquery-2.2.4.min.js">
</script>
<script type="text/javascript">
$(function(){
//获取按钮并设置点击事件
$("button").click(function(){
//获取输入框里面的值
var value = $("input[name = 'uname']").val();
//
switch ($(this).html()){
case "前添加":
//获取到ul并在其前面添加
//$("ul").prepend("<li>" + value +"</li>");
$("<li>" + value +"</li>").prependTo("ul");
break;
case "后追加":
$("ul").append("<li>" + value +"</li>");
//$("<li>" + value +"</li>").appendTo("ul");
break;
}

});
});
</script>
</head>

<body>
<h2>jquery 前追加和后追加</h2>
<ul>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
</ul>
名称:<input type="text" name="uname" />
<button>前添加</button>
<button>后追加</button>
</body>
</html>

jquery ajax清除缓存 解决缓存的5种方法

博客maomao 发表了文章 • 0 个评论 • 2384 次浏览 • 2018-05-29 08:35 • 来自相关话题

首先了解缓存的作用,缓存的主要作用是:如果是不需要修改的数据,可以避免每次请求都需要向服务器发送请求,从而减少服务器压力,提高运行速度 如果开启缓存的话,如果请求的地址和参数及参数值都相同,则返回缓存的值 根据上述描述,解决缓存最直接的 ...查看全部
首先了解缓存的作用,缓存的主要作用是:如果是不需要修改的数据,可以避免每次请求都需要向服务器发送请求,从而减少服务器压力,提高运行速度
如果开启缓存的话,如果请求的地址和参数及参数值都相同,则返回缓存的值
根据上述描述,解决缓存最直接的方法就是给请求的URL后面加上一个随机参数(***.action?random=Math.random()或者直接加一个时间参数),但该方法不适用于就项目改造,因为要在每个ajax请求的地方都加上随机参数,是一个巨大的工作量
在这种情况下,我们就有必要给jquery ajax设置一个全局的禁用缓存的设置
如下所示:
$(function(){
$.ajaxSetup({
cache:false;
});
});Ajax解决缓存的5种方法总结
1、在ajax发送请求前加上 anyAjaxObj.setRequestHeader(“If-Modified-Since”,”0″)。
2、在ajax发送请求前加上 anyAjaxObj.setRequestHeader(“Cache-Control”,”no-cache”)。
3、在URL后面加上一个随机数: “fresh=” + Math.random();。
4、在URL后面加上时间搓:”nowtime=” + new Date().getTime();。
5、如果是使用jQuery,直接这样就可以了$.ajaxSetup({cache:false})。这样页面的所有ajax都会执行这条语句就是不需要保存缓存记录。
 
精品原创源码下载

ecshop根据select jquery ajax改变异步请求改变动态数据

博客maomao 发表了文章 • 0 个评论 • 1375 次浏览 • 2018-05-28 09:50 • 来自相关话题

ecshop根据select jquery ajax改变异步请求改变动态数据的案例:   一.html代码如下:<select name="period" id="period" style ...查看全部
ecshop根据select jquery ajax改变异步请求改变动态数据的案例:
 
一.html代码如下:
<select name="period" id="period" style="width:209px;height: 26px;" onchange="change_rates();">
<option value="0">请选择...</option>
<option value="1">一个月</option>
<option value="3">三个月</option>
<option value="6">六个月</option>
<option value="12">一年</option>
<option value="24">两年</option>
<option value="36">三年</option>
</select>    年利率:<span id="rates">0%</span>
二.js代码如下:
<script type="text/javascript">
function change_rates()
{
var period=$("#period option:checked").val();
$.ajax({ //一个Ajax过程
type: "post", //以post方式与后台沟通
url : "user.php?act=get_rates", //与此php页面沟通
dataType:'json',//从php返回的值以 JSON方式 解释
data: 'period='+period, //发给php的数据有两项,分别是上面传来的u和p
success: function(json){//如果调用php成功
//alert(json.rates); //把php中的返回值(json.username)给 alert出来
$("#rates").html(json.rates+'%');
}
});
}
</script>
三.后端PHP代码
    $period = intval($_POST['period']);
echo json_encode(array('status'=>0,'rates'=>$period));exit;
//$period=12;
$sql = "select rates from " . $GLOBALS['ecs']->table('rates') . " where period='$period' ";
$rates = $db->getOne($sql);
if(empty($rates))
{
echo json_encode(array('status'=>0,'rates'=>0));
}
else
{
echo json_encode(array('status'=>1,'rates'=>$rates['rates']));
}
 
精品原创源码

layui中使用form表单监听ajax异步验证注册完整案例

博客gallon 发表了文章 • 0 个评论 • 1883 次浏览 • 2018-09-30 16:02 • 来自相关话题

layui中使用form表单监听ajax异步验证注册完整案例:   一.html代码如下:   <!DOCTYPE html> <html> <head> ...查看全部
layui中使用form表单监听ajax异步验证注册完整案例:
 
一.html代码如下:
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="keywords" content="雷小天">
<meta name="description" content="雷小天博客-layui中使用form表单监听异步验证注册">
<link rel="stylesheet" href="__RES__/layui/css/layui.css">
<link rel="stylesheet" href="__RES__/css/global.css">
</head>
<body>

<div class="fly-header layui-bg-black">
<div class="layui-container">
<a class="fly-logo" href="{:U('device/getinfo')}">
<img src="__RES__/images/logo.png" alt="layui">
</a>


<ul class="layui-nav fly-nav-user">
<!-- 未登入的状态 -->
<li class="layui-nav-item">
<a class="iconfont icon-touxiang layui-hide-xs" href="user/login.html"></a>
</li>
<li class="layui-nav-item">
<a href="{:U('device/login')}">登入</a>
</li>
<li class="layui-nav-item">
<a href="javascript::void;">注册</a>
</li>

</ul>
</div>
</div>

<div class="layui-container fly-marginTop">
<div class="fly-panel fly-panel-user" pad20>
<div class="layui-tab layui-tab-brief" lay-filter="user">
<ul class="layui-tab-title">
<li><a href="{:U('device/login')}">登入</a></li>
<li class="layui-this">注册</li>
</ul>
<div class="layui-form layui-tab-content" id="LAY_ucm" style="padding: 20px 0;">
<div class="layui-tab-item layui-show">
<div class="layui-form layui-form-pane">
<form method="post">
<div class="layui-form-item">
<label for="L_username" class="layui-form-label">手机</label>
<div class="layui-input-inline">
<input type="text" id="signuppassdata" name="phone" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
</div>

<div class="layui-form-item">
<label for="L_username" class="layui-form-label">卡号</label>
<div class="layui-input-inline">
<input type="text" id="cardno" name="cardno" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
</div>


<div class="layui-form-item">

<button class="layui-btn" type="submit" lay-filter="reg" lay-submit="" id="signuppass" >立即注册</button>

</div>

</form>
</div>
</div>
</div>
</div>
</div>

</div>

<div class="fly-footer">
<p>开门社区 2018 &copy; <a href="http://www.100txy.com/" target="_blank">100txy.com 出品</a></p>
<p><a href="JavaScript::void;" target="_blank">雷小天博客</a></p>
</div>

<script src="__PUBLIC__/mobile/js/jquery.js"></script>
<script src="__RES__/layui/layui.js"></script>
<script>

//监听提交
layui.use('form', function(){
var form = layui.form;
form.on('submit(reg)', function(data){
// layer.msg(JSON.stringify(data.field));//弹出json格式所有表单的值
var phone=data.field.phone;
var cardno=data.field.cardno;
if(phone.length!=11){
layer.msg('请输入有效的手机号码', {icon: 2});
return false;
}
var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
if(!myreg.test(phone)){
layer.msg('请输入有效的手机号码', {icon: 2});
return false;
}
if(cardno.length!=8){
layer.msg('请输入有效的卡片内码!', {icon: 2});
return false;
}
$.ajax({
type:"POST",
url:"index.php?m=Home&c=Device&a=ajax_reg",
data:"phone="+phone+"&cardno="+cardno,
dataType:"json",
success:function(data){
if(data.status=='yes'){
layer.msg('注册成功!', {icon: 1});
var url = "{:U('device/getinfo')}"; //成功跳转的url
setTimeout(window.location.href=url,2000);
}else{
layer.msg(data.msg, {icon: 2});
}
},
});
return false;
});
});

</script>

</body>
</html>
二.php代码如下:
 
//表单异步提交
public function ajax_reg(){
if(isset($_POST['phone'])&&isset($_POST['cardno'])){
$roomnostr = M("userinfo")->where(array('cardno'=>$_POST['cardno']))->getField('roomno');
if(!$roomnostr){
echo json_encode(array('status'=>'no','msg'=>'无效的卡片内码,请联系管理员!'));
exit();
}
$wechatinfo=$_SESSION['wechatinfo'];
if(!$wechatinfo){
echo json_encode(array('status'=>'no','msg'=>'页面已过期请重新扫码进入!'));
exit();
}

$result= M("weixin")->where(array('openid'=>$wechatinfo['openid']))->field('is_signup,area_id')->find();
$areaArr=explode('-',$result['area_id']);
// $result=M("weixin")->getFieldByOpenid($_POST['openid'],'is_signup');
if(isset($result)&&$result['is_signup']==1){//如果注册过一次下次只更新门区
$new_area=$roomnostr;
$reg=M("weixin")->where(array('openid'=>$wechatinfo['openid']))->save(array('area_id'=>$new_area));
echo json_encode(array('status'=>'no','type'=>'signuppass','msg'=>'你已注册为该门区的租户,请勿重复注册!'));
exit();
}else{
$data=array(
'is_signup'=>1,
'phone'=>$_POST['phone'],
'openid'=>$wechatinfo['openid'],
'nickname'=>$wechatinfo['nickname'],
'sex'=>$wechatinfo['sex'],
'headimgurl'=>$wechatinfo['headimgurl'],
'area_id'=>$roomnostr,
'regtime'=>time(),
'cardno'=>$_POST['cardno'],
);
$reg=M("weixin")->add($data);
if($reg){
echo json_encode(array('status'=>'yes','msg'=>'恭喜你,注册成功!'));
}
}

}
}

thinkcmf模板开发教程之<四>jquery动态往评论列表li中前添加和后追加

博客maomao 发表了文章 • 0 个评论 • 1453 次浏览 • 2018-09-19 22:10 • 来自相关话题

thinkcmf模板开发教程之<四>jquery动态往评论列表li中前添加和后追加:   一.前添加的jquery代码如下:   $(" <li class=\"commen ...查看全部
thinkcmf模板开发教程之<四>jquery动态往评论列表li中前添加和后追加:
 
一.前添加的jquery代码如下:
 
$(" <li class=\"comment-content\"><span class=\"comment-f\">#"+data.id+"</span><div class=\"comment-main\"><p><a class=\"address\" href=\"javascript:;\" rel=\"nofollow\" target=\"_blank\">"+data.user_nickname+"</a><span class=\"time\">("+data.add_time+")</span><br>"+data.content+"</p></div></li>").prependTo("#comment_list");
二.后追加的jquery的代码如下:
 
$("#comment_list").append(" <li class=\"comment-content\"><span class=\"comment-f\">#"+data.id+"</span><div class=\"comment-main\"><p><a class=\"address\" href=\"javascript:;\" rel=\"nofollow\" target=\"_blank\">"+data.user_nickname+"</a><span class=\"time\">("+data.add_time+")</span><br>"+data.content+"</p></div></li>");

三.给大写一个完整的jquery前添加,后追加的案例如下:
 
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./jquery-2.2.4.min.js">
</script>
<script type="text/javascript">
$(function(){
//获取按钮并设置点击事件
$("button").click(function(){
//获取输入框里面的值
var value = $("input[name = 'uname']").val();
//
switch ($(this).html()){
case "前添加":
//获取到ul并在其前面添加
//$("ul").prepend("<li>" + value +"</li>");
$("<li>" + value +"</li>").prependTo("ul");
break;
case "后追加":
$("ul").append("<li>" + value +"</li>");
//$("<li>" + value +"</li>").appendTo("ul");
break;
}

});
});
</script>
</head>

<body>
<h2>jquery 前追加和后追加</h2>
<ul>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
</ul>
名称:<input type="text" name="uname" />
<button>前添加</button>
<button>后追加</button>
</body>
</html>

jquery ajax清除缓存 解决缓存的5种方法

博客maomao 发表了文章 • 0 个评论 • 2384 次浏览 • 2018-05-29 08:35 • 来自相关话题

首先了解缓存的作用,缓存的主要作用是:如果是不需要修改的数据,可以避免每次请求都需要向服务器发送请求,从而减少服务器压力,提高运行速度 如果开启缓存的话,如果请求的地址和参数及参数值都相同,则返回缓存的值 根据上述描述,解决缓存最直接的 ...查看全部
首先了解缓存的作用,缓存的主要作用是:如果是不需要修改的数据,可以避免每次请求都需要向服务器发送请求,从而减少服务器压力,提高运行速度
如果开启缓存的话,如果请求的地址和参数及参数值都相同,则返回缓存的值
根据上述描述,解决缓存最直接的方法就是给请求的URL后面加上一个随机参数(***.action?random=Math.random()或者直接加一个时间参数),但该方法不适用于就项目改造,因为要在每个ajax请求的地方都加上随机参数,是一个巨大的工作量
在这种情况下,我们就有必要给jquery ajax设置一个全局的禁用缓存的设置
如下所示:
$(function(){
$.ajaxSetup({
cache:false;
});
});Ajax解决缓存的5种方法总结
1、在ajax发送请求前加上 anyAjaxObj.setRequestHeader(“If-Modified-Since”,”0″)。
2、在ajax发送请求前加上 anyAjaxObj.setRequestHeader(“Cache-Control”,”no-cache”)。
3、在URL后面加上一个随机数: “fresh=” + Math.random();。
4、在URL后面加上时间搓:”nowtime=” + new Date().getTime();。
5、如果是使用jQuery,直接这样就可以了$.ajaxSetup({cache:false})。这样页面的所有ajax都会执行这条语句就是不需要保存缓存记录。
 
精品原创源码下载

ecshop根据select jquery ajax改变异步请求改变动态数据

博客maomao 发表了文章 • 0 个评论 • 1375 次浏览 • 2018-05-28 09:50 • 来自相关话题

ecshop根据select jquery ajax改变异步请求改变动态数据的案例:   一.html代码如下:<select name="period" id="period" style ...查看全部
ecshop根据select jquery ajax改变异步请求改变动态数据的案例:
 
一.html代码如下:
<select name="period" id="period" style="width:209px;height: 26px;" onchange="change_rates();">
<option value="0">请选择...</option>
<option value="1">一个月</option>
<option value="3">三个月</option>
<option value="6">六个月</option>
<option value="12">一年</option>
<option value="24">两年</option>
<option value="36">三年</option>
</select>    年利率:<span id="rates">0%</span>
二.js代码如下:
<script type="text/javascript">
function change_rates()
{
var period=$("#period option:checked").val();
$.ajax({ //一个Ajax过程
type: "post", //以post方式与后台沟通
url : "user.php?act=get_rates", //与此php页面沟通
dataType:'json',//从php返回的值以 JSON方式 解释
data: 'period='+period, //发给php的数据有两项,分别是上面传来的u和p
success: function(json){//如果调用php成功
//alert(json.rates); //把php中的返回值(json.username)给 alert出来
$("#rates").html(json.rates+'%');
}
});
}
</script>
三.后端PHP代码
    $period = intval($_POST['period']);
echo json_encode(array('status'=>0,'rates'=>$period));exit;
//$period=12;
$sql = "select rates from " . $GLOBALS['ecs']->table('rates') . " where period='$period' ";
$rates = $db->getOne($sql);
if(empty($rates))
{
echo json_encode(array('status'=>0,'rates'=>0));
}
else
{
echo json_encode(array('status'=>1,'rates'=>$rates['rates']));
}
 
精品原创源码