JQuery介绍，包括load(),get(),post()以及赋值等方法

栏目: jQuery · 发布时间: 4年前

内容简介：1、JS是一门前端语言。 2、Ajax是一门技术，它提供了异步更新的机制，使用客户端与服务器间交换数据而非整个页面文档，实现页面的局部更新。 3、jQuery是一个框架，它对JS进行了封装，使其更方便使用。jQuery使得JS与Ajax的使用更方便1.引用JQuery.js文件2.常用方法
- 写少代码,做多事情【write less do more】
- 免费，开源且轻量级的js库，容量很小
 注意：项目中，提倡引用min版的js库
- 兼容市面上主流浏览器，例如 IE，Firefox，Chrome
        注意：jQuery不是将所有JS全部封装，只是有选择的封装
- 能够处理HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步AJAX功能
- 文档手册很全，很详细
- 成熟的插件可供选择
- 提倡对主要的html标签提供一个id属性，但不是必须的
- 出错后，有一定的提示信息
- 不用再在html里面通过<script>标签插入一大堆js来调用命令了
复制代码

3.Ajax与JQuery

JQuery介绍，包括load(),get(),post()以及赋值等方法

1、JS是一门前端语言。 2、Ajax是一门技术，它提供了异步更新的机制，使用客户端与服务器间交换数据而非整个页面文档，实现页面的局部更新。 3、jQuery是一个框架，它对JS进行了封装，使其更方便使用。jQuery使得JS与Ajax的使用更方便

4.使用：

1.引用JQuery.js文件

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
复制代码

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("<%=basePath%>customer/update.action",$("#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层->持久层->获取数据库的信息，再将其返回前端页面。 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script type="text/javascript"src="../js/baidu.js"></script>
<title>Insert title here</title>
</head>
<body background="../105.jpg">
<center>
	<h2>百度一下</h2>
	<input type="text" id="word" style="width:500px;height:50px"/>
	<input type="button" value="搜搜" style="width:80px;height:56px"/>
	<div id="div01" style="position:relative;left:-43px; width:500px;height:300px;border: 1px solid blue;display: none"></div>
</center>
</body>
</html>
复制代码

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<String> 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

<body>
	<table style="width:500px">
		<c:forEach items="${words}" var="word">
			<tr>
				<td>${word}</td>
			</tr>
		</c:forEach>
	</table>
</body>
复制代码

案例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<city> 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文档，需要的是其中的<name>标签中的值
			/*
			 *  <city pic="2">
				 <name>惠州</name>
				</city>
 				<city pic="2">
				 <name>梅州</name>
				</city>
			 */
			//清空以前查询过的值
			$("#city").html("<option value=''>-请选择 -");
			$(data).find("city").each(function(){    
				//表示遍历出来的每一个元素都走这一个方法，遍历一次city，就执行一次fuction方法
				//.find("city")得到所有的city，然后遍历
				//var pic=$(this).children("")
				var name=$(this).children("name").text();
				//alert(name);
				//在手册添加栏可以查到
				$("#city").append("<option value=''>"+name);
			});
		});
	});
})
复制代码

jsp:

<body>
	省份:
	<select name="province" id="province">
		<option value="">-请选择 -
		<option value="1">湖北
		<option value="2">广东
		<option value="3">山东
		<option value="4">河南
	</select>
	城市:
	<select name="city" id="city">
		<option value="">-请选择 -
	</select>
</body>
复制代码

方式二：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<city> 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:

$(function(){
	//1.找到省份元素，一旦发生改变，就去请求该省份的元素
	$("#province").change(function(){
	//获得province的value
	var pic=$(this).val();
	//post请求
	$.post("/AjaxAndJQuery/findCityJson",{pic:pic},function(data,status){
	//有一个数据回调  status表示返回的状态值，200表示ok
	/**
	 * 返回的data是json形式的字符串
	 * [{"name":"广州","pic":2},{"name":"深圳","pic":2},{"name":"惠州","pic":2},{"name":"梅州","pic":2}]
	 */
	//清空以前查询过的值
	$("#city").html("<option value=''>-请选择 -");
	//遍历data，获取到【】中的{}内容，在通过 city.属性 的方式访问其值，其中city自定义，相当于给{}整体封装成一个对象了
	$(data).each(function(index,city){
	$("#city").append("<option value=''>"+city.name);
  	});
    },"json");
    });
})
复制代码

jsp:同上


以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍
高分辨率遥感卫星应用

高分辨率遥感卫星应用

张永 / 科学分社 / 2004-1 / 48.00元

高分辨率遥感卫星应用（成像模型处理算法及应用技术），ISBN：9787030128249，作者：张永生等著一起来看看 《高分辨率遥感卫星应用》 这本书的介绍吧!

码农工具
SHA 加密
SHA 加密

SHA 加密工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2024 码农网 粤ICP备17054400号-3