Question

    <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>

这是那些要求

的完整代码

Answer 1

您应该在HTML中更改表单标记，如下所示。我知道您的脚本和HTML

中的ID必须丢失或拼写错误

<form id="formReportStolen" name="formReportStolen" action="PublicReportStolenDAO.php" method="POST" enctype="multipart/form-data">

提交函数上的Ajax不起作用

1 个答案: