利用ajax的方式来提交数据到后台数据库及交互功能
怎么样用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的方式来实现注册功能。个人名言:每天进步一点点,相信成功是属于有准备的人!!!
利用ajax的方式来提交数据到后台数据库及交互功能的更多相关文章
- 2016 系统设计第一期 (档案一)jQuery ajax serialize()方法form提交数据
jQuery ajax serialize()方法form提交数据,有个很奇怪的问题,好像不能取到隐藏控件的值. //点击提交按钮保存数据 $('#btn_submitUser').click(fun ...
- FIREDAC(DELPHI10 or 10.1)提交数据给ORACLE数据库的一个不是BUG的BUG
发现FIREDAC(DELPHI10 or 10.1)提交数据给ORACLE数据库的一个不是BUG的BUG,提交的表名大小写是敏感的. 只要有一个表名字母的大小写不匹配,ORACLE就会认为是一个不认 ...
- $.ajax 提交数据到后台.
//AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML -- (Extensible Markup Language 可扩展标记语言 ...
- 利用Ajax和JSON实现关于查找省市名称的二级联动功能
功能实现的思路:我们经常碰见网上购物时候填写收件地址会用到这个查找省市县的三级联动查找功能,我们可以利用Ajax和JSON技术模拟这个功能,说白了同样是使用Ajax的局部数据更新功能这个特性.因为省市 ...
- ODP方式,大批量数据写入ORACLE数据库
项目中在同步数据的时候,需要把获得的数据DataTable,写入oracle数据库 因为System.Data.OracleClient写入方式写入大批量数据特别慢,改用Oracle.DataAcce ...
- ORACLE用户管理方式下备份数据和复制数据库
首先要明确的是,oracle数据库的备份可以分为逻辑备份和物理备份. 逻辑备份的是通过数据导出对数据进行备份,主要方式有老式的IMP/EXP和数据泵灯方式.适合变化较少的数据库,而 ...
- form表单提交数据给后台
1.完整登录示例 1. form表单往后端提交数据注意三点 1.所有获取用户输入标签都应该放在form表单里面 2.action属性控制往哪儿提交,method一般都是设置成post 3.提交按钮必须 ...
- Ajax.BeginForm的异步提交数据 简介
Html.BeginForm与Ajax.BeginForm都是MVC架构中的表单元素,它们从字面上可以看到区别,即Html.BeginForm是普通的表单提交,而Ajax.BeginForm是支持异步 ...
- 登录(ajax提交数据和后台校验)
1.前台ajax数据提交 <form id="login_form" action="" method="POST"> < ...
随机推荐
- appium V1.5.x变化
使用 npm安装 appium之后,会发现已经进入1.5 [Appium] Welcome to Appium v1.5.0 [Appium] Appium REST http interface l ...
- c#反射机制
一:反射的定义 审查元数据并收集关于它的类型信息的能力.元数据(编译以后的最基本数据单元)就是一大堆的表,当编译程序集或者模块时,编译器会创建一个类定义表,一个字段定义表,和一个方法定义表等. Sys ...
- mysqlDBA(1-3年)
1.熟悉Aliyun操作系统的管理.配置和系统调优: 2.熟悉mysql管理 3.熟悉mysql主从复制,主主复制 4.熟悉数据库的备份策略,监控策略,性能测量策略 5.熟悉linux/unix操作系 ...
- WPF如何控制每个窗体确保只打开一次
在主窗体上点击菜单时,如果做到每个窗体不会被重复打开,如果打开了,可以将其重新获得焦点. 首先在主窗体中将菜单关联的窗体实例化. 第二步:将每个菜单对应窗体的closing事件重写.之所以要重写clo ...
- tushare
tushare TuShare是一个免费.开源的python财经数据接口包.主要实现对股票等金融数据从数据采集.清洗加工 到 数据存储的过程,能够为金融分析人员提供快速.整洁.和多样的便于分析的数据, ...
- CoreData __ 基本原理
操作过程 Context想要获取值,先要告诉连接器,我要什么东西 链接器再告诉store, 你给我什么东西, store去找 找到之后返回给链接器,链接器再返回给Context Co ...
- (3)WebApi客户端调用
1.创建一个应用台控制程序,可以把Model的引用,用下面的方法拖拽上来(解决方案里没有这个文件,只是这个文件的引用) 2.Program.cs using System; using System ...
- .NET 需要处理的高性能WEB架构 - .NET架构
1.如果不想被微软包围(其实微软的一套并不贵,是被谣言传高了),数据层依然可以选择SQL Server数据库和存储过程. 2.缓存不再依赖.net自身提供的缓存机制,迁移到部署在Linux平台上的分布 ...
- 关于P,V操作理解的突破,关于并发设计与并行
今天又找了一篇博客研究P,V操作.. 发现..它有一个变量没有声明.. 我就换了篇博客..http://c.biancheng.net/cpp/html/2600.html 然后就看懂了.. 关键突破 ...
- Qtablevies获取内容
首先是向tableview中添加内容 model=new QStandardItemModel(); model->setHorizontalHeaderItem(, new QStandard ...