以“为博客增加订阅功能”为例，来介绍用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。