2
我想從jQuery提交表單ajax。我使用下面的代碼來執行它。當我使用ajax函數重新加載頁面並重定向到'registerphp.php'頁面時。回聲消息顯示'registerphp.php'頁面。但我想在div中顯示成功消息。當使用ajax函數重新加載頁面
代碼
<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._-][email protected][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>
registerphp.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';
}
}
}
?>
您的代碼容易受到[** SQL注入攻擊**]（https://en.wikipedia.org/wiki/SQL_injection）的影響。你應該使用[** mysqli **]（https://secure.php.net/manual/en/mysqli.prepare.php）或[** PDO **]（https://secure.php.net/ manual/en/pdo.prepared-statements.php）準備帶有綁定參數的語句，如[**這篇文章**]所述（https://stackoverflow.com/questions/60174/how-can-i-prevent-sql步噴射功能於PHP）。 –
只有在註冊成功後，才能刷新表單。 – julekgwa