嘗試使用 AJAX 向 MySql 提交表單
[英]Trying to submit a form to MySql with AJAX
問題描述
我正在嘗試使用 Ajax 從表單發布到 SQL。
但是，當單擊按鈕提交表單時，chrome 控制台中沒有顯示錯誤，並且看起來 PHP 也沒有在網絡選項卡中被調用。 任何人都可以幫助我或指出我正確的方向嗎？
HTML
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="js/signup.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body background-color="#000000">
<section class="section section-full bg-secondary overflow-hidden z-2">
<div class="container z-2">
<div class="row justify-content-center pt-6 pt-md-5 pb-0 mb-2">
<div class="col-12 col-xl-7">
<div class="card card-tertiary">
<div class="card-header text-center">
<span>Register</span>
</div>
<div class="card-body">
<p class="font-weight-bold">
</p>
<p class="card-text text-center">
Please enter your Email:
</p>
<form class="d-flex justify-content-between mb-2" method="POST" name="email-form" id="email-form">
<div id="name-group" class="form-group">
<p>Name: <input type="text" id="uname" name="uname" class="form-control w-75" required/>
</div>
<div id="email-group" class="form-group">
<p>Email: <input type="text" id="uemail" name="uemail" class="form-control w-75" required/>
</div>
<div class="form-group">
<button class="btn btn-sm mr-2 btn-tertiary border-dark" type="button" action="submit" id ="submit" name="submit">
<span class="btn-text">Sign-Up</span>
</button>
</div>
<div id="message"></div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
signup.js Javascript
$(document).ready(function() {
$('#email-form').submit(function(e) {
e.preventDefault();
$.ajax({
method: "POST",
url: 'emailsend.php',
data: {
'uname': $('#uname').val(),
'uemail': $('#uemail').val()
}
}).done(function( data ) {
var result = $.parseJSON(data);
var str = '';
if(result == 1) {
str = 'User record saved successfully.';
} else if( result == 2) {
str == 'All fields are required.';
} else{
str = 'User data could not be saved. Please try again';
}
$("#message").css('color', 'red').html(str);
})
})
});
電子郵件發送。php PHP
<?php
$dbhost = "localhost";
$dbuser = "------";
$dbpass = "------";
$db = "signup";
$data = '';
$result = 0;
$conn = new mysqli($dbhost, $dbuser, $dbpass, $db) or die("Connect failed: %s\n". $conn -> error);
if ($conn->connect_errno) {
printf("Connect failed: %s\n", $conn->connect_error);
exit();
}
$uname = $_POST['uname'];
$email = $_POST['uemail'];
/* validation */
if(!$uname || !$email){
$result = 2;
}elseif (!strpos($email, "@") || !strpos($email, ".")) {
$result = 3;
}else {
//SQL query to get results from database
$sql = "INSERT INTO emails (name, email) VALUES ('$uname', '$email')";
$stmt = $conn->prepare($sql);
$stmt->bind_param('ss', $uname, $email);
if($stmt->execute()){
$result = 1;
}
}
echo $result;
$conn->close()
?>
2 個解決方案
解決方案1
0 已采納 2019-10-17 08:38:18
既然你有
$(document).ready(function() {
$('#email-form').submit(function(e) {
和
<button class="btn btn-sm mr-2 btn-tertiary border-dark" type="button" action="submit" id ="submit" name="submit">
我不知道當按鈕類型不是提交時將如何提交更改按鈕類型以像這樣提交
<button class="btn btn-sm mr-2 btn-tertiary border-dark" type="submit" action="submit" id ="submit" name="submit">
解決方案2
0 2019-10-17 08:40:32
首先，將您的按鈕type屬性更改為submit而不是button ：
<button class="btn btn-sm mr-2 btn-tertiary border-dark" type="submit" action="submit" id ="submit" name="submit">
其次，將您的 JQuery 版本更改為
Bootstrap 的 JavaScript 版本3.3需要 jQuery 版本1.9.1或更高，但低於版本3
使用AJAX向MySQL提交表單
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.