javascript - 如何在传单中制作弹出表单AJAX并在提交时执行功能

Question

单击每个多边形后我基本上想要做什么 popup form出现在用户输入一些值的地方，按提交，在 php 脚本和函数运行后，它应该会在 map 上显示一些标记。我正在尝试使此表单作为 AJAX 工作并执行其中的函数。

我之前已经成功使用ajax创建了html表单，但似乎需要一些工作才能在传单中正常运行。

我正在尝试 AJAX 表单

var htmlformGuest = `

    <h2>Search for parking slots</h2>
    <form id="parkform" action="/findPark.php" method="post" >

        Enter the polygon id:<br>
    <input type="number" name="id_P" value="">
        <br>
        Max radius:<br>
    <input type="number" name="Radius" min="50" max="500" value="" placeholder="50">
        <br><b>
        <input type="Submit" value="Submit">
        <input id="form-polygon-id" type="hidden" name="PolygonID">
        <input type="reset">
        </form>
`;

我想在提交表单时包含的功能(我不确定它是否有效，因为我需要首先使用 ajax 表单!)

function putMultipleMarkers(jArrayId, jArrayLat, jArrayLng) {
    for (var i = 0; i < jArrayLat.length; i++) {
        var multipleMarker = new L.marker(jArrayLat[i], jArrayLng[i])
            .bindPopup(jArrayId[i])
            .addTo(geojson);
    }

}

以前以非传单形式对我有用的是带有函数的代码

$("#parkform").submit(function (e) {
    e.preventDefault();
    var form = $(this);
    var url = form.attr('action');
    $.ajax({
        type: "POST",
        url: "findPark.php",
        data: form.serialize(),
        success: alert('Marker Map'),
    })
});

感谢任何帮助!

Answer 1

它并不是很干净，但是你可以在成功时执行 $('body').html(data) :

$("#parkform").submit(function(e) {
    e.preventDefault();

    var dataForm = $(this).serialize();
    var url = form.attr('action');

    $.post(
        url,
        dataForm,
        function(data) { // on success
            $('body').html(data);
        }
    );
});

因为data是您的请求的代码响应，所以它是具有POST数组值的同一页面。