AJAX注册页面异步请求的方法实现

这次给大家带来AJAX注册页面异步请求的方法实现,AJAX注册页面异步请求方法实现的注意事项有哪些,下面就是实战案例,一起来看一下。

AJAX简介

(1)AJAX = 异步 JavaScript 和 XML。

(2)AJAX 是一种用于创建快速动态网页的技术。

(3)通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

(4)传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。

 简单布局

AJAX注册页面异步请求的方法实现

JS先判断,把前端可以的判断做,减少服务器的交互

$('button').on('click',function(){;      var booluser = $('#data input')[0].value.length >= 8;      var   boolpwd = $('#data input')[1].value.length >= 6 ;      var boolpwd1 = $('#data input')[1].value == $('#data input')[2].value ;      var retel =/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])d{8}$/g;       var booltel = retel.test($('#data input')[3].value);      var reemail = /^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$/g ;      var boolemail = reemail.test($('#data input')[4].value);      //这里应该嵌套使if的,但是不是实际开发,这么写便于代码观看      if(!booluser){        console.log('user:不能少于8位');      }      if(!boolpwd){        console.log('pwd:不能少于6位');      }      if(!boolpwd1){        console.log('pwd1:两次输入密码不一致');      }      if(!booltel){        console.log('tel:请输入正确的电话号');      }      if(!boolemail){        console.log('email:请输入正确的邮箱格式');      }

登录后复制

利用ajax做异步请求

if(booluser && boolpwd && boolpwd1 && booltel && boolemail){                $.ajax({          type:"get",                   url:"reg.php",          async:true,          data:{            user:$('#data input')[0].value,            pwd:$('#data input')[1].value,            tel:$('#data input')[3].value,            email:$('#data input')[4].value          },          success : function(data){            console.log(data);          }        });      }      })

登录后复制

在php中接受网络请求传过来的数据,查看数据库做出判断,把结果反馈给前段

exec('set names utf8');  //链接数据库,创建表  $result = $db->exec('create table if not exists ajaxreg(user varchar(100)      primary key,pwd varchar(100),tel varchar(30),email varchar(30))      default charset=utf8');  $resulttel = $db->query("select tel from ajaxreg ");  $resulttel->setFetchMode(PDO::FETCH_ASSOC);  $arr = $resulttel->fetchAll();   foreach($arr as $ar){    if( $ar['tel'] == $tel){      $msg = "您输入的手机号已经存在";     echo $msg;    //如果手机号已存在,终止整个程序    die();    }  }     //如果手机号不存在执行下面代码     $result = $db->exec("insert into ajaxreg values(     '$user','$pwd','$tel','$email')");     if($result){      $msg = "注册成功";     }else{     $msg = "用户名已存在";     }  echo $msg; $db->close();?>

登录后复制

这样一个简单的注册界面就用AJAX实现了

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

ajax实现注册用户名全套流程

Ajax的循环如何实现

以上就是AJAX注册页面异步请求的方法实现的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2775754.html

(0)
上一篇 2025年3月8日 14:32:21
下一篇 2025年3月8日 14:32:36

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • ajax的多次请求如何实现

    这次给大家带来ajax的多次请求如何实现,实现ajax多次请求的注意事项有哪些,下面就是实战案例,一起来看一下。 我们在用ajax请求数据时,可能会遇到一次点击多次触发的可能。 (比如说:ajax 的 onreadystatechange …

    编程技术 2025年3月8日
    200
  • ajax不刷新的情况下验证注册信息

    这次给大家带来ajax不刷新的情况下验证注册信息,ajax不刷新的情况下验证注册信息注意事项有哪些,下面就是实战案例,一起来看一下。 ajax无刷新验证注册信息示例,其大概思路如下: 一.把注册的html页面做好(html+css) 1.不…

    2025年3月8日 编程技术
    200
  • Ajax请求WebService跨域的实现方法(附代码)

    这次给大家带来Ajax请求WebService跨域的实现方法(附代码),Ajax请求WebService跨域的注意事项有哪些,下面就是实战案例,一起来看一下。 1、背景   用Jquery中Ajax方式在asp.net开发环境中WebSer…

    2025年3月8日 编程技术
    200
  • ajax怎么处理服务器返回的数据类型

    这次给大家带来ajax怎么处理服务器返回的数据类型,ajax处理服务器返回数据类型的注意事项有哪些,下面就是实战案例,一起来看一下。 其原理很简单,结构上基本不变,只是改变处理返回数据的方式. 1.Text/HTML格式 这种返回类型处理很…

    编程技术 2025年3月8日
    200
  • ajax获取页面的返回参数并且给控件赋值

    这次给大家带来ajax获取页面的返回参数并且给控件赋值,ajax获取页面返回参数并且给控件赋值的注意事项有哪些,下面就是实战案例,一起来看一下。 js页面 $.ajax({type : “get”,url : “”, //跳转页面data …

    编程技术 2025年3月8日
    200
  • Ajax向后台传输json格式数据出现错误应如何处理

    这次给大家带来Ajax向后台传输json格式数据出现错误应如何处理,处理Ajax向后台传输json格式数据出现错误的注意事项有哪些,下面就是实战案例,一起来看一下。 问题描述:   ajax往后台传json格式数据报415错误,如下图所示 …

    2025年3月8日
    200
  • ajax怎样提交form表单与实现文件上传

    这次给大家带来ajax怎样提交form表单与实现文件上传,ajax提交form表单与实现文件上传的注意事项有哪些,下面就是实战案例,一起来看一下。 前几天,发现了一些小问题。我在写后台管理页面时,需要上传一张图片。于是我就用很普通的Form…

    编程技术 2025年3月8日
    200
  • ajax怎样实现跨页面提交表单

    这次给大家带来ajax怎样实现跨页面提交表单,ajax实现跨页面提交表单的注意事项有哪些,下面就是实战案例,一起来看一下。 前面提到过重复提交表单问题,处理token口令校验、重定向之外,还有一种经常使用到的方法就是新页面处理表单提交,完成…

    2025年3月8日
    200
  • ajax结合豆瓣搜索进行分页如何实现(附代码)

    这次给大家带来ajax结合豆瓣搜索进行分页如何实现(附代码),ajax结合豆瓣搜索进行分页实现的注意事项有哪些,下面就是实战案例,一起来看一下。 使用豆瓣api,得到分页结果。相当于从后台数据库获得的结果一样。所不同的是,没法事先知道页数。…

    编程技术 2025年3月8日
    200
  • Ajax做出带验证码的局部刷新登录功能

    这次给大家带来Ajax做出带验证码的局部刷新登录功能,Ajax做出带验证码局部刷新登录的注意事项有哪些,下面就是实战案例,一起来看一下。 现在的登录界面大多数都带有:验证码的功能+验证码局部刷新+ajax登录。用ajax登录的好处最明显就是…

    2025年3月8日
    200

发表回复

登录后才能评论