我正在尝试使用AJAX提交表单以防止页面刷新，然后在后台将数据发送到MYSQL数据库，但我无法弄清楚我做错了什么。如果我使用带有表单标记的action =“SuggestionSchemeForm”，页面将正确发送数据，但我宁愿用AJAX来停止页面刷新。我查看了多个问题和答案，但无法找到与我的特定问题相关的答案。任何人都可以看到我的错误/
我的AJAX看起来像这样。
<script type="text javascript">
$(function ()
{
$('SuggestionForm').on('submit', function (e)
{=det
e.preventDefault();
$.ajax(
{
type: 'POST',
url: 'SuggestionSchemeForm.php',
dataType: 'html',
data: $('SuggestionForm').serialize(),
success: function ()
{
alert('form was submitted');
}
});
});
});
</script>
这是我的php文件
<?php
if($_POST)
{
require_once("../config.php");
require_login();
global $USER;
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "FTSuggestionTest";
$firstName = $USER->firstname;
$lastName = $USER->lastname;
$currentUser =$USER->currentUser;
$userId = $USER->id;
$a=date("Y-m-d H:i:s");
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error)
{
die("Connection failed: " . $conn->connect_error);
}
$sql = "INSERT INTO enquiries (Id, Name, JobTitle, Department, Site,Suggestion, Impact, Processed, Status, Date, Location, BuildingNo)
VALUES ('$userId', '$_POST[firstname]', '$_POST[jobtitle]', '$_POST[department]', '$_POST[site]', '$_POST[suggestion]', '$_POST[impact]', 'NO', 'Submitted', '$a', '$_POST[location]', '$_POST[buildingNo]')";
if ($conn->query($sql) === TRUE)
{
echo "New record created successfully for $_POST[firstname]";
}
else
{
echo "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
exit;
}
?>
然而，当用户单击提交按钮时，我可以获得写入值的唯一方法是包含action =“SuggestionSchemeForm”。
答案 0 :(得分：0)
我检查了你的jquery代码。我发现你没有在提交上给出确切的选择器。将 $（＆＃39; .SuggestionForm＆＃39;）或 $（＆＃39;＃SuggestionForm＆＃39;）代替$（＆＃39; SuggestionForm＆＃ 39）
<span id="maincontent"></span>
<h2>Submit Suggestion</h2>
<div class="box generalbox center clearfix">
<div class="no-overflow">
<div class="container" style="background-image: url('http://www.worldmarkacademy.com/OurWorld/EditorBG.png'); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: repeat; padding-bottom: 5px;">
<br />
<div class="mainbody" style="background-image: url('http://www.worldmarkacademy.com/SubmitSuggestion/Notepad.png'); background-repeat: no-repeat; margin-left: auto; margin-right: auto; margin-bottom: 10px; width: 646px; height: 800px !important; min-height: 100%; overflow: hidden;">
<script>
$(function ()
{
$('#SuggestionForm').on('submit', function (e)
{
//e.preventDefault();
$.ajax(
{
type: 'POST',
url: 'SuggestionSchemeForm.php',
dataType: "json",
data: $('#SuggestionForm').serialize(),
success: function ()
{
alert('form was submitted');
}
});
return false;
});
});
</script>
<div class="main-form" style="margin-top: 100px;">
<form name="SuggestionForm" id="SuggestionForm" method="post" >
<div>
<label style="display: inline-block; margin-left: 10px; letter-spacing: 2px; color: #007A8E;">
<b>Name:</b>
</label>
<input id="chkBoxAnon"type="checkbox" style=" margin-left: 110px; outline: 1px solid #0078AE;"
name="Anonymous" value="Anonymous" onClick="CheckAnon();">
<label style="margin-left: 2px; color: #0078AE;">Anonymous</label>
</div>
<input type="text" id="fname" name="firstname" style="height: 34px; width: 268px; margin-left: 10px; margin-top: 5px; color: #007A8E;
border: 1px solid #dedede; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;" value=""
<? echo $firstName?> <? echo $lastName?>">
<script type="text/javascript">
var orginalName = document.getElementById("fname").value;
function CheckAnon()
{
var textname = document.getElementById("fname");
if(document.getElementById("chkBoxAnon").checked == true)
{
textname.value = "Anonymous";
}
else
{
textname.value = orginalName;
}
}
</script>
<label style="display: block; margin-left: 10px; margin-top: 10px; letter-spacing: 2px; color: #007A8E;">
<b>Job Title:</b>
</label>
<input id="jobTitle" name="jobtitle" style="height: 34px; width: 268px; margin-left: 10px; margin-top: 5px; color: #007A8E; border: 1px solid #dedede; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;" type="text" />
<label style="display: block; margin-left: 10px; margin-top: 10px; letter-spacing: 2px; color: #007A8E;">
<b>Site:</b>
</label>
<select id="site" name="site" style="margin-left: 10px; margin-top: 5px; height: 34px; width: 268px; color: #007A8E; padding: 5px; font-size: 14px; line-height: 1; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;" type="text">
<option value="New york" style="color:#007A8E; ">New york</option>
</select>
<label style="display: block; margin-left: 10px; margin-top: 10px; letter-spacing: 2px; color: #007A8E;">
<b>Area To Which Improvement Relates:</b>
</label>
<select id="buildingNo" name="buildingNo" style="margin-left: 10px; margin-top: 5px; height: 34px; width: 268px; color: #007A8E; padding: 5px; font-size: 14px; line-height: 1; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;" type="text">
<option value="building No.4" style="color:#007A8E; ">Building No.4</option>
<option value="building No.6" style="color:#007A8E; ">Building No.6</option>
</select>
</form>
</div>
</div>
</div>
</div>
答案 1 :(得分：-1)
尝试
<form onsubmit="return false;" >