前后端分离下的从后端拿数据设置单选框组并返回设置产生的数据

最新推荐文章于 2022-07-04 22:25:57 发布

柳衣白卿

最新推荐文章于 2022-07-04 22:25:57 发布

阅读量680

点赞数 1

本文链接：https://blog.youkuaiyun.com/qq_50864152/article/details/124427730

版权

表单代码

<form id="formdata" >
<label>
    <!--单选框组 name属性相同就可-->
    会话Cookie:<input type="radio" class="radio" id="option1" checked="checked" name="radio" value='true'>
    <br/>
    持久Cookie:<input type="radio" class="radio" id="option2" name="radio" value='false'>
</label>
<button id="submit" type="submit">提交</button>
</form>

引入jquery 和ajax

<script src="/jquery/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>

用ajax像后端发送请求获得用户之前设置

//保存用户的设置
let cookieConfig = null
//拿到用户选的设置
$.ajax({
      type: "GET",
      //这里换成你们要请求的url
      url: "http://localhost:8080/getConfig",
      async: false,
      //设为同步
      //请求成功后执行的方法
      success: function (data) {
            //cookieConfig 是bool类型的
             cookieConfig = data
      }
})

注意事项

如果后端项目是spring boot 或者sprig时，处理请求的方法上要加上 @CrossOrigin注解，不然会报跨域请求问题

加载用户之前所作的配置

//获取所有name属性为radio的单选框
var radios=$("input[name='radio']");
if (cookieConfig === true ){
    //如果cookieConfig 为true则勾选第一个单选框
     radios.eq(0).attr("checked", true);
}
else {
     //否则勾选第二个单选框
     radios.eq(1).attr("checked", true);
}

当用户点击提交的时候将用户所作的配置发送给后端

//当用户点击id为submit的标签时触发
$("#submit").click(function () {
        //获取name属性为radio并且处于勾选状态的单选框
        let a= $('input[name="radio"]:checked');
        //如果选中的单选框的id为option1,表达式计算为true,否则为false
        cookieOption = a.attr("id") === "option1";
        data = {cookieOption: cookieOption}
        $.ajax({
            type: "GET",
            data: data,
            //data:发送给后端的数据
            url: "http://localhost:8080/setConfig",
            async: false,
            //设为同步
            success: function (data) {
                alert(cookieOption)
            }
        })
    })

完整代码

<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Config</title>
</head>


<body>
<form id="formdata" >
<label>
    <!--单选框组 name属性相同就可-->
    会话Cookie:<input type="radio" class="radio" id="option1" checked="checked" name="radio" value='true'>
    <br/>
    持久Cookie:<input type="radio" class="radio" id="option2" name="radio" value='false'>
</label>
<button id="submit" type="submit">提交</button>
</form>
</body>

<script src="/jquery/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script >
    let cookieConfig = null
    let cookieOption
    //拿到用户选的设置
    $.ajax({
            type: "GET",
            url: "http://localhost:8080/getConfig",
            async: false,
            //设为同步
            success: function (data) {
                //cookieConfig 是bool类型的
                cookieConfig = data
            }
    })

    var radios=$("input[name='radio']");
    if (cookieConfig === true ){
         radios.eq(0).attr("checked", true);
    }
    else{
         radios.eq(1).attr("checked", true);
    }

  
    $("#submit").click(function () {
        //拿到选中的单选框
        let a= $('input[name="radio"]:checked');
        //如果选中的单选框的id为option1
        cookieOption = a.attr("id") === "option1";
        data = {cookieOption: cookieOption}
        $.ajax({
            type: "GET",
            data: data,
            url: "http://localhost:8080/setConfig",
            async: false,
            //设为同步
            success: function (data) {
                alert(cookieOption)
            }
        })
    })
</script>
</html>