JQuery介绍，包括load(),get(),post()以及赋值等方法（案例分析）(2)

计算机网络

• 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:

$.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){

算法

1. 冒泡排序

2. 选择排序

3. 快速排序

4. 二叉树查找: 最大值、最小值、固定值

5. 二叉树遍历

6. 二叉树的最大深度

7. 给予链表中的任一节点，把它删除掉

8. 链表倒叙

9. 如何判断一个单链表有环

   

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

改变，就去请求该省份的元素

$(“#province”).change(function(){

//获得province的value

var pic=$(this).val();

//post请求

$.post(“/AjaxAndJQuery/findCity”,{pic:pic},function(data,status){

算法

1. 冒泡排序

2. 选择排序

3. 快速排序

4. 二叉树查找: 最大值、最小值、固定值

5. 二叉树遍历

6. 二叉树的最大深度

7. 给予链表中的任一节点，把它删除掉

8. 链表倒叙

9. 如何判断一个单链表有环

   [外链图片转存中…(img-49NQDUiL-1715787747182)]

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】