javascript - 如何在复选框选中/取消选中事件上发送发布请求

Question

我有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 通过尽快将选中或未选中的内容发送到 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)

我该怎么做，

Answer 1

看看axiosjs图书馆。它是一个基于 Promise 的轻量级浏览器 HTTP 客户端。

功能

• 从浏览器发出 XMLHttpRequest
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 自动转换 JSON 数据
• 客户端支持防范 XSRF

发布请求

可以像这样发出帖子请求......

<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);
});