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

Question

我基本上想做的是，单击每个多边形后会出现一个弹出表单，用户将在其中输入一些值，按提交，在php脚本和函数运行后，它应该会在地图上显示一些标记。我正在尝试使此表单作为 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 数组值的同一页面。