AJAX的jQuery实现入门(二)

阅读上一篇：AJAX的jQuery实现入门(一)

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

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

<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>
<p><button id="sub">提交</button></p>

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

然后再看看jquery代码:

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("出现问题, 请重试"); //出现问题时提示
      }
    })
  })
})

关键在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! 千万别把这个例子直接拿去就用喽, 连最基本的前端验证的没有, 密码还是明文.

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

本地下载地址：jQuery_reg.rar （22.40 KB）