html提交信息到数据库,点击链接的php文件，怎么不跳转到PHP文件 而是直接在提交页面显示
问题描述：
问题
点击提交，直接跳转到 write.php 页面去执行了，要怎么才可以就在提交页面不跳转到write.php，执行PHP
提交页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="/css/style.css" rel="stylesheet">
<script src="/jQuey/jquery-3.6.0.min.js"></script>
</head>
<body>
<!-- ======= 联系 开始 ======= -->
<section id="contact" class="contact">
<div class="col-lg-7 mt-5 mt-lg-0 d-flex align-items-stretch">
<form action="write.php" method="post" role="form">
<div class="row">
<div class="form-group col-md-6">
<label for="name">您的姓名</label>
<input type="text" name="name" class="form-control" id="name" required>
</div>
<div class="form-group col-md-6">
<label for="name">您的邮箱</label>
<input type="email" class="form-control" name="email" id="email" required>
</div>
</div>
<div class="form-group">
<label for="name">您的主题</label>
<input type="text" class="form-control" name="subject" id="subject" required>
</div>
<div class="form-group">
<label for="name">您的内容</label>
<textarea class="form-control" name="message" id="message" rows="10" required></textarea>
</div>
<div id="img1"><div class="sent-message" >您的信息已提交，非常感谢。</div></div>
<div id="img2"><div class="error-message" >您的信息未填写，重新填写。</div></div>
<div class="text-center"><button type="submit" id="btn1">提交信息</button></div>
<script>
$(document).ready(function () {
$("#img1").hide();
$("#img2").hide();
$("#btn1").click(function () {
if ($("#name").val() == ""){
$("#img2").show();
$("#img1").hide();
}else{
if ($("#email").val() == ""){
$("#img2").show();
$("#img1").hide();
}else{
if ($("#subject").val() == ""){
$("#img2").show();
}else{
if ($("#message").val() == ""){
$("#img2").show();
$("#img1").hide();
}else{
$("#img1").show();
$("#img2").hide();
}
}
}
}
});
});
</script>
</form>
</div>
</div>
</div>
</section>
<script src="assets/js/main.js"></script>
</body>
</html>
write.php
<?php
$ne=$_POST['name'];//姓名
$em=$_POST['email'];//邮箱
$sje=$_POST['subject'];//主题
$me=$_POST['message'];//信息
$link = mysqli_connect(
'localhost', /* The host to connect to 连接MySQL地址 */
'user', /* The user to connect as 连接MySQL用户名 */
'admin123', /* The password to use 连接MySQL密码 */
'user'); /* The default database to query 连接数据库名称*/
if (!$link) {
printf("Can't connect to MySQL Server. Errorcode: %s ", mysqli_connect_error());
exit;
} else {
echo ('数据库已连接！')."<br/>"; /* Close the connection 关闭连接*/
}
$sql="INSERT INTO person (name,email,subject,message) VALUES ('$ne','$em','$sje','$me')";
if($result = $link->query($sql)){
echo "提交成功";
}else{
echo "提交失败";}
mysqli_query($link,'set names utf8'); //解决中文乱码的问题
/* Close the connection 关闭连接*/
mysqli_close($link);
?>
我想要达到的结果
在提交页面不跳转到write.php 执行PHP。
答
最简单的，提交到隐藏的iframe中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="/css/style.css" rel="stylesheet">
<script src="/jQuey/jquery-3.6.0.min.js"></script>
</head>
<body>
<!-- ======= 联系 开始 ======= -->
<section id="contact" class="contact">
<div class="col-lg-7 mt-5 mt-lg-0 d-flex align-items-stretch">
<iframe name="ajaxifr" style="display:none"></iframe>
<form action="write.php" method="post" role="form" target="ajaxifr">
<div class="row">
<div class="form-group col-md-6">
<label for="name">您的姓名</label>
<input type="text" name="name" class="form-control" id="name" required>
</div>
<div class="form-group col-md-6">
<label for="name">您的邮箱</label>
<input type="email" class="form-control" name="email" id="email" required>
</div>
</div>
<div class="form-group">
<label for="name">您的主题</label>
<input type="text" class="form-control" name="subject" id="subject" required>
</div>
<div class="form-group">
<label for="name">您的内容</label>
<textarea class="form-control" name="message" id="message" rows="10" required></textarea>
</div>
<div id="img1"><div class="sent-message">您的信息已提交，非常感谢。</div></div>
<div id="img2"><div class="error-message">您的信息未填写，重新填写。</div></div>
<div class="text-center"><button type="submit" id="btn1">提交信息</button></div>
<script>
$(document).ready(function () {
$("#img1").hide();
$("#img2").hide();
$("#btn1").click(function () {
if ($("#name").val() == "") {
$("#img2").show();
$("#img1").hide();
} else {
if ($("#email").val() == "") {
$("#img2").show();
$("#img1").hide();
} else {
if ($("#subject").val() == "") {
$("#img2").show();
} else {
if ($("#message").val() == "") {
$("#img2").show();
$("#img1").hide();
} else {
$("#img1").show();
$("#img2").hide();
return true;//提交表单
}
}
}
}
return false;
});
});
</script>
</form>
</div>
</div>
</div>
</section>
<script src="assets/js/main.js"></script>
</body>
</html>
有帮助麻烦点下【采纳该答案】，谢谢~~有其他问题可以继续交流~
答
改用ajax无刷新方式提交即可
你题目的解答代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="/css/style.css" rel="stylesheet">
<script src="/jQuey/jquery-3.6.0.min.js"></script>
</head>
<body>
<!-- ======= 联系 开始 ======= -->
<section id="contact" class="contact">
<div class="col-lg-7 mt-5 mt-lg-0 d-flex align-items-stretch">
<form id="formid" action="write.php" method="post" role="form">
<div class="row">
<div class="form-group col-md-6">
<label for="name">您的姓名</label>
<input type="text" name="name" class="form-control" id="name" required>
</div>
<div class="form-group col-md-6">
<label for="name">您的邮箱</label>
<input type="email" class="form-control" name="email" id="email" required>
</div>
</div>
<div class="form-group">
<label for="name">您的主题</label>
<input type="text" class="form-control" name="subject" id="subject" required>
</div>
<div class="form-group">
<label for="name">您的内容</label>
<textarea class="form-control" name="message" id="message" rows="10" required></textarea>
</div>
<div id="img1"><div class="sent-message" >您的信息已提交，非常感谢。</div></div>
<div id="img2"><div class="error-message" >您的信息未填写，重新填写。</div></div>
<div class="text-center"><button type="submit" id="btn1">提交信息</button></div>
<script>
function gosubmit() {
var form = $("#formid");
$.ajax({
url: form.attr("action"),
type: form.attr("method"),
data: form.serialize(),
dataType: "text",
success: function (data) {
$("#img1 .sent-message").text(data);
$("#img1").show();
},
error: function (jqXHR, status, thrown) {
$("#img1 .sent-message").text("无法正常提交！");
$("#img1").show();
}
});
}
$(document).ready(function () {
$("#img1").hide();
$("#img2").hide();
$("#formid").submit(function (event) {
event.preventDefault();
if ($("#name").val() == ""){
$("#img2").show();
$("#img1").hide();
}else{
if ($("#email").val() == ""){
$("#img2").show();
$("#img1").hide();
}else{
if ($("#subject").val() == ""){
$("#img2").show();
}else{
if ($("#message").val() == ""){
$("#img2").show();
$("#img1").hide();
}else{
gosubmit();
$("#img2").hide();
}
}
}
}
});
});
</script>
</form>
</div>
</div>
</div>
</section>
<script src="assets/js/main.js"></script>
</body>
</html>
write.php 中 echo ('数据库已连接！')."<br/>";这行去掉，只让 echo "提交成功"; 或 echo "提交失败"; 输出的内容显示在img1中
如有帮助，望采纳！谢谢!