用Ajax将checkbox选中的值发送给后台

最新推荐文章于 2020-04-07 23:37:16 发布

转载最新推荐文章于 2020-04-07 23:37:16 发布 · 350 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiaoluoli/p/5899008.html

文章标签：

#后端 #json

本文介绍了一个使用XMLHttpRequest进行POST和GET请求的JavaScript示例。代码中定义了两个函数，一个用于发送POST请求并接收响应，另一个用于周期性地发送GET请求。此外，还展示了一个监听点击事件的例子，当点击指定元素时触发POST请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

献上代码

var postInstall=function(data,fn){                           //发送请求
    var xhr = new XMLHttpRequest();
    var url="";              //地址，注意不要跨域
    xhr.open("post", url);
    xhr.setRequestHeader("content-type", "application/json");
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4) {
            var str=xhr.responseText;
            console.log(str);
            var obj=JSON.parse(str);
            if(typeof(fn)=="function"){
                fn(obj);
            }
        }
    }
    data=JSON.stringify(data);
    xhr.send(data);
}
//轮巡
var Timer=setInterval(function(){
 var xhr = new XMLHttpRequest();
 var url="";
 xhr.open("GET", url);
 xhr.setRequestHeader("content-type", "application/json");
 xhr.onreadystatechange = function() {
  if(xhr.readyState == 4) {
  }
 }
},2000);              // 200秒内持续
document.addEventListener('click',function(evt){
    if(!evt.target.matches(".yes")){
        return;
    }
    var data={                                         //发送的数据
        environ:document.getElementById("environ").checked,    
        keystone:document.getElementById("keystone").checked,
        glance:document.getElementById("glance").checked,
    }
    postInstall(data,function(resdata){
        if(resdata.status=="OK"){
            alert("发送成功")；
        }
    });
});