原标题:为博客提供订阅功能
以“为博客增加订阅功能”为例,来介绍用ajax提交表单的方法。
前端html5+js
仅用于ExASIC最新文章通知,方便及时阅读。
订阅
退订
提交
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。
责任编辑: