legend2---开发日志6(后端和前端如何相互配合(比如php,js,元素状态和数据改变))
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())这样的多维数组能用如上方法判断相等吗?当然也可以。
若数组是数字索引的,就要注意一下了,见代码:
$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乱试,直接去看官方文档和使用手册就好了
- $('input').iCheck('check'); //将输入框的状态设置为checked
- $('input').iCheck('uncheck'); //移除 checked 状态
- $('input').iCheck('toggle'); //toggle checked state
- $('input').iCheck('disable'); //将输入框的状态设置为 disabled
- $('input').iCheck('enable'); //移除 disabled 状态
- $('input').iCheck('update'); //apply input changes, which were done outside the plugin
- $('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、代码
legend2---开发日志6(后端和前端如何相互配合(比如php,js,元素状态和数据改变))的更多相关文章
- 循序渐进VUE+Element 前端应用开发(19)--- 后端查询接口和Vue前端的整合
循序渐进VUE+Element 前端应用开发的系列文章中,前面介绍了系统各个功能的处理实现,本篇随笔从一个主线上介绍前后端开发的整合,让我们从ABP框架后端的查询接口的处理,前端API接口调用的封装, ...
- beego-vue URL重定向(beego和vue前后端分离开发,beego承载vue前端分离页面部署)
具体过程就不说,是搞这个的自然会动,只把关键代码贴出来. beego和vue前后端分离开发,beego承载vue前端分离页面部署 // landv.cnblogs.com //没有授权转载我的内容,再 ...
- [Web 前端] mockjs让前端开发独立于后端
cp from : https://www.codercto.com/a/9839.html mock.js 可以模拟ajax数据,拦截ajax请求,返回模拟数据,无需后端返回就可以测试前端程序 ...
- U-Learning 后端开发日志(建设中...)
目录 U-Learning--基于泛在学习的教学系统 项目背景 技术栈 框架 中间件 插件 里程碑 CentOS 7搭建JAVA开发环境 接口参数校验(不使用hibernate-validator,规 ...
- 实战使用Axure设计App,使用WebStorm开发(6) – 迈向后端
系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求 实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目 实战使 ...
- Javaweb项目开发的前后端解耦的必要性
JavaWeb项目为何我们要放弃jsp?为何要前后端解耦?为何要动静分离? 使用jsp的痛点: 1.jsp上动态资源和静态资源全部耦合在一起,服务器压力大,因为服务器会收到各种静态资源的http请求, ...
- 聚焦“云开发圆桌论坛”,大前端Serverless大佬们释放了这些讯号!
4月14日,由云加社区举办的TVP&腾讯云技术交流日云开发专场,暨"腾讯云-云开发圆桌论坛"在北京.深圳两地同步举行. 当天下午,一场主题为"基于大前端和node ...
- spring boot + vue + element-ui全栈开发入门——前后端整合开发
一.配置 思路是通过node的跨域配置来调用spring boot的rest api. 修改config\index.js文件,设置跨域配置proxyTable: proxyTable: { '/ap ...
- spring mvc日期转换(前端到后端,后端到前端)
在做web开发的时候,页面传入的都是String类型,SpringMVC可以对一些基本的类型进行转换,但是对于日期类的转换可能就需要我们配置. 1.如果查询类使我们自己写,那么在属性前面加上@Date ...
随机推荐
- 07: mysql锁和事物隔离
MySQL其他篇 目录: 1.1 MySQL中的事物 1.2 mysql中锁 1.1 MySQL中的事物返回顶部 1.InnoDB事务原理 1. 事务(Transaction)是数据库区别于文件系统的 ...
- 锁(lock)和闩(latch)
开发多用户.数据库驱动的应用时,最大的难点之一是:一方面要力争取得最大限度的并发访问,与此同时还要确保每个用户能以一致的方式读取和修改数据.为此就有了锁定(locking)机制,这也是所有数据库都具有 ...
- struts2 action中字符串转json对象出错 java.lang.NoClassDefFoundError: org/apache/commons/lang/exception/NestableRuntimeException
commons-lang包有错,要么是引入错误,要么是没引入. 报不同错误,引入不同包. commons-beanutils-1.8.0.jar不加这个包 java.lang.NoClassDefFo ...
- Starting MySQL ERROR! Couldn't find MySQL server (/usr/local/mysql/bin/mysqld_safe)
centos7.5 安装mysql数据库报错 问题: [root@db04-54 scripts]# /etc/init.d/mysqld start /etc/init.d/mysqld: line ...
- FireMonkey 源码学习(1)
FireMonkey采用了与VCL不同的机制,很多基础类已经重新编写了,好在一如既往地提供了源代码,故此有机会学习一下. 一.图形引擎 FireMonkey采用了纯图形化技术解决可视化控件,而不是使用 ...
- 05文件合并脚本--By Mark Lutz
''' 合并split.py创建的目录下的所有组分文件以重建文件. 依赖文件名的排序:长度必须一致. ''' import os,sys readsize=1024 def join(fromdir, ...
- FJUT 倒水(倒水问题)题解
题意:开学了, fold拿着两个无刻度, 容量分别是5L和7L的量筒来问Anxdada, 说水是无限的, 并且可以无限次将杯子装满或者清空, 那怎么用这个两个量筒倒出恰好4L水了? 我说简单啊, 先装 ...
- linux网络流量实时监控工具之nload
Install nload on a CentOS/RHEL/Red Hat/Fedora Linux First, turn on EPEL repo on a CentOS or RHEL bas ...
- Could not stop Cortex-M device! please check the JTAG cable的解决办法
今天程序烧录后,进行调试时keil提示:Could not stop Cortex-M device! please check the JTAG cable 如图: 于是我在网上搜了一下, ...
- The more... the more句型
百度文库:https://wenku.baidu.com/view/a7f1067f59fb770bf78a6529647d27284a73374b.html the more ... , the m ...