共计 5613 个字符，预计需要花费 15 分钟才能阅读完成。
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:“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
${word}
复制代码
案例 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){
// 有一个数据回调 status 表示返回的状态值，200 表示 ok
// 返回的是一个 XML 文档，需要的是其中的标签中的值
/*
惠州
梅州
*/
// 清空以前查询过的值
$(“#city”).html(“- 请选择 -”);
$(data).find(“city”).each(function(){
// 表示遍历出来的每一个元素都走这一个方法，遍历一次 city，就执行一次 fuction 方法
//.find(“city”)得到所有的 city，然后遍历
//var pic=$(this).children(“”)
var name=$(this).children(“name”).text();
//alert(name);
// 在手册添加栏可以查到
$(“#city”).append(“”+name);
});
});
});
})
复制代码
jsp:
省份:
- 请选择 – 湖北 广东 山东 河南
城市:
- 请选择 –
复制代码
方式二：COntroller 通过 Json 与前端页面交互 说明：可以直接采用以下方式（@ResponseBody）
@RequestMapping(“edit”)
@ResponseBody
/**
自我介绍一下，小编 13 年上海交大毕业，曾经在小公司待过，也去过华为、OPPO 等大厂，18 年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024 年 Web 前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合 3 年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了 95% 以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
最后
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！
可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。
wUIWQ8EE-1712939867422)]
既有适合小白学习的零基础资料，也有适合 3 年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了 95% 以上前端开发知识点，真正体系化！
[外链图片转存中…(img-mDF0RXCN-1712939867423)]
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
最后
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！
可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。
资料领取方式：戳这里前往获取
原文地址: JQuery 介绍，包括 load(),get(),post()以及赋值等方法（案例分析）
