计算机网络
-
HTTP 缓存
-
你知道 302 状态码是什么嘛?你平时浏览网页的过程中遇到过哪些 302 的场景?
-
HTTP 常用的请求方式,区别和用途?
-
HTTPS 是什么?具体流程
-
三次握手和四次挥手
-
你对 TCP 滑动窗口有了解嘛?
-
WebSocket与Ajax的区别
-
了解 WebSocket 嘛?
-
HTTP 如何实现长连接?在什么时候会超时?
-
TCP 如何保证有效传输及拥塞控制原理。
-
TCP 协议怎么保证可靠的,UDP 为什么不可靠?
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
算法
-
链表
-
字符串
-
数组问题
-
二叉树
-
排序算法
-
二分查找
-
动态规划
-
BFS
-
栈
-
DFS
-
回溯算法
2.常用方法 .load()
$(“#div01”).load(“userservlet”); 解释:找到页面id为div01的标签,再加载路径为userservlet的文件,这里指servlet路径。
$(“#div01”) 相当于JavaScript中的document.getElementById(“div01”)
$.get(url,function(data){});
一get请求的方式向服务器传输数据,可以不加function()无需参数返回。 若需添加请求的参数,直接添加在URL上,例如"usernameServlet?name=“eric”; 若需要返回值,则添加一个数据回调函数。
$.post(url,data,callback);
已post方式向服务器提交数据,并返回 url:所处理的控制类的路径 data:像服务器传递的数据,其格式为:{name:“zhangsan”,age=“18”} callback:获取服务器返回的回调函数,格式为function(data,status){},status表示状态,200表示成功。
eg:
. p o s t ( " < .post("<%=basePath%>customer/update.action", .post("<(“#edit_customer_form”).serialize(),function(data){
if(data==“1”){
alert(“客户信息更新成功!”);
}else{
alert(“客户信息更新失败!”);
}
window.location.reload();
});
函数二:
if(confirm(‘确实要删除该客户吗?’)) {
$.post(“<%=basePath%>customer/delete.action”,{“id”:id},function(data){
if(data==“1”){
alert(“客户删除删除成功!”);
}else{
alert(“客户信息删除失败!”);
}
window.location.reload();
});
}
复制代码
注意:上述有两个点: $(“form”).serialize()
jQuery ajax()使用serialize()提交form数据,如果打印 $(“form”).serialize()的值, 格式是:id=12&name=“eric”&age=18&city=“aa”… 那么,问题来了,我们在服务器的Controller中应当如何去接收呢? 用@ResponseBody接收 confirm(’’)
在JavaScript中共有三种弹出框(alert,confirm,prompt)
-
1.alert就是一个警告消息框。
-
2.confirm(“你想让用户确认的信息”)确认消息框 首先:confirm 方法的返回值为 true 或 false
-
3.prompt() 提示消息框 用户可以在段输入一个答案来响应您的提示,返回一个用户的输入值
.val(),.html(),.text()
JQuery获取标签的值和赋值的方法 下面说一下三者之间的区别:
-
$(“#div01”).val()
-
val(),表示获取id为div01标签中的value值;
-
val(“aaa”)针对带有value属性的元素进行赋值, 其实就是给该元素的 value赋值aaa
-
$(“#div01”).html()
-
.html()获取获取id为div01标签体中的值
-
.html(“”《option value=’’>“”) 针对某一个元素,可以使用元素左右包括起来一段值的元素赋值 。如:.html(“《font》 《/font》”)
-
$(“#dov01”).text()
-
.text()作用同html,只是一个支持html代码
-
.text(“aaaaaa”)该方法针对那些可以在两个标签中写值的赋值工作 。 如 :《div》aaaaaaaa《/div》
$.ajax()
提层实现基于Ajax的使用,关键在于内部的参数如何写,这里直接上代码
function editCustomer(id) {
$.ajax({
type:“get”,
url:“<%=basePath%>customer/edit.action”,
data:{“id”:id},
success:function(data) {
$(“#edit_cust_id”).val(data.cust_id);
$(“#edit_customerName”).val(data.cust_name);
$(“#edit_customerFrom”).val(data.cust_source)
$(“#edit_custIndustry”).val(data.cust_industry)
$(“#edit_custLevel”).val(data.cust_level)
$(“#edit_linkMan”).val(data.cust_linkman);
$(“#edit_phone”).val(data.cust_phone);
$(“#edit_mobile”).val(data.cust_mobile);
$(“#edit_zipcode”).val(data.cust_zipcode);
$(“#edit_address”).val(data.cust_address);
}
});
}
复制代码
以上有一个点,那就是返回的数据data,data是有Controller层使用@ResponseBody直接将一个对象以Json的形式返回的。
案例1.仿百度提示
======================================================================
需求:在我们使用百度的时候,往往在输入几个字符后,它就会给我们一个提示了,那么前端页面是如何实现响应的呢?
思路::使用.keyup获取键盘弹起的事件,然后获取输入框的值,即每当键盘弹起后,就获取此时输入框的值,得到输入框的值后将数据发送(Post)到Controller层,Controller调用service层->持久层->获取数据库的信息,再将其返回前端页面。
百度一下
复制代码
js:
//入口函数 以前是 $(document).ready(fuction(){})
//获取键盘弹起的事件
$(function(){
$(“#word”).keyup(function() {
//获取输入框的信息,再上传
// alert(“asd”);
var word=$(this).val();
//alert(word);
$.post(“/AjaxAndJQuery/findServlet”,{words:word},function(data,status){
//alert(data);
//返回的data是一个jsp页面,现在我们把它放在指定的div中
if(word==“”){
$(“#div01”).hide();
}else{
$(“#div01”).show();
$(“#div01”).html(data);
}
});
})
});
复制代码
Controller(这里使用servlet):
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
//获取数据,查询数据库,返回数据值
request.setCharacterEncoding(“utf-8”);
String word = request.getParameter(“words”);
//
findDao findDaoImpl = new findDaoImpl();
List list = findDaoImpl.findInformation(word);
//打印从数据库获取的内容
for (String news : list) {
System.out.println(news);
}
request.setAttribute(“words”, list);
response.setContentType(“text/html;charset=utf-8”);
/**
-
谁请求,它就把页面返回给谁,一般我们都是用浏览器去访问,它就把页面返回给浏览器
-
当我用JQuery去访问,它就把数据返回给JQuery,放在data数据里面
*/
request.getRequestDispatcher(“/JQueryFind/list.jsp”).forward(request, response);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
复制代码
注意:此处返回的是一个jsp页面,也就是说,在JQuery中的data是一个jsp页面 list.jsp
<c:forEach items=“${words}” var=“word”>
${word}</c:forEach>
复制代码
案例2.省市联动
=====================================================================
需求:当我们在注册时,可能会出现选城市的情况,比如当你province选择湖北后,对应的city就自动刷新为湖北下面的城市,那么其前端页面的逻辑是如何实现的呢?
思路: 首先找到省份元素的标签,然后根据.change事件,当其发生改变时,将其value值通过$.post()发送至Controller层,控制层返回结果(以XML或Json)的方式。
下面介绍第一种:Controller层通过XML与前端页面
Controller(servlet实现)
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
//1.获取参数
int pic = Integer.parseInt(request.getParameter(“pic”));
//2.获取城市列表
cityDao cityImpl = new cityDaoImpl();
List findCity = cityImpl.findCity(pic);
//3.将其返回
//已XML的形式返回
XStream xstream=new XStream();
//设置类别名
xstream.alias(“city”, city.class);
//将类成员作为属性
xstream.useAttributeFor(city.class, “pic”);
String xml = xstream.toXML(findCity);
//设置返回格式
response.setContentType(“text/xml;charset=utf-8”);
response.getWriter().write(xml);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
复制代码
注意: XStream xstream=new XStream();将对象转换为XML的形式或者XML转为对象的格式。 具体使用找了一篇写的比较详细的博客:
www.cnblogs.com/mengfanrong…
JS:
$(function(){
//1.找到省份元素,一旦发生改变,就去请求该省份的元素
$(“#province”).change(function(){
//获得province的value
var pic=$(this).val();
//post请求
$.post(“/AjaxAndJQuery/findCity”,{pic:pic},function(data,status){
算法
-
冒泡排序
-
选择排序
-
快速排序
-
二叉树查找: 最大值、最小值、固定值
-
二叉树遍历
-
二叉树的最大深度
-
给予链表中的任一节点,把它删除掉
-
链表倒叙
-
如何判断一个单链表有环
由于篇幅限制小编,pdf文档的详解资料太全面,细节内容实在太多啦,所以只把部分知识点截图出来粗略的介绍,每个小节点里面都有更细化的内容!
如果你觉得对你有帮助,可以戳这里获取:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
改变,就去请求该省份的元素
$(“#province”).change(function(){
//获得province的value
var pic=$(this).val();
//post请求
$.post(“/AjaxAndJQuery/findCity”,{pic:pic},function(data,status){
算法
-
冒泡排序
-
选择排序
-
快速排序
-
二叉树查找: 最大值、最小值、固定值
-
二叉树遍历
-
二叉树的最大深度
-
给予链表中的任一节点,把它删除掉
-
链表倒叙
-
如何判断一个单链表有环
[外链图片转存中…(img-49NQDUiL-1715787747182)]
由于篇幅限制小编,pdf文档的详解资料太全面,细节内容实在太多啦,所以只把部分知识点截图出来粗略的介绍,每个小节点里面都有更细化的内容!
如果你觉得对你有帮助,可以戳这里获取:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】