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

最新推荐文章于 2024-07-18 15:48:23 发布

2401_84153262

最新推荐文章于 2024-07-18 15:48:23 发布

阅读量338

点赞数 3

分类专栏：程序员文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/2401_84153262/article/details/138775604

版权

程序员专栏收录该内容

167 篇文章 0 订阅

订阅专栏

$(“#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层->持久层->获取数据库的信息，再将其返回前端页面。

Insert title here

百度一下

复制代码

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

//有一个数据回调 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

/**

jsp页面中直接接收一个json串，所以直接将对象转换成json数据格式
@param id
@return

public Customer edit(Integer id){

Customer customer = customerService.getCustomerById(id);

return customer;

}

复制代码

但是由于我的案例是使用servlet写的，即需拼装Json串（可以手动拼装或者通过工具类）这里采用的是 JSONArray jsonArray = JSONArray.fromObject(findCity);

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.将其返回

//已Json的形式返回

JSONArray jsonArray = JSONArray.fromObject(findCity);

String json = jsonArray.toString();

System.out.println(json);

//设置返回格式

response.setContentType(“text/html;charset=utf-8”);

response.getWriter().write(json);

} catch (SQLException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

复制代码

js:

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。**

[外链图片转存中…(img-WBhgdMG8-1715536267893)]

[外链图片转存中…(img-IHJaxS9I-1715536267893)]

[外链图片转存中…(img-VcUuFXXY-1715536267894)]

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

2401_84153262

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
JQuery介绍，包括load(),get(),post()以及赋值等方法（案例分析）

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
复制链接

扫一扫