php+jQuery+ajax实例演示

徐行致远

于 2024-12-05 16:18:51 发布

阅读量212

点赞数 1

CC 4.0 BY-SA版权

文章标签： php jquery ajax

本文链接：https://blog.csdn.net/linyiphp/article/details/144269775

jQuery 专栏收录该内容

14 篇文章

订阅专栏

前端代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ajax form test5</title>
<style>
.error{color: red;}
</style>
</head>
<body>
<form action="ajax5.php" id="inquiryForm" method="post">
    <h3>在线询盘</h3>
    <input type="hidden" name="action" value="inquiry">
    <div>姓名：<input name="name" type="text" class="inputbox"></div>
    <div>邮箱：<input name="email" type="text" class="inputbox"></div>
    <div>留言：<input name="message" type="text" class="inputbox"></div>
    <div id="feedback1"><input type="submit" id="inquiryForm-submit" value="提交"></div>
</form>
<form action="ajax5.php" id="subscribeForm" method="post">
    <h3>在线订阅</h3>
    <input type="hidden" name="action" value="subscribe">
    <div>邮箱：<input name="email" type="text" class="inputbox"></div>
    <div id="feedback2"><input type="submit" id="subscribeForm-submit" value="提交"></div>
</form>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.staticfile.net/jquery-validate/1.20.0/jquery.validate.min.js"></script>
<script>
$(function(){
    //console.log('console.log');
    //console.error('console.error');
    
    $('#inquiryForm-submit').click(function(){
        $('#inquiryForm').validate({
            rules: {
                name: "required",
                email: "required",
                message: "required"
            },
            messages: {
                name: "Please enter your name",
                email: "Please enter your email",
                message: "Please enter your message"
            },
            submitHandler: function(form) {
                $.ajax({
                    type: "POST",
                    url: $(form).attr('action'),
                    data: $(form).serialize(),
                    success: function(response) {
                        $('#feedback1').after('<p id="backmsg" class="error">'+response+'</p>');
                        $('#backmsg').fadeOut(3000);
                        form.reset();
                    }
                });
            }
        });
    });
    
    $('#subscribeForm-submit').click(function(){
        $('#subscribeForm').validate({
            rules: {
                email: "required"
            },
            messages: {
                email: "Please enter your email"
            },
            submitHandler: function(form) {
                $.ajax({
                    type: "POST",
                    url: $(form).attr('action'),
                    data: $(form).serialize(),
                    success: function(response) {
                        $('#feedback2').after('<p id="backmsg" class="error">'+response+'</p>');
                        $('#backmsg').fadeOut(3000);
                        form.reset();
                    },
                    error: function(xhr, status, error) {
                        $('#feedback2').after('<p id="backmsg" class="error">'+error+'</p>');
                        $('#backmsg').fadeOut(3000);
                    }
                });
            }
        });
    });   
});
</script>
</body>
</html>

接收数据并反馈结果端代码：

<?php
$action = $_POST['action'];

if($action=='inquiry')
{
	$name = $_POST['name'];
	$email = $_POST['email'];
	$message = $_POST['message'];

	echo 'Submitted successfully!=='.$name.'=='.$email.'=='.$message;
}
else if($action=='subscribe')
{
	$email = $_POST['email'];

	echo 'Subscription successful!=='.$email;
}
else if($action=='test')
{
	$name = $_POST['name'];
	$email = $_POST['email'];

	echo 'Test successful!=='.$name.'=='.$email;
}

?>