为博客提供订阅功能

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

前端html5+js

<div class="container" style="margin-top:3em;margin-bottom:1em;">
    <div class="text-center" style="font-size:1.2em;margin-top:0.5em;margin-bottom:0.5em;">欢迎使用ExASIC订阅服务</div>
    <form>
    <div class="form-group">
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="输入电子邮箱">
        <small id="emailHelp" class="form-text text-muted">仅用于ExASIC最新文章通知，方便及时阅读。</small>
    </div>
    <div>
        <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="1" checked="checked">
        <label class="form-check-label" for="inlineRadio1">订阅</label>
        </div>
        <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="2">
        <label class="form-check-label" for="inlineRadio2">退订</label>
        </div>
    </div>      
    <button type="button" class="btn btn-primary" onclick="submit_email()">提交</button>
    </form>
</div>

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.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest();
        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

<?php
    $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。