[英]how to send a post request on checkbox check/uncheck event
我有4个复选框
<input type="checkbox" name="1" id="1" data-toggle="toggle" data-onstyle="default" data-width="500%" >
<input type="checkbox" name="2" id="2" data-toggle="toggle" data-onstyle="default" data-width="500%" >
<input type="checkbox" name="3" id="3" data-toggle="toggle" data-onstyle="default" data-width="500%" >
<input type="checkbox" name="4" id="4" data-toggle="toggle" data-onstyle="default" data-width="500%" >
我想如果有人“检查”一个复选框ajax发送该复选框的id,{0,1}取决于是否选中,然后1,如果未选中0则通过asap对其后检查或未选中的PHP脚本进行发布
<?php
if($_POST['id'] && $_POST['state'])
{
$id = $_POST['id'];
$state= $_POST['state'];
print $id;
print $state;
}
?>
这样的事情。
if checbox1 == checked:
post(checkbox1[id],1)
if(checkbox1== unchecked)
post(checkbox1[id],0)
我怎样才能做到这一点,
没有jquery:
function task(e) { if(e.target.checked) { ///do post request with 1 in parameter console.log("do post request with 1 in parameter"); } else { ///do post request with 0 parameter console.log("do post request with 0 parameter"); } }
<input type="checkbox" onclick="task(event);"/>
瑞格
看看axiosjs库。 它是用于浏览器的轻量级基于Promise的HTTP客户端。
特征
发布请求
可以这样发出职位要求...
<input type="checkbox" name="describeyouraction" id="checkbox_1">
// Post requst to /toggle route
axios.post('/toggle', {
id: (document.getElementById("checkbox_1")).id,
describeyouraction: (document.getElementById("checkbox_1")).name,
})
.then((response) => {
// do something if request is successfull ...
})
.catch((error) => {
console.log(error.response.data);
});
您可以在复选框中使用onchange事件。 范例:
<input type="checkbox" name="1" id="1" data-toggle="toggle" data-onstyle="default"
data-width="500%" onchange="some_function();">
在功能上进行ajax调用
在您的复选框中添加一个类,例如class='something'
,然后您可以尝试以下操作(使用jQuery作为问题中的标记):
$(document).ready(function() {
$('.something').on('change', function(e) {
var id = $(this).attr('id');
var value = $(this).is(':checked');
$.post('url-here', {id:id, value:value}, function(response) {
// ...
});
});
});
您可以使用$_POST['id']
和$_POST['value']
在php
检索发布数据。
在项目的根目录下将其另存为ajax.php
。 运行它并打开浏览器控制台以查看结果:
<?php
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
var_dump($_POST['id']);
var_dump($_POST['value']);
} else {
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="1" id="1" data-toggle="toggle" data-onstyle="default" data-width="500%" >
<input type="checkbox" name="2" id="2" data-toggle="toggle" data-onstyle="default" data-width="500%" >
<input type="checkbox" name="3" id="3" data-toggle="toggle" data-onstyle="default" data-width="500%" >
<input type="checkbox" name="4" id="4" data-toggle="toggle" data-onstyle="default" data-width="500%" >
<script>
$('input[type="checkbox"]').on('click', function(){
var data = {};
data.id = $(this).attr('id');
data.value = $(this).is(':checked') ? 1 : 0;
console.log(data);
$.ajax({
type: "POST",
url: "/ajax.php",
data: data,
}).done(function(data) {
console.log(data);
});
});
</script>
<?php } ?>
结果看起来像这样:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.