我正在尝试与AJAX建立联系表格,该表格会将数据发送到我的数据库。但是没有任何记录。有人可以帮助我找到我所犯的错误吗?
HTML-这是实际表单的代码
<form method="POST">
<fieldset>
<label>First name:</label>
<input type="text" name="firstName" id="fNameInput" required/>
<label>Last name:</label>
<input type="text" name="lastName" id="lNameInput" required/>
<label>Email:</label>
<input type="email" name="email" id="emailInput" required/>
</fieldset>
<fieldset>
<label>Subject:</label>
<input type="text" name="subject" id="subjectInput" />
<label>Message:</label>
<textarea name="message" id="msgInput" ></textarea>
</fieldset>
<fieldset>
<fieldset>
<label>Your role:</label>
<input type="radio" name="role" value="writer" id="writerInput">Writer
<input type="radio" name="role" value="contributor" id="contribInput">Contributor
<input type="radio" name="role" value="administrator" id="adminInput">Administrator
</fieldset>
<input type="submit" value="Send" id="sendMsgBtn" />
</form>
PHP-处理页面(我不认为这是处理页面。它在尝试将表单更新为AJAX之前就将数据上传到db)
<?php
$firstName = $_POST['firstName'];
$lastName = $_POST['lastName'];
$email = $_POST['email'];
$subject = $_POST['subject'];
$message = $_POST['message'];
$interest = $_POST['interest'];
$role = $_POST['role'];
$dsn = "mysql:host=localhost;dbname= ;charset=utf8mb4";
$dbusername = " ";
$dbpassword = " ";
$pdo = new PDO($dsn, $dbusername, $dbpassword);
$stmt = $pdo->prepare("INSERT INTO `contact` (`id`, `firstName`, `lastName`, `email`, `subject`, `message`, `interest`, `role`) VALUES (NULL, '$firstName', '$lastName', '$email', '$subject', '$message', '$interest', '$role'); ");
$stmt->execute();
?>
JS-从数据库提交内容的脚本
var sendMsgBtn = document.getElementById("sendMsgBtn");
sendMsgBtn.addEventListener("click", addMsgFunction, false);
function addMsgFunction(e) {
var myRequest = new XMLHttpRequest;
myRequest.onreadystatechange = function(){
if(myRequest.readyState === 4){
//console.log(myRequest.responseText);// modify or populate html elements based on response.
var responseObj = JSON.parse(myRequest.responseText);
console.log(responseObj.success);
}
};
var fNameInput = document.getElementById("fNameInput");
var lNameInput = document.getElementById("lNameInput");
var emailInput = document.getElementById("emailInput");
var subjectInput = document.getElementById("subjectInput");
var msgInput = document.getElementById("msgInput");
var techInput = document.getElementById("techInput");
var indInput = document.getElementById("indInput");
var desInput = document.getElementById("desInput");
var writerInput = document.getElementById("writerInput");
var contribInput = document.getElementById("contribInput");
var adminInput = document.getElementById("adminInput");
myRequest.open("POST", "process-contact.php", true); //true means it is asynchronous // Send urls through the url
myRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
myRequest.send("firstName=" + fNameInput.value+
"&lastName=" + lNameInput.value+
"&email=" + emailInput.value+
"&subject=" + subjectInput.value+
"&message=" + msgInput.value+
"&interest=" + techInput.value+
"&interest=" + indInput.value+
"&interest=" + desInput.value+
"&role=" + writerInput.value+
"&role=" + contribInput.value+
"&role=" + adminInput.value);
}
答案 0 :(得分:-2)
使用jquery怎么样。给您的表单id =“ myForm”并提交按钮id =“ submit”不要忘记在您的头部添加jquery文件
$(document).ready(function(){
$("#submit").click(function(){
$.ajax({
type:"POST",
url:'your/php_file/path',
data:$("#myForm input").serialize(),
success: function(response){
console.log(response);
}
});
});
});