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

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

   $(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的方式来实现注册功能。

赞 (0)

相关推荐

  • Vue2学习笔记之请求数据交互vue-resource

    基本语法 必须引入一个库:vue-resource github地址 // 基于全局Vue对象使用http Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback); Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback); // 在一个Vue实例内使用$http this.$http.get('/so

  • 微信小程序 数据交互与渲染实例详解

    微信小程序 数据交互与渲染实例详解

    微信小程序 数据交互与渲染 实现效果图: 微信小程序的api中提供了网络交互的api,我们只要调用即可和后端进行数据交互,该api为wx.request.,具体代码如下. //list.js //获取应用实例 var app = getApp() Page({ data: { list:[], hiddenLoading: true, url: '' }, loadList: function () { var that = this; that.setData({ hiddenLoading:

  • get post jsonp三种数据交互形式实例详解

    一.get请求 1.引入 vue.js 和 vue-resource.js , 准备一个按钮 <input type="button" value="按钮" @click="get()"/> //点击按钮请求数据函数get() 2.准备一个txt文件 welcome vue 3.编写js代码 <script> window.onload=function(){ new Vue({ el:'body', //主体为body,

  • Android Activity 与Service进行数据交互详解

    Android Activity 与Service进行数据交互详解

    ①从设计的角度来讲: Android的Activity的设计与Web页面非常类似,从页面的跳转通过连接,以及从页面的定位通过URL,从每个页面的独立封装等方面都可以看出来,它主要负责与用户进行交互. Service则是在后台运行,默默地为用户提供功能,进行调度和统筹.如果一棵树的地上部分是Activity的话,它庞大的根须就是Service.Android的服务组件没有运行在独立的进程或线程中,它和其他的组件一样也在应用的主线程中运行,如果服务组件执行比较耗时的操作就会导致主线程阻塞或者假死,从

  • SpringMVC前端和后端数据交互总结

    SpringMVC前端和后端数据交互总结

    本文主要介绍了SpringMVC前端和后端数据交互的资料,特地发出来记录一下.有需要的朋友可以了解一下. 控制器 作为控制器,大体的作用是作为V端的数据接收并且交给M层去处理,然后负责管理V的跳转.SpringMVC的作用不外乎就是如此,主要分为:接收表单或者请求的值,定义过滤器,跳转页面:其实就是servlet的替代品. 传值方式 springmvc最方便的一点就是可以通过注释方式来定义它的url. @Controller public class formMVC { @RequestMapp

  • 详解vue与后端数据交互(ajax)：vue-resource

    详解vue与后端数据交互(ajax)：vue-resource

    本人对vue与后端数据交互不是很懂,搜索了很多关于vue与后端数据交互介绍,下面我来记录一下,有需要了解的朋友可参考.希望此文章对各位有所帮助. 必须引入一个库:vue-resource 1.获取普通文本数据 比如:a.txt: welcomet to vue!!! <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <sc

  • 详解vue-Resource（与后端数据交互）

    单来说,vue-resource就像jQuery里的$.ajax,用来和后端交互数据的.可以放在created或者ready里面运行来获取或者更新数据... vue-resource文档:https://github.com/vuejs/vue-resource/blob/master/docs/http.md 结合vue-router data(){ return{ toplist:[], alllist:[] } }, //vue-router route:{ data({to}){ //并

  • SpringMVC实现前端后台交互传递数据

    本人对springmvc前端交互不太懂,搜索了很多关于springmvc前端交互介绍,下面我来记录一下,有需要了解的朋友可参考.希望此文章对各位有所帮助. Controller.java代码: @Controller public class DataController { //一.接收和通过ModelMap传出参数,不需要视图解析器,测试时加了解析器,顾返回值不需后缀 //普通参数 @RequestMapping("/data1") public String data1(@Req

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

    一.当我们在验证表单的时候,为了阻止把错误的也发送到服务器,我们通常这样设置: $(function(){ var isusername;(定一个变量) var ispwd; $('form').submit(function(e){ if(!isusername || !ispwd){ e.preventDefault();(阻止事件的默认事件) }) }); 1.在nodejs中我们可以用以下方法来(加载)跳转页面: JQuery 中的load()  这是实行加载一个页面  window.l

  • ajax 提交数据到后台jsp页面及页面跳转问题

    ajax 提交数据到后台jsp页面及页面跳转问题 我logincheck.jsp页面取传参数代码: String user=request.getParameter("user1"); String pwd=request.getParameter("pwd1"); login.jsp input 取2参数何用ajax 传给logincheck.jsp $.ajax({ type : "POST", url : baseUrl+"m/m

  • ajax提交数据到后台php接收(实现方法)

    在网上看了很久,发现数据的利用ajax提交数据到后台其实很简单,但是很多讲解的并不清楚,对于初学者来说,很多真的是看着有点糊涂,拿来直接用,又想去了解怎么回事,其实利用ajax提交数据到后台是非常的简单的. $.ajax({ type: "POST", url: "register.php", data: "name=John&location=Boston", success: function(msg){ alert( "D

  • PHP如何通过AJAX方式实现登录功能

    PHP如何通过AJAX方式实现登录功能

    本文实例讲述了Ajax+PHP+MySQL登陆示例.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 1 login.php 登录界面中,javascript脚本用ajax方式异步请求dologin.php,dologin.php负责用户信息验证(包括验证码,php生成验证码可以自行搜索).登录界面的代码如下: <?php session_start();?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran

  • 解决angular的$http.post()提交数据时后台接收不到参数值问题的方法

    解决angular的$http.post()提交数据时后台接收不到参数值问题的方法

    写此文的背景:在学习使用angular的$http.post()提交数据时,后台接收不到参数值,于是查阅了相关资料,寻找解决办法. 写此文的目的:通过上面提到的文章中的解决之道,结合自己的经验,总结了如下发现. 前端:html,jquery,angular 后端:java,springmvc 一.平常使用的post提交和接收方式 前端使用jquery提交数据. $.ajax({ url:'/carlt/loginForm', method: 'POST', data:{"name":&

  • Ajax技术(WEB无刷新提交数据)-

    Ajax内部交流文档一.使用Ajax的主要原因 1.通过适当的Ajax应用达到更好的用户体验: 2.把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的. 二.引用 Ajax这个概念的最早提出者Jesse James Garrett认为: Ajax是Asynchronous JavaScript and XML的缩写. Ajax并不是一门新的语言或技术,它实际上是几项技术按一定的方式组合在一在同共的协作中发

  • PHP登录（ajax提交数据和后台校验）实例分享

    PHP登录（ajax提交数据和后台校验）实例分享

    1.前台ajax数据提交 <form id="login_form" action="" method="POST"> <div class="login_frame" style="position:relative";> <div class="login_gl" style="margin-top:35px;"> <sp

  • jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例

    jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例

    昨天和朋友做一个后台管理系统项目的时候涉及到复选框批量操作,如果用submit表单提交挺方便的,但是要实现用jQuery结合Ajax异步提交数据就有点麻烦了,因为我之前做过的项目中基本上没用Ajax来批量提交复选框数据,今天用到了就分享一下. 由于我做的项目一些地方比较复杂,这里我只举一个小例子,能理解就好. 首先,我做了一个简单的多个复选框的界面,如图: 这是一个比较简单的多个复选框提交界面.代码如下: <body> <div> <input type="chec

  • 详解Android提交数据到服务器的两种方式四种方法

    Android应用开发中,会经常要提交数据到服务器和从服务器得到数据,本文主要是给出了利用http协议采用HttpClient方式向服务器提交数据的方法. 代码比较简单,这里不去过多的阐述,直接看代码. /** * @author Dylan * 本类封装了Android中向web服务器提交数据的两种方式四种方法 */ public class SubmitDataByHttpClientAndOrdinaryWay { /** * 使用get请求以普通方式提交数据 * @param map 传

  • ajax提交到java后台之后处理数据的实现

    环境:eclipse+struts 要实现的效果:点击按钮提交数据到后台之后回到前台显示出来数据 index.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN&quo

随机推荐