ajax实现在线订阅在线询盘代码-优快云博客

前端代码：

<!doctype html>
<html><head>
<meta charset="utf-8">
<title>ajax实现在线订阅在线询盘代码</title>
<link rel="stylesheet" href="http://cdn.staticfile.net/bootstrap/5.3.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.21.0/jquery.validate.min.js"></script>
<script src="http://cdn.staticfile.net/bootstrap/5.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container m-5">
    <div class="row">
        <form id="subscribeFm" action="test12.php">
            <div class="col-md-6 mb-2"><input type="email" name="email" placeholder="email" class="form-control"></div>
            <input type="hidden" name="action" value="subscribe">
            <div class="col-md-6 mb-2"><input type="submit" value="提交订阅" id="subscribeFmSb"></div>
            <div class="col-md-6" id="subscribeFmMsg"></div>
        </form>
    </div>
</div>
<div class="container m-5">
    <div class="row">
        <form id="inquiryFm" action="test12.php">
            <div class="col-md-6 mb-2"><input type="text" name="subject" placeholder="subject" class="form-control"></div>
            <div class="col-md-6 mb-2"><input type="text" name="fullname" placeholder="fullname" class="form-control"></div>
            <div class="col-md-6 mb-2"><input type="email" name="email" placeholder="email" class="form-control"></div>
            <div class="col-md-6 mb-2"><input type="text" name="phone" placeholder="phone" class="form-control"></div>
            <div class="col-md-6 mb-2"><textarea name="message" placeholder="message" class="form-control"></textarea></div>
            <input type="hidden" name="action" value="inquiry">
            <div class="col-md-6 mb-2"><input type="submit" value="提交询盘" id="inquiryFmSb"></div>
            <div class="col-md-6" id="inquiryFmMsg"></div>
        </form>
    </div>
</div>
<script> 
$(function() {
    var subscribeFm = $('#subscribeFm');
    var subscribeFmMsg = $('#subscribeFmMsg');
    var inquiryFm = $('#inquiryFm');
    var inquiryFmMsg = $('#inquiryFmMsg');
    
    $(subscribeFm).submit(function(e) {
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: $(subscribeFm).attr('action'),
            data: $(subscribeFm).serialize()
        })
        .done(function(data, textStatus, xhr) {
            $(subscribeFmMsg).html(data);
            $(subscribeFm)[0].reset();
        })
        .fail(function(xhr, textStatus, errorThrown) {
            $(subscribeFmMsg).html('<p class="alert alert-danger">Request failed! error message：'+xhr.status+' '+errorThrown+'</p>');
        });
    });
    $(inquiryFm).submit(function(e) {
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: $(inquiryFm).attr('action'),
            data: $(inquiryFm).serialize()
        })
        .done(function(data, textStatus, xhr) {
            $(inquiryFmMsg).html(data);
            $(inquiryFm)[0].reset();
        })
        .fail(function(xhr, textStatus, errorThrown) {
            $(inquiryFmMsg).html('<p class="alert alert-danger">Request failed! error message：'+xhr.status+' '+errorThrown+'</p>');
        });
    });
});
</script>
</body>
</html>

数据处理页代码：

<?php
$msg = '';

if($_POST['action']=='subscribe'){
    $email = $_POST['email'];
    $msg = '<p class="alert alert-success">'.$email.' Subscribe successful!</p>';
    echo $msg;
}
else if($_POST['action']=='inquiry'){
    $subject = $_POST['subject'];
    $fullname = $_POST['fullname'];
    $email = $_POST['email'];
    $phone = $_POST['phone'];
    $message = $_POST['message'];
    $msg = '<p class="alert alert-success">'.$fullname.' Inquiry successful!</p>';
    echo $msg;
}
else {
    $msg = '<p class="alert alert-danger">System error occurred!</p>';
    echo $msg;
}
?>