我想从 jquery ajax 提交表单。我使用下面的代码来执行它。当我使用 ajax 函数时，重新加载页面并重定向到“registerphp.php”页面。回显消息显示“registerphp.php”页面。但我想在 div 中显示成功消息。
代码
<form action="registerphp.php" method="post"><br>
<div id="errordiv" class="form-group" style="display:none;background-color: #FFBABA;color: #9F6000;border: 1px solid;margin: 10px 0px;padding:15px 10px 15px 50px;background-repeat: no-repeat;background-position: 10px center">
<span id="error_message" class="text-danger"></span>
</div>
<div id="successdiv" class="form-group" style="display:none;background-color: #00dd00;color: #9F6000;border: 1px solid;margin: 10px 0px;padding:15px 10px 15px 50px;background-repeat: no-repeat;background-position: 10px center">
<span id="success_message" class="text-success"></span>
</div>
<div class="form-group">
<label for="pwd">Title</label>
<input type="text" class="form-control" id="title" name="title">
</div>
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" id="name" name="name">
</div>
<div class="form-group">
<label >User Name</label>
<input type="text" class="form-control" id="uname" name="uname" >
</div>
<div class="form-group">
<label for="pwds">Passowrd</label>
<input type="password" class="form-control" id="pwds" name="pwds">
</div>
<div class="form-group">
<label>Confirm Password:</label>
<input type="password" class="form-control" id="pwds2" name="pwds2" >
</div>
<div class="form-group">
<label >Email</label>
<input type="email" class="form-control" id="email" name="email">
</div>
<div class="form-group">
<label>Phone</label>
<input type="text" class="form-control" id="phone" name="phone">
</div>
<div class="form-group">
<label>Birth date</label>
<input type="date" class="form-control" id="bdate" name="bdate" >
</div>
<div class="form-group">
<label for="pwd">University</label>
<input type="text" class="form-control" id="uni" name="uni">
</div>
<div class="form-group">
<label>GPA</label>
<input type="number" class="form-control" id="gpa" name="gpa" step=".01">
</div>
<div class="form-group">
<label>Address</label>
<input type="text" class="form-control" id="add" name="add">
</div>
<input type="submit" class="btn btn-info btn-block btn-md" value="Submit" name="buttonregister" id="buttonregister"></input>
</form>
<script type="text/javascript">
$(document).ready(function () {
$('#buttonregister').click(function () {
var title=$('#title').val();
var name=$('#name').val();
var phone=$('#phone').val();
var uname=$('#uname').val();
var pwds=$('#pwds').val();
var pwds2=$('#pwds2').val();
var email=$('#email').val();
var phone=$('#phone').val();
var bdate=$('#bdate').val();
var uni=$('#uni').val();
var gpa=$('#gpa').val();
var add=$('#add').val();
if(title=="")
{
//$('#dis').slideDown().html("<span>Please type Title</span>");
$('#error_message').slideDown().html("Id is required");
$('#errordiv').css('display','block');
return false;
}
if(name=="")
{
//$('#dis').slideDown().html("<span>Please type Name</span>");
$('#error_message').html("Name is required");
$('#errordiv').css('display','block');
alert('no2');
return false;
}
if(!$.isNumeric(phone))
{
$('#error_message').html("<span>Please type Number</span>");
$('#errordiv').css('display','block');
alert('no3');
return false;
}
if(uname=="")
{
//$('#dis').slideDown().html("<span>Please type User Name</span>");
$('#error_message').html("User Name is required");
alert('no4');
return false;
}
if(pwds=="")
{
//$('#dis').slideDown().html("<span>Please type Name</span>");
$('#error_message').html("Id is required");
alert('no5');
return false;
}
if(pwds.length<5)
{
$('#dis').slideDown().html("<span>Please type Name</span>");
alert('no6');
return false;
}
else if(email=="")
{
$('#dis').slideDown().html("<span>Please type Email</span>");e
alert('no7');
return false;
}
var filter = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
if(!filter.test(email))
{
$('#dis').slideDown().html('<span id="error">Please type correct email</span>');
alert('no8');
return false;
}
if(pwds!=pwds2)
{
$('#dis').slideDown().html("<span>Please type Same password</span>");
alert('no9');
return false;
}
if(bdate=="")
{
$('#dis').slideDown().html("<span>Please type Name</span>");
alert('no10');
return false;
}
if(bdate=="")
{
$('#dis').slideDown().html("<span>Please type Name</span>");
alert('no11');
return false;
}
else if(uni=="")
{
$('#error_message').slideDown().html("<span>Please type uni Name</span>");
alert('no12');
return false;
}
if(gpa=="")
{
$('#dis').slideDown().html("<span>Please type GPA</span>");
alert('no13');
return false;
}
else{
$.ajax({
method:"POST",
url:"registerphp.php",
data:{name:name,uname:uname,pwds:pwds,pwds2:pwds2,bdate:bdate,email:email,phone:phone,uni:uni,gpa:gpa,add:add,title:title},
success:function (data) {
$("form").trigger("reset");
$('#success_message').html(data);
$('#successdiv').css('display','block');
alert(data);
}
});
}
});
});
</script>
注册php.php
<?php
$conn=mysqli_connect("localhost","root","","internship");
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
if (isset($_POST['buttonregister'])) {
$name = $_POST['name'];
$uname = $_POST['uname'];
$pwds = $_POST['pwds'];
$pwds2 = $_POST['pwds2'];
$bdate = $_POST['bdate'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$uni = $_POST['uni'];
$gpa = $_POST['gpa'];
$add = $_POST['add'];
$title = $_POST['title'];
$sql2 = "select username from student where username='$uname'";
if (mysqli_query($conn,$sql2)->num_rows>0) {
echo 'this user name already exist';
}
else {
$sql = "insert into student(fname,username,password,bdate,email,mobile,university,gpa,address,title) values('$name','$uname','$pwds','$bdate','$email',$phone,'$uni',$gpa,'$add','$title')";
if ($conn->query($sql) === TRUE) {
echo 'Successfully registerd';
} else {
echo 'Registerd unsccessfull';
}
}
}
?>
最佳答案
在点击时在 $('#buttonregister') 中使用阻止默认行为，这将阻止默认行为。 preventDefault
<script type="text/javascript">
$(document).ready(function () {
$('#buttonregister').click(function (e) { //add this parameter
e.preventDefault(); // add this line
var title=$('#title').val();
var name=$('#name').val();
var phone=$('#phone').val();
var uname=$('#uname').val();
var pwds=$('#pwds').val();
var pwds2=$('#pwds2').val();
var email=$('#email').val();
var phone=$('#phone').val();
var bdate=$('#bdate').val();
var uni=$('#uni').val();
var gpa=$('#gpa').val();
var add=$('#add').val();
if(title=="")
{
//$('#dis').slideDown().html("<span>Please type Title</span>");
$('#error_message').slideDown().html("Id is required");
$('#errordiv').css('display','block');
return false;
}
if(name=="")
{
//$('#dis').slideDown().html("<span>Please type Name</span>");
$('#error_message').html("Name is required");
$('#errordiv').css('display','block');
alert('no2');
return false;
}
if(!$.isNumeric(phone))
{
$('#error_message').html("<span>Please type Number</span>");
$('#errordiv').css('display','block');
alert('no3');
return false;
}
if(uname=="")
{
//$('#dis').slideDown().html("<span>Please type User Name</span>");
$('#error_message').html("User Name is required");
alert('no4');
return false;
}
if(pwds=="")
{
//$('#dis').slideDown().html("<span>Please type Name</span>");
$('#error_message').html("Id is required");
alert('no5');
return false;
}
if(pwds.length<5)
{
$('#dis').slideDown().html("<span>Please type Name</span>");
alert('no6');
return false;
}
else if(email=="")
{
$('#dis').slideDown().html("<span>Please type Email</span>");e
alert('no7');
return false;
}
var filter = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
if(!filter.test(email))
{
$('#dis').slideDown().html('<span id="error">Please type correct email</span>');
alert('no8');
return false;
}
if(pwds!=pwds2)
{
$('#dis').slideDown().html("<span>Please type Same password</span>");
alert('no9');
return false;
}
if(bdate=="")
{
$('#dis').slideDown().html("<span>Please type Name</span>");
alert('no10');
return false;
}
if(bdate=="")
{
$('#dis').slideDown().html("<span>Please type Name</span>");
alert('no11');
return false;
}
else if(uni=="")
{
$('#error_message').slideDown().html("<span>Please type uni Name</span>");
alert('no12');
return false;
}
if(gpa=="")
{
$('#dis').slideDown().html("<span>Please type GPA</span>");
alert('no13');
return false;
}
else{
$.ajax({
method:"POST",
url:"registerphp.php",
data:{name:name,uname:uname,pwds:pwds,pwds2:pwds2,bdate:bdate,email:email,phone:phone,uni:uni,gpa:gpa,add:add,title:title},
success:function (data) {
$("form").trigger("reset");
$('#success_message').html(data);
$('#successdiv').css('display','block');
alert(data);
}
});
}
});
});
</script>
修复 PHP 无法检测提交按钮
使用AJAX提交的表单不提交提交按钮。 check this post
<?php
$conn=mysqli_connect("localhost","root","000000","ng_app");
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
//if (isset($_POST['buttonregister'])) { // ajax will not submit this button
$name = $_POST['name'];
$uname = $_POST['uname'];
$pwds = $_POST['pwds'];
$pwds2 = $_POST['pwds2'];
$bdate = $_POST['bdate'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$uni = $_POST['uni'];
$gpa = $_POST['gpa'];
$add = $_POST['add'];
$title = $_POST['title'];
$sql2 = "select username from student where username='$uname'";
if (mysqli_query($conn, $sql2)->num_rows > 0) {
echo 'this user name already exist';
} else {
$sql = "insert into student(fname,username,password,bdate,email,mobile,university,gpa,address,title) values('$name','$uname','$pwds','$bdate','$email',$phone,'$uni',$gpa,'$add','$title')";
if ($conn->query($sql) === TRUE) {
echo 'Successfully registerd';
} else {
echo 'Registerd unsccessfull';
}
}
//}
关于php - 使用ajax功能时重新加载页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43527292/