ajax方式实现注册功能(提交数据到后台数据库完成交互)

所属分类: 网络编程 / AJAX相关 阅读数: 1946
收藏 0 赞 0 分享

一、当我们在验证表单的时候,为了阻止把错误的也发送到服务器,我们通常这样设置:

   $(function(){
    var isusername;(定一个变量)
    var ispwd;
     $('form').submit(function(e){
       if(!isusername || !ispwd){
         e.preventDefault();(阻止事件的默认事件)
      })
   });

1、在nodejs中我们可以用以下方法来(加载)跳转页面:
JQuery 中的load()  这是实行加载一个页面
 window.location()  这是在windows下跳转到一个指定的页面   

二、 node.js中MongoDB的安装步骤及相关操作:
1.下载安装程序。(windowXP只能使用2.2以前的版本,window7以上系统可以使用最新版本)下载地址:http://www.mongodb.org/downloads
2.开始安装MongoDB。如果是XP系统可以直接将安装目录拷贝到指定的目录下。如果win7系统则运行安装程序,可以自己选择安装路径。(注意安装路径不要出现中文)安装好的MONgoDB默认在C:\Program Files\MongoDB\Server\3.2\bin
3.在安装的同一目录下创建一个目录data,然后在data目录中创建db目录和log目录。
4.在命令行里输入 cd C:\Program Files\MongoDB\Server\3.2\bin回车,再输入mongo。进行mongo.exe操作界面。
5.开始运行MongoDB。可以通过以下命令将MongoDB的程序安装到windows的服务中。
最后打开命令行,切换到MongoDB的bin目录下。运行:
mongod.exe --dbpath "c:\data\db" --logpath "c:\data\log\mongodb.log" --install
6.在mongo.exe中我们可以完成增、删、改、查:下面依次介绍
在这之前我们可以用show dbs来查看当前mongo中的所有数据库,如果没有就用use f30(先找有没有F30,如果没有就自动创建一个名为f30的数据库)
1>增加:db.users.insert({maen:'dd',age:20})
增加后,可能用db.users.find()来看是否增加成功
2>删除:db.users.remove({maen:'dd'}) 或 db.users.remove({})  (这是删除users里面的所有数据)
3>修改:db.users.update({maen:'dd'},{age:22})   把名字dd的年龄修改为22
4>查找:db.users.find({age:{$gt:20})  查找大于20的数据  

三、我们可以通过BUTTON来提交数据 ,并跳转到登录界面,代码如下 :

 $("input[type=button]").click(function(e){
 if(!isUsernameValid || !isPwdValid){ //用if语句来判断当用户名或者密码有一个为false时就弹出一个消息框,并提示:请输入正确的信息。
           alert('请输入正确的信息');
           return;  //结束
         }
         $.ajax({       //用ajax来实现不刷新网页的基础上更新数据
           type:"post", //请求方式
           url:"/users/reg", //路径
           data:{
             username:$("input[name=username]").val(),  //获取input中name为username的值
             pwd:$("input[name=pwd]").val() //获取input中name为pwd的值
           },
           success:function(){
             alert("注册成功");
             window.location = "login.html"; //注册成功就跳转到login.html
           }
         });
         
       })

 以上代码就是用ajax的方式来实现注册功能。

更多精彩内容其他人还在看

AJAX 客户端响应速度提高分析

AJAX的出现极大的改变了Web应用客户端的操作模式,它使的用户可以在全心工作时不必频繁的忍受那令人厌恶的页面刷新。
收藏 0 赞 0 分享

揭开AJAX神秘的面纱(AJAX个人学习笔记)第1/5页

写这个学习笔记,只是记载一下自己的学习经过和体会,把一些学习重点记录下来,以备今后的巩固复习及应用,很多知识点没有详细介绍,所以并不完全适用于初学者,如果你是初学者,最好选择一本AJAX学习的书籍,然后与这篇学习笔记对照学习,效果会更好。
收藏 0 赞 0 分享

Ajax Control Toolkit 34个服务器端控件第1/2页

Ajax Control Toolkit 34个服务器端控件,想要学习ajax的朋友可以参考下。
收藏 0 赞 0 分享

Ajax 核心框架函数及例子

最近学习js,肯定会学到ajax中的东西,所以,看到比较好的ajax函数,免不得要贴出来,供大家参考。这个函数摘录自john resig的书中。
收藏 0 赞 0 分享

AJAX 进度条实现代码

AJAX 进度条实现代码,基于java后来,大家可以学习下。
收藏 0 赞 0 分享

一款经典的ajax登录页面 后台asp.net

众所周知,用服务器控件做页面的登录窗体时很简单的,但是页面的多次回传让我们感觉到头痛,一直刷新页面的感觉非常之不好,其实用ajax的局部刷新功能可以完全解决这个问题,制作出来的页面有很好的交互性,而且是局部刷新,节省网络资源。
收藏 0 赞 0 分享

ajax 调用后台方法大家可以讨论下

我曾使用过的三种调用后台的代码,需要的朋友可以参考下,如果发现更好的可以留言。
收藏 0 赞 0 分享

5款Ajax 文件上传控件

如果你的网站含有文件上传功能,那可以使用本文介绍的5款Ajax文件上传控件,提升用户体验。要知道,上传文件总是个痛苦的过程,要消除不太现实,但至少如果你为减少用户的痛苦努力了,那用户也会喜欢你的网站的。
收藏 0 赞 0 分享

AJAX集天气\IP\多国语言翻译MP3(可同步LRC歌词显示)\万年历查询通

AJAX集天气\IP\多国语言翻译MP3(可同步LRC歌词显示)\万年历查询通
收藏 0 赞 0 分享

AJAX 缓存问题的两种解决方法(IE)

ajax 清除缓存的两种方法
收藏 0 赞 0 分享
查看更多