AJAX的jQuery实现入门(二)

2016-02-19 16:58 2 1 收藏

下面是个AJAX的jQuery实现入门(二)教程,撑握了其技术要点,学起来就简单多了。赶紧跟着图老师小编一起来看看吧!

【 tulaoshi.com - Web开发 】

要写入数据库,我们知道的最简单的就是注册了, 就做个最简单的注册表单, 看看是如何提交数据的.

我们先写如下的html代码,三个文本框,一个按钮:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

p昵称:input type="text" name="username" id="sname" //p
p密码:input type="text" name="password" id="spwd" //p
p邮箱:input type="text" name="email" id="smail" //p
pbutton id="sub"提交/button/p

看到没, 我们不用表单, 甚至不用submit.

然后再看看jquery代码:

(document).ready(function(){
("#sub").click(function(){ //当点击提交按钮时触发
var usr = ("#sname").val(); //获取到三个文本框的值
var pas = ("#spwd").val();
var mail = ("#smail").val();
.ajax({
type:"POST", //用POST方法
url:"reg.asp", //向这个页面传值
data:"username="+usr+"&password="+pas+"&email="+mail, //传的数据是这样的
success:function(){
("#msg").show("slow"); //操作成功后显示一个提示
},
error:function(){
alert("出现问题, 请重试"); //出现问题时提示
}
})
})
})

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

关键在data这里, 假如我们在文本框里填了Robin,123456,rlog@live.com 那么data就成了: username=Robin&password=123456&email=rlog@live.com ,几乎刚开始学习网页制作的同学都知道这是干嘛用的. 他通过url把页面里的值传给后端程序去处理.那么后端怎么处理呢? 看看下面的asp代码reg.asp的内容, 还是让老狼帮我写的,唉真是猴子掰玉米.学多少忘多少.

%
dim conn
dim connstr
dim db
db="reg.mdb"
Set conn = Server.CreateObject("ADODB.Connection")
connstr="Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath(db)
conn.Open connstr
set rs=server.CreateObject("adodb.recordset")
sql="select * from reguser"
rs.open sql,conn,2,3
rs.addnew
rs("username")=request.Form("username")
rs("password")=request.Form("password")
rs("email")=request.Form("email")
rs.update
rs.close
set rs=nothing
response.Write("添加成功!")
conn.close
set conn=nothing
%

好了就这么多, 什么? 还有数据库! 老天我不是搞开发的,其实也很简单了. 一张表,三个字段username,password,email. over! 千万别把这个例子直接拿去就用喽, 连最基本的前端验证的没有, 密码还是明文.

这个恐怕已经简单到不能再简单了,如果你还是不能自己做成功, 看看我做好的例子吧. 下次我们把读写一起来玩.

来源:http://www.tulaoshi.com/n/20160219/1613733.html

延伸阅读
标签: Web开发
1 允许序列化嵌套的参数。 比如:{foo: ["bar", "baz"]} 将被序列化成foo[]=bar&foo[]=baz,而不是序列化成以前的foo=bar&foo=baz。 如果你想要使用旧的序列化方式,有三种设置方法:   代码如下: jQuery.ajaxSettings.traditional = true; jQuery.param( stuff, true ); $.ajax({ data: stuff, tr...
标签: Web开发
使用 jquery 框架:下载 jquery.js 新建一个 web 工程 ajax ; 在 webRoot 下新建一个 jslib 文件夹:专门存放 js 文件; 在 webRoot 下新建一个 html/jsp 页面: login.html 代码如下: script type = "text/javascript" src = "jslib/jquery.js"/ script script type = "text/javascript" src = "jslib/verify.js"/ script / head b...
标签: Web开发
一些简单的代码简化 下面是一个简单示例,它说明了 jQuery 对代码的影响。要执行一些真正简单和常见的任务,比方说为页面的某一区域中的每个链接附加一个单击(click)事件,您可以使用纯 JavaScript 代码和 DOM 脚本来实现,如 清单 1 所示。 清单 1 :没有使用 jQuery 的 DOM 脚本 代码如下: var external_links = document.getEle...
标签: Web开发
到了B/S开发时代,网页前端布局也把Tab页的布局形式吸收了过来。特别是和Ajax技术结合起来,可以更充分发挥Tab页的良好表现力和数据缓存的优势,是一种良好的网页布局形式。 网上的Tab页代码很多,实现也大同小异 ,但代码都显得凌乱,若要真的用的话,必须费劲的吃透它,才能进行二次定制开发,为我所用。实际上实现这个Tab页界面非常简单,仅...
标签: Web开发
以前的我,用惯了 UpdatePanel UpdateProgress 等控件,甚至到了滥用的程度,只是一味的追求无刷新,一边弄这 loading 图片 提示,这样貌似更美观,但是 感觉 更损失了性能, 而且有时候还破坏了网站的完整性。 但是学了Jquery之后,了解了 Jquery.ajax ,Jquery.get 等方法,从而学会了使用 webservice 和.ashx 文件,来与服务器交互。 这次...

经验教程

678

收藏

94
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部