<script>
var markerLatitude;
var markerLongitude;
function initMap() {
var mapCenter = new google.maps.LatLng(51.8979988098144, -2.0838599205017);
var mapOptions = {
zoom: 15,
center: mapCenter
};
map = new google.maps.Map(document.getElementById("mapInput"), mapOptions);
marker = new google.maps.Marker({
map: map,
position: mapCenter,
draggable: true
});
google.maps.event.addListener(marker, 'dragend', markerDragged);
}
function markerDragged(event) {
console.log("markerDragged");
markerLatitude = event.latLng.lat().toFixed(8);
markerLongitude = event.latLng.lng().toFixed(8)
console.log("Latitude:" + markerLatitude);
console.log("Longitude:" + markerLongitude);
}
$('#formReportStolen').on('submit', function(e){
var formData = new FormData(this);
formData.append("lat", markerLatitude);
formData.append("lng", markerLongitude);
console.log("Latitude: " + markerLongitude + " Longitude:" + markerLongitude+ " DATA SENT TO PHP");
e.preventDefault();
$.ajax({
url: 'PublicReportStolenDAO.php',
method: "POST",
data: formData,
contentType: false,
cache: false,
processData: false,
success:function(echoedMsg) {
if (echoedMsg == "True") {
alert("Successfully reported.");
}
}
});
});
</script>
您好，我的 javascript 似乎有问题。当我尝试使用 ajax 提交数据并将其发布到我的 php 类时，它根本不发送任何数据。事实上，我的 ajax 的整个 onclick 函数似乎不起作用。
任何让点击按钮正常工作的帮助都会很棒。
编辑:
<html>
<head>
<!-- changes text in tab in browser -->
<title> Report Stolen Bike </title>
<!-- links CSS file to HTML file -->
<link rel="stylesheet" type="text/css" media="screen" href="../style.css">
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<header>
<!-- adds title to the page -->
<h1 class="top"> Gloucestershire Constabulary Bike Programme - Report Your Stolen Bike </h1>
<nav>
<ul>
<!-- adds links to the nav bar -->
<li><a href="../Home/Home.html">HOME</a></li>
<li><a href="../RegisterBike/PublicBikeRegistration.php">BIKE REGISTRATION</a></li>
<li><a href="../ReportStolen/PublicReportStolen.html"class="current">REPORT</a></li>
<li><a href="../LogoutHome/LogoutHome.html">LOGOUT</a></li>
</ul>
</nav>
<!-- adds the two images to page -->
<div class=imgcontainer>
<img src="../../images/Bike.png">
<img src="../../images/Gloucestershire%20Police%20Constabulary.jpg">
</div>
</header>
<!-- adds second heading to the page -->
<h2 class="top"> Please select the bike that has been stolen from the drop down list below </h2>
<!-- creates a form for users to input their personal information -->
<form name="formReportStolen" action="PublicReportStolenDAO.php" method="POST" enctype="multipart/form-data">
<!-- adds title of input box -->
<h3 class="middle"> Bike ID </h3>
<input class="middle" name="txtBikeID" type="text" required>
<h3 class="middle"> Date of Theft </h3>
<input class="middle" name="txtDateofTheft" type="text" required>
<h3 class="middle"> Please select the last known location </h3>
<div align="center" id="mapInput" style="width: 650px; height: 300px;"></div>
<!-- adds two line breaks between last input box and image uplodaer -->
<br> <br>
<!-- adds submit button, allowing data in form to be added to databse -->
<!-- links the JavaScript files to HTML page -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDQXrh9RnanEbxo34RAnXg7kjx0DV3F420&callback=initMap" async defer></script>
<script>
var markerLatitude;
var markerLongitude;
function initMap() {
var mapCenter = new google.maps.LatLng(51.8979988098144, -2.0838599205017);
var mapOptions = {
zoom: 15,
center: mapCenter
};
map = new google.maps.Map(document.getElementById("mapInput"), mapOptions);
marker = new google.maps.Marker({
map: map,
position: mapCenter,
draggable: true
});
google.maps.event.addListener(marker, 'dragend', markerDragged);
}
function markerDragged(event) {
console.log("markerDragged");
markerLatitude = event.latLng.lat().toFixed(8);
markerLongitude = event.latLng.lng().toFixed(8)
console.log("Latitude:" + markerLatitude);
console.log("Longitude:" + markerLongitude);
}
$('#formReportStolen').on('submit', function(e){
var formData = new FormData(this);
formData.append("lat", markerLatitude);
formData.append("lng", markerLongitude);
console.log("Latitude: " + markerLongitude + " Longitude:" + markerLongitude+ " DATA SENT TO PHP");
e.preventDefault();
$.ajax({
url: 'PublicReportStolenDAO.php',
method: "POST",
data: formData,
contentType: false,
cache: false,
processData: false,
success:function(echoedMsg) {
if (echoedMsg == "True") {
alert("Successfully reported.");
}
}
});
});
</script>
<input name="submit" type="submit" id ="submit">
</form>
</body>
</html>
这就是那些提问的人的完整代码
最佳答案
您应该在 HTML 中更改表单标记，如下所示。我知道您的脚本和 HTML 中的 ID 一定丢失或拼写错误
<form id="formReportStolen" name="formReportStolen" action="PublicReportStolenDAO.php" method="POST" enctype="multipart/form-data">
关于javascript - Ajax 提交功能不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50412079/