legend2---开发日志6（后端和前端如何相互配合(比如php，js，元素状态和数据改变)）

时间：2022-04-16 23:21:22

legend2---开发日志6（后端和前端如何相互配合(比如php，js，元素状态和数据改变)）

一、总结

一句话总结：php给元素初始状态，js根据这个状态做初始化和后续变化，使用vue真的很方便（php给vue数据就好，其它全交给vue了）

vue特别好用 php给数据或者初始状态 js根据这个状态做初始化和后续变化

1、一种可行的控制html元素状态的方式是什么（比如收藏按钮的收藏和未收藏状态）？

元素加状态属性字段

可以在元素上面加一个属性字段，状态改变，这个属性字段也改变，根据这个属性字段就可以知道当前元素状态

比如题目的收藏与未收藏状态，php初始将这个状态给div，然后js根据这个状态来控制元素收藏与未收藏显示

2、jquery 取消radio选中？

removeAttr("checked")
attr("checked",false)
$("#rdo1").removeAttr("checked");

$("input:radio[name="analyshowtype"]").attr("checked",false);

3、jquery如何获取所选的多个checkbox的值？

:check找所有值 .each()遍历每个 .push()存值

找到所在题目选中的checkbox，然后遍历，然后将结果push进数组即可

 <script>

     //【提交答案】逻辑

     $(function () {

         $('.submit_question').click(function () {

             //步骤一：获取参数

             let bq_id=$(this).attr('bq_id');

             console.log(bq_id);

             let question_index_num=$(this).attr('question_index_num');

             console.log(question_index_num);

             let question_num=parseInt(question_index_num)+1;

             console.log(question_num);

             //步骤二：获取用户答案

             //拼接多选框名字

             let checkbox_class="question_option_"+question_num;

             console.log(checkbox_class);

             var user_options=[];

             $("input."+checkbox_class+":checked").each(function () {

                 user_options.push($(this).val());

             });

             //let user_options=$("input[type=checkbox]:checked").val();

             console.log(user_options);

         });

     });

 </script>

4、thinkphp获取全部类型（无论post，get方式等）的传入参数？

Request::instance()->param()

可以直接获取Request的param()即可获得全部参数

dump(Request::instance()->param());

dump(Request::instance());
  ["param":protected] => array(2) {

    ["/index/blog_do_question/submit_question_html"] => string(0) ""

    ["user_options"] => array(2) {

      [0] => string(1) "2"

      [1] => string(1) "4"

    }

  }

  ["get":protected] => array(1) {

    ["/index/blog_do_question/submit_question_html"] => string(0) ""

  }

  ["post":protected] => array(1) {

    ["user_options"] => array(2) {

      [0] => string(1) "2"

      [1] => string(1) "4"

    }

  }

5、ajax为什么可以接受键值对和普通索引数组作为参数，而不能接受键值对数组成为参数？

拼接到url 参数本质是键值对
普通索引数组可化为键值对
键值对数组无法和数组名化为键值对

因为参数相当于是要拼接到url上，键值对参数好拼接，普通索引数组通过数组名和数组里的值也可以拼接为键值对，但是键值对组成的数组却不行，

而且你看post提交的时候checkbox也是普通索引数组

data Object,String

发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 "&foo=bar1&foo=bar2"。

6、php比较两个数组是否相等？

== ===

如何判断两个数组相等呢？其实很简单，用 == 或者 === 就可以了
php手册里说明如下：

那像 array('k'=>array())这样的多维数组能用如上方法判断相等吗？当然也可以。
若数组是数字索引的，就要注意一下了，见代码：

< ?php
$a = array("apple", "banana");
$b = array(1 => "banana", "0" => "apple");

var_dump($a == $b); // bool(true)
var_dump($a === $b); // bool(false)
?>

除了==这种数组操作符之外，还有其他比较绕的方法来判断。比如说，利用array_diff($a, $b)来比较两个数组的差集，如果差集是空数组的话就相等了。

7、移除iCheck选项控件的方法是什么？

官方文档 使用手册 .iCheck('')

自己完全可以不jquery乱试，直接去看官方文档和使用手册就好了

  1. $('input').iCheck('check');   //将输入框的状态设置为checked
  2. $('input').iCheck('uncheck'); //移除 checked 状态
  3. $('input').iCheck('toggle');  //toggle checked state
  4. $('input').iCheck('disable'); //将输入框的状态设置为 disabled
  5. $('input').iCheck('enable');  //移除 disabled 状态
  6. $('input').iCheck('update');  //apply input changes, which were done outside the plugin
  7. $('input').iCheck('destroy'); //移除iCheck样式

8、js数组转字符串？

array.join(',');
var arr = [1,2,3,4,'巴德','merge'];

var str = arr.join(',');

console.log(str); // 1,2,3,4,巴德,merge

9、view端用php来初始化元素（标签）的显示状态好么（比如答题页面）？

不是很好  php给元素加状态 js根据状态做初始化和后续变化
用vue做数据绑定

其实不是很好，可以用php给元素加状态，然后用js来做初始化或者后续的变化显示

其实也可以完全交给vue，这样会省很多事

10、如何解决get方式请求题目列表时如果url中带上换题参数，那么页面跳出再跳回来（比如跳回博客园地址）都会自动换题？

初始设置【允许换题参数】0   需要换题时ajax将【允许换题参数】置为1  【换题参数】结合【允许换题参数】才能换题  多次通信

可以在缓存中设置$val['allow_change_question_list']=0;//默认不允许切换题目列表，要点【整轮切换】按钮才行，直接url不行

然后需要切换题目的时候，先ajax把缓存中 'allow_change_question_list' 改为1

页面切换题目不仅要有【换题参数】，还要有【允许换题参数】

其实也就是多次通信

二、内容在总结中

1、相关知识

 

2、代码

 

相关文章