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

总结:

  • 函数式编程其实是一种编程思想,它追求更细的粒度,将应用拆分成一组组极小的单元函数,组合调用操作数据流;

  • 它提倡着 纯函数 / 函数复合 / 数据不可变, 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用;

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Tips:

其实我们很难也不需要在面试过程中去完美地阐述出整套思想,这里也只是浅尝辄止,一些个人理解而已。博主也是初级小菜鸟,停留在表面而已,只求对大家能有所帮助,轻喷🤣;

我个人觉得: 这些编程范式之间,其实并不矛盾,各有各的 优劣势

理解和学习它们的理念与优势,合理地 设计融合,将优秀的软件编程思想用于提升我们应用;

所有设计思想,最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用,开发更为高效和安全

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

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层,控制层返回结果(以XMLJson)的方式。

下面介绍第一种: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

总结:

  • 函数式编程其实是一种编程思想,它追求更细的粒度,将应用拆分成一组组极小的单元函数,组合调用操作数据流;

  • 它提倡着 纯函数 / 函数复合 / 数据不可变, 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用;

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Tips:

其实我们很难也不需要在面试过程中去完美地阐述出整套思想,这里也只是浅尝辄止,一些个人理解而已。博主也是初级小菜鸟,停留在表面而已,只求对大家能有所帮助,轻喷🤣;

我个人觉得: 这些编程范式之间,其实并不矛盾,各有各的 优劣势

理解和学习它们的理念与优势,合理地 设计融合,将优秀的软件编程思想用于提升我们应用;

所有设计思想,最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用,开发更为高效和安全

  • 26
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值