我正在尝试使用 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>
注册.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: %sn". $conn -> error);
if ($conn->connect_errno) {
printf("Connect failed: %sn", $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()
?>
因为你有
$(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">
首先，将按钮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