有一个计算器表格。
工作的结果是以框架模式打开 Fancybox 模态窗口。
那些。用户填写表格,按钮上会生成以下类型的data-src:“/.ajax/call.p3?x1=20&x2=20&dl_long=2000”。单击按钮时,将打开一个模式窗口。
加载页面后,参数仅正确传递一次。也就是说,如果您关闭模态窗口,更改表单中的参数,单击带有更新 data-src 的按钮,则将传输第一次单击按钮时的参数。
编码:
$(document).ready(function() {
function calcParam() {
calc = $('.calc__form').serialize();
$('.calc__submit').attr('data-src', '/.ajax/call.p3?' + calc);
//alert(calc);
console.log(calc);
$.ajax({
type: 'POST',
url: '/.ajax/calc/otlivy.p3',
data: calc,
success: function(msg) {
$(".calc__amount").html(msg);
},
error: function() {}
});
}
$('.calc__form').on('input', function() {
calcParam();
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<form method="post" class="calc__form">
<input name="coef" value="1" type="hidden">
<input name="xparam" value="2" type="hidden">
<div class="calc__form--line">
<div>
<div class="calc__form--label">
Длина X1:
</div>
<div class="calc__form--field"><input name="x1" type="text" value="20" class="onlydigits calc__form--input"><span class="mm">мм<span></span></span>
</div>
</div>
<div>
<div class="calc__form--label">
Длина X2:
</div>
<div class="calc__form--field"><input name="x2" type="text" value="20" class="onlydigits calc__form--input"><span class="mm">мм<span></span></span>
</div>
</div>
</div>
<button class="btn anim calc__submit" data-type="iframe" data-fancybox="" data-src="/.ajax/call.p3">Отправить заявку</button>
</form>
在 call.p3 中,粗略地说(我只是没有 php):
if (isset($_POST)) {
print("x1" . $_POST['x1']);
print("x2: " . $_POST['x2']);
}
仅显示发送的第一个参数。通过浏览器控制台,可以看到
是缓存吗?花式盒子的特点?