原标题：为博客提供订阅功能

以“为博客增加订阅功能”为例，来介绍用ajax提交表单的方法。

前端html5+js

button的类型是button，而不是submit，这样我们就可以调用自定义js函数submit_email()向后台提交email。

function submit_email(){

var email = document.getElementById("exampleInputEmail1").value;

var type_r1 = document.getElementById("inlineRadio1");

var type_r2 = document.getElementById("inlineRadio2");

var type;

if(type_r1.checked){

type = type_r1.value;

}else{

type = type_r2.value;

}

//check email rule

if(email.length > 150){

alert("请输入正确的邮箱格式");

return;

}

pat = /^[a-zA-Z0-9._\-]{3,100}@[a-zA-Z0-9._\-]+\.(com|cn|net|top|fun|org|tech|ren|dev|jp|us|au)$/;

if(pat.test(email) == false){

alert("请输入正确的邮箱格式");

return;

}

//ajax: ie7+, firefox, chrome, opera, safari (not support ie5, ie6)

var xmlhttp;

if(window.){

xmlhttp = new ();

xmlhttp.onreadystatechange = function(){

if(xmlhttp.readyState==4 && xmlhttp.status==200){

alert(xmlhttp.responseText); //display success or failure

}

}

xmlhttp.open("POST", "subscribe.php", true);

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

var arg = "email=" + email + "&type=" + type;

xmlhttp.send(arg);

} //end of if(window...

}

在submit_email()函数开头，先用getElementById().value获取用户的email和type。再用js正则来检查email是否符合电子邮箱的命名规则。然后用ajax方式向后台提交POST请求，把email和type发送给php服务器。最后按照php服务器的回复xmlhttp.responseText来显示订阅的结果。

效果如下：

后端php+mysql

$email = $_POST['email'];

$type = $_POST['type'];

//

//connect to database

//

$mysql_svr_name = "mysql_server";

$mysql_db_name = "db_name";

$mysql_db_user = "user";

$mysql_db_pwd = "pwd";

$conn = mysql_connect($mysql_svr_name, $mysql_db_user, $mysql_db_pwd);

if(!$conn){ die(mysql_error()); }

mysql_select_db($mysql_db_name, $conn);

mysql_query('set names utf8');

//query

$sql = "SELECT count(*) as total FROM `email` WHERE `email` = '" . $email . "' LIMIT 1";

$res_tmp = mysql_query($sql, $conn);

$res_row = mysql_fetch_array($res_tmp);

$count = $res_row['total'];

if($count == 0 && $type == 2){

echo "您要退订电子邮箱不存在";

}else if($count == 1 && $type == 1){

echo "您已经成功订阅ExASIC";

}else if($count == 0 && $type == 1){ //add

$sql = "INSERT INTO `email` (`email`) VALUES ('";

$sql .= $email;

$sql .= "')";

$res_tmp = mysql_query($sql, $conn);

if(mysql_affected_rows() == 1){

echo "恭喜，您已成功订阅ExASIC";

}else{

echo "内部错误，请稍后再试";

}

}else if($count == 1 && $type == 2){ //delete

$sql = "DELETE FROM `email` WHERE `email` = '" . $email . "'";

$res_tmp = mysql_query($sql, $conn);

if(mysql_affected_rows() == 1){

echo "您已成功退订ExASIC";

}else{

echo "内部错误，请稍后再试";

}

}else{

echo "内部错误，请稍后再试";

}

?>

先从$_POST[""]中用获得email和type，再查询数据库中是否已经存在记录。再根据实际情况进行增删操作。最后echo "msg"，返回给前端。

总结

本文介绍了ajax的使用方法，并详细介绍了为博客增加订阅功能的实现过程。下面画出了代码的示意图，方便理解ajax。

责任编辑：