一、新建一个html页面,如注册页面"Register.htm"
<!DOCTYPE html>
<html >
<head>
<title>用户注册</title>
<meta charset="utf-8" />
<style type="text/css">
.msg
{
color:Red;
}
</style>
</head>
<body>
<!--
因为是ajax提交,html表单控件可以不必放在form里,且不能使用提交按纽(type="submit"),而使用普通按纽(type="button")
-->
用户名:<input type="text" name="id" id="id" /><span id="idMsg" class="msg"></span><br /> <!-- span用来显示错误信息 -->
密 码:<input type="password" name="pwd" id="pwd" /><span id="pwdMsg" class="msg"></span><br />
姓 名:<input type="text" name="name" id="xm" /><span id="nameMsg" class="msg"></span><br />
<input id="btnReg" type="button" value="注册" />
<script type="text/javascript" src="bootstrap/js/jquery.js">
</script>
<script src="reg.js" type="text/javascript"></script>
</body>
</html>
二、新建一js文件,如:reg.js
$(function() {
//定义清除错误信息的函数
function clearMsg() {
$(".msg").html("");
}
//定义获取表单数据的函数,注意返回json对象
function formData() {
return {
id: $("#id").val(),
pwd: $("#pwd").val(),
name: $("#xm").val()
};
}
//定义注册功能的函数
function reg() {
var url = "Register.ashx";
var data = formData();
clearMsg();
$.ajax({
type: 'GET', //自动会把json对象转换为查询字符串附在url后面如:http://localhost:49521/Register.ashx?id=a&pwd=b&name=c
url: url,
dataType: 'json', //要求服务器返回一个json类型的数据,如:{"success":true,"message":"注册成功"}
contentType: 'application/json',//发送信息给服务器时,内容编码的类型
data: data, //提交给服务器的数据,直接使用json对象的数据,如:{"id":"a","pwd":"b","na