jQuery_AJAX_JSON

最新推荐文章于 2021-08-05 22:20:12 发布

BigData小白

最新推荐文章于 2021-08-05 22:20:12 发布

阅读量518

点赞数

分类专栏：前端文章标签： jQuery AJAX JSON

本文链接：https://blog.csdn.net/Bigbuibuibui/article/details/100157058

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文详细介绍了jQuery的插件机制，特别是表单校验插件validator的使用，包括基本语法、校验规则和自定义校验方法。接着探讨了AJAX的基础知识，包括同步与异步方式的区别，以及原生和jQuery的AJAX实现。同时，文章讲解了JSON数据格式的定义、语法和转换工具。最后，通过两个综合案例展示了如何利用jQuery的AJAX检测用户名是否已被注册和实现内容自动补全功能。

摘要由CSDN通过智能技术生成

JQuery&AJAX&JSON

第1章 jQuery的插件

1.1 jQuery的插件机制

jQuery插件机制概述

jQuery插件的机制很简单，就是利用jQuery提供的jQuery.fn.extend()和jQuery.extend()方法，扩展jQuery的功能。

jQuery插件机制语法

语法	解释
jQuery.fn.extend(object)	对jQuery对象进行方法扩展
jQuery.extend(object)	对jQuery全局进行方法扩展

对jQuery对象进行方法扩展

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//普通方式--点击选中复选框
			function checkFn(){
				$("input[type='checkbox']").prop("checked",true);
			}
			//普通方式--点击取消复选框选中
			function uncheckFn(){
				$("input[type='checkbox']").prop("checked",false);
			}
			
            //对jQuery的函数进行扩展
			jQuery.fn.extend({
				//定义全选函数
				check:function(){
					$(":checkbox").prop("checked",true);
				},
				//定义全不全函数
				uncheck:function(){
					$(":checkbox").prop("checked",false);
				}
			});
			
			//插件方式--点击选中复选框
			function checkFn1(){
				//任何一个jQuery对象都可以调用
				$("#btn1-check").check();
			}
			
			//插件方式--点击选中复选框
			function uncheckFn2(){
				$("#btn-check").uncheck();
			}
		</script>
	</head>
	<body>
		<input id="btn-check" type="button" value="点击选中复选框" onclick="checkFn()">
		<input id="btn-uncheck" type="button" value="点击取消复选框选中" onclick="uncheckFn()">
		<br/>
		<input type="checkbox" value="football">足球
		<input type="checkbox" value="basketball">篮球
		<input type="checkbox" value="volleyball">排球
	
	</body>
</html>

对jQuery全局进行方法扩展

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$.extend({
				  //定义js对象的min属性，值是一个函数，返回a与b比较的最小值
				  min: function(a, b) { return a < b ? a : b; },
				  //定义js对象的max属性，值是一个函数，返回a与b比较的最大值
				  max: function(a, b) { return a > b ? a : b; }
			});
			
			alert($.max(3,5));
		</script>
	</head>
	<body>
		
	</body>
</html>

1.2 表单校验插件validator

表单校验插件概述

网络上有许多成熟的插件共使用者参考，插件就是将jquery实现的常用操作进行封装，封装后的“小框架“就可以叫做插件，按照插件的语法去操作可以实现很多复杂的功能，而我们需要做的是学会该插件的使用语法即可。表单校验插件是按照一定的语法编写代码，可以使用简单的代码完成复杂的表单校验工作。

表单校验插件的基本语法

开发步骤

下载jquery-validation插件
将该插件（也就是一个js文件）导入到我们的工程中
在要使用校验插件的html中引入该js文件
编写表单校验的代码（语法）
```
$("form表单的选择器").validate({
    rules:{
      表单项name值:校验规则，
      表单项name值:校验规则... ...
    },
    messages:{
      表单项name值:错误提示信息，
      表单项name值:错误提示信息... ...
    }
});
```
其中，rules是对表单项校验的规则，messages是对应的表单项校验失败后的错误提示信息

注意，当错误提示信息不按照我们预想的位置显示时，我们可以按照如下方式进行设置自定义错误显示标签放在我们需要显示的位置，当此表单项验证不通过时会将此信息自动显示出来，jQuery验证插件会自动帮助我们控制它的显示与隐藏
```
<lable for="html元素name值" class="error" style="display:none">错误信息</lable>
```
如果设置了错误lable标签就不必在messages中设置此表单项错误提示信息了

常用的校验规则

校验类型	取值	描述
required	true|false	必填字段
email	true	邮件地址
url		路径
date	true	校验日期的有效性
dateISO	true	校验日期格式（YYYY-MM-dd）
number		数字（负数，小数）
digits	true	整数
minlength	数字	最小长度
maxlength	数字	最大长度
rangelength	[minL,maxL]	长度范围
min		最小值
max		最大值
range	[min,max]	值范围
equalTo:"#id"	jQuery表达式	两个值相同
remote	url路径	ajax校验

表单校验插件自定义校验方法

如果预定义的校验规则尚不能满足需求的话可以进行自定义校验规则：

自定义校验规则步骤如下：

使用$.validator.addMethod(“校验规则名称”,function(value,element,params)){}
在rules中通过校验规则名称使用校验规则
在messages中定义该规则对应的错误提示信息其中
- value是校验组件的value值
- element是校验组件的节点对象
- params是校验规则的参数

代码实现

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>我的jquery表单校验页面</title>
        
		<style type="text/css">
			p{text-align: center;font-size:24px;}
			table{margin: 0 auto;border: 0;}
			table tr{height:40px;border:0;}
			table tr td{padding:0 14px;border:1px solid #999}
			.error{color:red}
		</style>
		
        <script type="text/javascript" src="jquery-3.3.1.js"></script>
        <script type="text/javascript" src="jquery.validate.js"></script>
       	<script type="text/javascript">
       		
       		$(function(){
       			//自定义校验规则
       			/*
       			 * 参数：
       			 * 	第一个 规则名称
       			 * 	第二个 规则的实现逻辑 匿名函数
       			 */
       			$.validator.addMethod("cardlength",function(value,element,param){
       				//校验输入的长度是否满足15或18
       				if(value.trim().length!=param[0]&&value.trim().length!=param[1]){
       					return false; //代表该校验器不通过  显示该校验规则对应的错误信息
       				}
       				return true;
       			});
       			
       			
       			$.validator.addMethod("card15",function(value,element,param){
       				//校验15位的规则是否正确  --- 都是数字
       				var regExp15 = /^[0-9]{15}$/;
       				if(value.trim().length==15){
       					//校验格式
       					return regExp15.test(value.trim());
       				}
       				return true;//放行 不归该校验器校验 
       			});
       			
       			$.validator.addMethod("card18",function(value,element,param){
       				if(param){
       					//校验15位的规则是否正确  --- 都是数字
	       				var regExp18 = /^[0-9]{18}|[0-9]{17}X$/;
	       				if(value.trim().length==18){
	       					//校验格式
	       					return regExp18.test(value.trim());
	       				}
       				}
       				return true;//放行 不归该校验器校验 
       			});
       			
       			$("#empForm").validate({
	       			rules:{
	       				realname:"required",
	       				username:{
	       					required:true,
	       					rangelength:[5,8]
	       				},
	       				psw:{
	       					required:true,
	       					minlength:6,
	       					maxlength:12
	       				},
	       				psw2:{
	       					required:true,
	       					minlength:6,
	       					maxlength:12,
	       					equalTo:"#psw"
	       				},
	       				gender:{
	       					required:true
	       				},
	       				age:{
	       					required:true,
	       					range:[26,50]
	       				},
	       				edu:{
	       					required:true
	       				},
	       				birthday:{
	       					required:true,
	       					dateISO:true,
	       					date:true
	       				},
	       				checkbox1:{
	       					required:true
	       				},
	       				email:{
	       					email:true
	       				},
	       				card:{
	       					required:true,
	       					cardlength:[15,18],
	       					card15:true,
	       					card18:true
	       				}
	       			},
	       			messages:{
	       				realname:"真实姓名必须写",
	       				username:{
	       					required:"用户名必须写",
	       					rangelength:"长度在5-8之间"
	       				},
	       				psw:{
	       					required:"密码必须写",
	       					minlength:"最小是6位",
	       					maxlength:"最大是12位"
	       				},
	       				psw2:{
	       					required:"密码必须写",
	       					minlength:"最小是6位",
	       					maxlength:"最大是12位",
	       					equalTo:"密码输入不一致"
	       				},
	       				age:{
	       					required:"年龄必须写",
	       					range:"年龄必须在26-50之间"
	       				},
	       				edu:{
	       					required:"必须选择一个"
	       				},
	       				birthday:{
	       					required:"生日必须填写",
	       					dateISO:"日期格式不正确",
	       					date:"日期非法"
	       				},
	       				email:{
	       					email:"邮箱格式不正确"
	       				},
	       				card:{
	       					required:"身份证必须填写",
	       					cardlength:"身份证长度是15或18位",
	       					card15:"15位的身份证必须都是数字",
	       					card18:"18位的身份证必须都是数字或末尾是X"
	       				}
	       			}
	       		});
       		});
       		
       		
       		
       	</script>

</head>
<body>
    <p>员工信息录入</p>
	<form name="empForm" id="empForm" method="post" action="test.html">
		<table border=1>
			<tr>
				<td>真实姓名(不能为空 ,没有其他要求)</td>
				<td><input type="text" id="realname" name="realname" />
				</td>
			</tr>
			<tr>
				<td>登录名(登录名不能为空,长度应该在5-8之间,可以包含中文字符(一个汉字算一个字符)):</td>
				<td><input type="text" id="username" name="username" /></td>
			</tr>
			 <tr> 
		      <td>密码(不能为空,长度6-12字符或数字,不能包含中文字符):</td>
		      <td><input type="password" id="psw"  name="psw" /></td>
		    </tr>
		    <tr> 
		      <td>重复密码密码(不能为空,长度6-12字符或数字,不能包含中文字符):</td>
		      <td><input type="password" id="psw2" name="psw2" /></td>
		    </tr>
		    <tr>
				<td>性别(必选其一)</td>
				<td>
				    <input  type="radio" id="gender_male" value="m" name="gender"/>&nbsp;男
				    <input  type="radio" id="gender_female" value="f" name="gender"/>&nbsp;女
				    <label class="error" for="gender" style="display: none;">必须选择一个性别						</label>
				</td>
			</tr>
			<tr>
				<td>年龄(必填26-50):</td>
				<td><input type="text" id="age" name="age" /></td>
          	</tr>
		    <tr> 
		      <td>你的学历:</td>
		      <td> <select name="edu" id="edu">
			          <option value="">－请选择你的学历－</option>
			          <option value="a">专科</option>
			          <option value="b">本科</option>
			          <option value="c">研究生</option>
			          <option value="e">硕士</option>
			          <option value="d">博士</option>
		          </select>
			  </td>
		    </tr>
			<tr> 
              <td>出生日期(1982/09/21):</td>
               <td><input type="text" id="birthday"  name="birthday" value="" /></td>
            </tr>
		   	<tr> 
		      <td>兴趣爱好:</td>
		      <td colspan="2"> 
			      <input type="checkbox" name="checkbox1" id="qq1"/>&nbsp;乒乓球 &nbsp;
		          <input type="checkbox" name="checkbox1" id="qq2" value="1" />&nbsp;羽毛球 
		          <input type="checkbox" name="checkbox1" id="qq3" value="2" />&nbsp;上网
		          <input type="checkbox" name="checkbox1" id="qq4" value="3" />&nbsp;旅游
		          <input type="checkbox" name="checkbox1" id="qq5" value="4" />&nbsp;购物
		          <label class="error" for="checkbox1" style="display: none;">必须选一个</label>
			  </td>
		    </tr>
			<tr> 
			      <td align="left">电子邮箱:</td>
			      <td><input type="text" id="email" name="email" /></td>
			</tr>
			<tr> 
			      <td align="left">身份证(15-18):</td>
			      <td><input type="text" id="card" name="card" /></td>
			</tr>
			<tr>
				<td></td>
				<td><input type="submit"  name="firstname"  id="firstname" value="保存"></td>
			</tr>
		</table>
</form>
</body>
</html>

第2章 ajax概述

2.1 什么是ajax

Ajax 即"Asynchronous Javascript And XML"（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

2.2 AJAX的应用场景

ajax的应用场景很多，常见的应用场景如下：

检查用户名是否已经被注册

很多站点的注册页面都具备自动检测用户名是否存在的友好提示，该功能整体页面并没有刷新，但仍然可以异步与服务器端进行数据交换，查询用户的输入的用户名是否在数据库中已经存在。

省市二联下拉框联动

很多站点都存在输入用户地址的操作，在完成地址输入时，用户所在的省份是下拉框，当选择不同的省份时会出现不同的市区的选择，这就是最常见的省市联动效果。

内容自动补全

不管是专注于搜索的百度，还是站点内商品搜索的京东，都有搜索功能，在i搜索框输入查询关键字时，整个页面没有刷新，但会根据关键字显示相关查询字条，这个过程是异步的。

百度的搜索补全功能：

京东的搜索补全功能：

2.3 同步方式与异步方式的区别

同步方式发送请求

发送一个请求，需要等待响应返回，然后才能够发送下一个请求，如果该请求没有响应，不能发送下一个请求，客户端会处于一直等待过程中。(卡死)

异步方式发送请求

发送一个请求，不需要等待响应返回，随时可以再发送下一个请求，即不需要等待。

第3章 js原生的ajax

3.1 js原生的ajax的开发步骤

1）创建Ajax引擎对象

2）为Ajax引擎对象绑定监听服务器变化的事件

设置回调函数(自定义函数,服务器响应成功后,AJAX自动调用函数)

3）绑定提交地址

4）发送请求

5）接受响应数据

3.2 js原生的ajax的代码实现

js代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript">
        function butOnclick() {
            //1.获取AJAX对象
            var xmlhttp = new XMLHttpRequest();
            //2.给AJAX对象添加监听AJAX引擎状态变化的事件,并设置事件的回调函数
            xmlhttp.onreadystatechange=function()
            {         
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    // 5.获取服务器响应的数据
                    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                }
            }

            //3.绑定要发送到服务器的地址
            xmlhttp.open("GET","${pageContext.request.contextPath}/js_ajax",true);

            //4.把AJAX请求发送到服务器
            xmlhttp.send();
        }
    </script>
</head>
<body>
    <input type="button" value="AJAX异步提交" onclick="butOnclick()"/>
    <div id="myDiv"></div>
</body>
</html>

Servlet代码

@WebServlet(urlPatterns = "/js_ajax")
public class Demo01JS_AJAXServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //给客户端响应数据
        response.setContentType("text/htm;charset=UTF-8");
        response.getWriter().write("服务器接收到了AJAX的异步请求!");
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
}

第4章 jQuery框架的ajax

4.1 jQuery框架的ajax简介

jquery是一个优秀的js框架，自然对js原生的ajax进行了封装，封装后的ajax的操作方法更简洁，功能更强大，与ajax操作相关的jquery方法有如下几种，但开发中经常使用的有三种：

请求方式	语法
GET请求	$.get(url, [data], [callback], [type])
POST请求	$.post(url, [data], [callback], [type])
AJAX请求	$.ajax([settings])

4.2 GET请求方式

概述

通过远程 HTTP GET 请求载入信息。这是一个简单的 GET 请求功能，如需复杂的ajax参数设置请使用$.ajax。

语法

jQuery.get(url, [data], [callback], [type])

其中，参数说明如下：

参数名称	解释
url	请求的服务器端url地址
data	发送给服务器端的请求参数，格式可以是key=value
callback	回调函数,服务器响应成功后,AJAX自动调用函数
type	预期的返回数据的类型，取值可以是 xml, html, script, json, text, _defaul等

代码

js代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
	function sendRequest(){
		$.get(
			"/AjaxDemo/ajaxServlet",
			"name=haohao&age=33",
			function(data){
				alert(data);
			},
			"text"
		);
	}
</script>
</head>
<body>
	<input type="button" value="ajax异步访问服务器端" onclick="sendRequest()">
</body>
</html>

Servlet代码

package com.itheima.servlet;

@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//获得请求参数
		String name = request.getParameter("name");
		String age = request.getParameter("age");
		response.getWriter().write("ajax response data ..."+ name +"..."+age);
	}
	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

4.3 POST请求方式

概述

通过远程 HTTP POST 请求载入信息。这是一个简单的 POST 请求功能，如需复杂的ajax参数设置请使用$.ajax。

语法

jQuery.post(url, [data], [callback], [type])

其中，参数说明如下：

参数名称	解释
url	请求的服务器端url地址
data	发送给服务器端的请求参数，格式可以是key=value
callback	回调函数,服务器响应成功后,AJAX自动调用函数
type	预期的返回数据的类型，取值可以是 xml, html, script, json, text, _defaul等

代码

代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
	function sendRequest(){
		$.post(
			"/AjaxDemo/ajaxServlet",
			"name=haohao&age=33",
			function(data){
				alert(data);
			},
			"text"
		);
	}
</script>
</head>
<body>
	<input type="button" value="ajax异步访问服务器端" onclick="sendRequest()">
</body>
</html>

Servlet代码

package com.itheima.servlet;

@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//获得请求参数
		String name = request.getParameter("name");
		String age = request.getParameter("age");
		response.getWriter().write("ajax response data ..."+ name +"..."+age);
	}
	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

4.4 AJAX请求方式

概述

通过 HTTP 请求加载远程数据。jQuery 底层 AJAX 实现。简单易用的高层实现见get和post方法。$.ajax()方法可以更加详细的设置底层的参数。

语法

jQuery.ajax([settings])

其中，settings是一个js字面量形式的对象，格式是{name:value,name:value… …}，常用的name属性名如下：

属性名称	解释
url	请求的服务器端url地址
async	(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false
data	发送到服务器的数据，可以是键值对形式 k=v&k=v
type	(默认: “GET”) 请求方式 (“POST” 或 “GET”)，默认为 “GET”
dataType	预期的返回数据的类型，取值可以是 xml, html, script, json, text, _defaul等
success	请求成功后的回调函数
error	请求失败时调用此函数

代码

js代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
	function sendRequest(){
		$.ajax({
			url:"/AjaxDemo/ajaxServlet",
			async:true,
			data:"name=haohao&age=33",
			type:"GET",
			dataType:"text",
			success:function(data){
				alert(data);
			},
			error:function(){
				alert("数据没有成功返回!")
			}
		});
	}
</script>
</head>
<body>
	<input type="button" value="ajax异步访问服务器端" onclick="sendRequest()">
</body>
</html>

Servlet代码

package com.itheima.servlet;

@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//获得请求参数
		String name = request.getParameter("name");
		String age = request.getParameter("age");
		response.getWriter().write("ajax response data ..."+ name +"..."+age);
	}
	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

第5章 json数据格式

5.1 什么是json

JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。就是说不同的编程语言JSON数据是一致的。JS原生支持JSON.简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

5.2 json的语法格式

json对象有三种数据格式，分别如下：

类型	语法	解释
对象类型	{“key1”:value,“key2”:value,“key3”:value…}	其中key是字符串类型，而value是任意类型
数组/集合类型	[value,value,value…]	其中value是任意类型
混合类型	[{},{}… …] 或 {“key”:[]… …}	对象格式和数组格式可以互相嵌套

{ “k1”:obj,“k2”: [o1,o2, {“k3”:o3} ] } [o1,o2, {“k”:v,“k2”: [03,04] } ]

5.3 json格式和json解析练习

练习1

<html>
  <head>
    <title>json01</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  <body>

  </body>
  
  <script language="JavaScript">
	/**
	 * 案例一
	 *  var person={key:value,key:value}
	 *  
	 * class Person{
	 * 	  String firstname = "张";
	 *    String lastname = "三丰";
	 *    Integer age = 100;
	 * }
	 * 
	 * Person p = new Person();
	 * System.out.println(p.firstname);
	 */
	
	 //json的定义
	 var person = {"firstname":"张","lastname":"三丰","age":100};
	 
	 //json解析
	 alert(person.firstname);
	 alert(person.lastname);
	 alert(person.age);
	
  </script>
</html>

练习2

<html>
<head>
<title>json02</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>

</body>

<script language="JavaScript">
  	/**
	 * 案例二
	 *  [{key:value,key:value},{key:value,key:value}]
	 *  
	 */
	var json = [
					{"firstname":"张","lastname":"三丰","age":100},
					{"firstname":"张","lastname":"翠山","age":58},
					{"firstname":"张","lastname":"无忌","age":23}
	             ];
  	
  	for(var i=0;i<json.length;i++){
  		alert(json[i].lastname);
  	}
 
  </script>
</html>

练习3

<html>
  <head>
    <title>json03</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  <body>

  </body>
  
  <script language="JavaScript">
   /**
	 * 案例三
	 * {
	 *   "param":[{key:value,key:value},{key:value,key:value}]
	 * }
	 *  
	 *  
	 */
	 
	 var json = {
			"baobao":[
			          	{"name":"小双","age":18,"addr":"扬州"},
			          	{"name":"建宁","age":18,"addr":"北京海淀"},
			          	{"name":"龙儿","age":38,"addr":"香港"},
			          	{"name":"阿珂","age":17,"addr":"台湾"}
			          ]
	 }
	 
	 //全取
	 for(var i=0;i<json.baobao.length;i++){
		 alert(json.baobao[i].name);
	 }
	
  </script>
</html>

练习4

<html>
  <head>
    <title>insertBefore.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  <body>

  </body>
  
  <script language="JavaScript">
   /**
	 * 案例四
	 * {
	 *   "param1":[{key:value,key:value},{key:value,key:value}],
	 *   "param2":[{key:value,key:value},{key:value,key:value}],
	 *   "param3":[{key:value,key:value},{key:value,key:value}]
	 * }
	 *  
	 *  
	 */
	 var json = {
				"baobao":[
				          	{"name":"小双","age":18,"addr":"扬州"},
				          	{"name":"建宁","age":18,"addr":"北京海淀"},
				          	{"name":"龙儿","age":38,"addr":"香港"},
				          	{"name":"阿珂","age":17,"addr":"台湾"}
				          ],
				"haohao":[
							{"name":"楠楠","age":23,"addr":"北京昌平修正"},
							{"name":"倩倩","age":18,"addr":"上海"}
				          ]
		 }
	 
	 
	 //娶楠楠
	 alert(json.haohao[0].name);

  </script>
</html>

5.4 json的转换工具

json转换工具的概述

json的转换工具是通过java封装好的一些jar工具包，直接将java对象或集合转换成json格式的字符串。

常见的json转换工具

工具名称	介绍
Jsonlib	Java 类库，需要导入的jar包较多
Gson	google提供的一个简单的json转换工具
Fastjson	alibaba技术团队提供的一个高性能的json转换工具
Jackson	开源免费的json转换工具，springmvc转换默认使用jackson

开发步骤

1）导入json相关jar包

[外链图片转存失败(img-RBjgaCpo-1567147580371)(img\11.png)]

2）创建java对象或集合

使用jackson的ObjectMapper对象的writeValueAsString方法进行转换

转换代码实现

package com.itheima.json;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;

public class JacksonDemo {

	public static void main(String[] args) throws JsonProcessingException {
		
		//创建User对象
		User user = new User();
		user.setId("100");
		user.setUsername("haohao");
		user.setAge(33);
		//创建List集合
		List<String> arr = new ArrayList<>();
		arr.add("传智播客");
		arr.add("黑马程序员");
		arr.add("酷丁鱼");
		//创建Map集合
		Map<String,User> map = new HashMap<>();
		map.put("user", user);
		
		//转换
		ObjectMapper om = new ObjectMapper();
		String userJson = om.writeValueAsString(user);
		String arrJson = om.writeValueAsString(arr);
		String mapJson = om.writeValueAsString(map);
		
		System.out.println(userJson);
		System.out.println(arrJson);
		System.out.println(mapJson);
		
	}	
}

第6章综合案例

6.1 综合案例：检测用户名是否已经被注册

需求

在用户注册页面，输入用户名，当用户名输入框失去焦点时，发送异步请求，将输入框的用户名传递给服务器端进行是否存在的校验。

代码实现

jsp代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head></head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>会员注册</title>
<script src="jquery-3.3.1.js" type="text/javascript"></script>

<script type="text/javascript">
	
	function checkUsername(obj){
		//获得该输入框的值
		var username = $(obj).val();
		//将username异步传递给服务器端进行校验 
		$.post(
			"${pageContext.request.contextPath}/user",		
			{"username":username},
			function(data){
				//判断data是true还是false字符串
				if(data.isExist){
					//输入的该用户名已经存在 给提示
					$("#usernameInfo").html("输入的该用户名已经存在").css("color","red");
				}else{
					$("#usernameInfo").html("该用户名可以使用").css("color","green");
				}
			},
			"json"
		);
	}
	
</script>


</head>
<body>
	<div>
		<font>会员注册</font>USER REGISTER
		<form class="form-horizontal" style="margin-top: 5px;">
			用户名<input type="text" name="username" onblur="checkUsername(this)" placeholder="请输入用户名">
			<span id="usernameInfo" style="color:red"></span><br/>
			密码<input type="password" placeholder="请输入密码"><br/>
			<input type="submit" value="注册"/>
		</form>
	</div>
</body>
</html>

Servlet代码

package com.itheima.servlet;

@WebServlet("/user")
public class UserServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//定义isExist true代表存在  false代表不存在
		boolean isExist = true;
		//获得输入的用户名
		String username = request.getParameter("username");
		if(!"haohao".equals(username)){
			isExist = false;
		}
		//回写存在状态
		String json = "{\"isExist\":"+isExist+"}";
		response.getWriter().write(json);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

6.2 综合案例：内容自动补全

需求

在输入框输入关键字，下拉框中异步显示与该关键字相关的商品的名称

代码实现

导入数据库脚本

编写实体模型

package com.itheima.autocomplate;

public class User {

	private int id;
	private String name;
	private String password;
	
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	
}

编写jsp页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
	.content{
		width:643px;
		margin:200px auto;
		text-align: center;
	}
	input[type='text']{
		width:530px;
		height:40px;
		font-size: 14px;
	}
	input[type='button']{
		width:100px;
		height:46px;
		background: #38f;
		border: 0;
		color: #fff;
		font-size: 15px
	}
	.show{
		position: absolute;
		width: 535px;
		border: 1px solid #999;
		border-top: 0;
		display: none;
	}
</style>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
	function searchWord(obj){
		//获得当前关键字
		var word = $(obj).val();
		//发送ajax请求
		$.post(
			"${pageContext.request.contextPath}/search",
			"word="+word,
			function(data){
				if(data){
					var content = "";
					for(var i=0;i<data.length;i++){
						content+="<div>"+data[i].name+"</div>";
					}
					$("#show").html(content).show();
				}
			},
			"json"
		);
	}
</script>
</head>
<body>
	<div class="content">
		<img alt="" src="logo.png"><br/><br/>
		<input type="text" name="word" onkeyup="searchWord(this)">
		<input type="button" value="搜索一下">
		<div class="show" id="show"></div>
	</div>
</body>
</html>

编写Servlet

@WebServlet("/search")
public class SearchServlet extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//设置中文乱码
		request.setCharacterEncoding("UTF-8");
		//获得关键字
		String word = request.getParameter("word");
		//传递关键字到Service
		SearchService searchService = new SearchService();
		List<User> userList = searchService.search(word);
		//转换成json格式的字符串
		ObjectMapper om = new ObjectMapper();
		String json = om.writeValueAsString(userList);
		//设置response中文乱码
		response.setContentType("text/html;charset=UTF-8");
		response.getWriter().write(json);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

编写Service

public class SearchService {

	public List<User> search(String word) {
		//调用dao层
		SearchDao searchDao = new SearchDao();
		List<User> userList = null;
		try {
			userList = searchDao.findUserByLikeName(word);
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return userList;
	}
}

编写Dao

public class SearchDao {

	public List<User> findUserByLikeName(String word) throws SQLException {
		
        QueryRunner queryRunner = new QueryRunner(JDBCUtils.getDataSource());
		String sql = "select * from user where name like ? limit 0,6";
		//执行查询操作
		List<User> list = queryRunner.query(sql, new BeanListHandler<User>(User.class),"%"+word+"%");
        
		return list;
	}

}

JdbcUtils工具类

public class JDBCUtils {
	// 创建一个连接池：但是这个连接池只需要创建一次即可。
	private static final ComboPooledDataSource dataSource = new ComboPooledDataSource();
	
	/**
	 * 获得连接的方法
	 */
	public static Connection getConnection() throws SQLException{
		return dataSource.getConnection();
	}
	
	/**
	 * 获得连接池:
	 */
	public static DataSource getDataSource(){
		return dataSource;
	}
	
}

配置文件

<?xml version="1.0" encoding="UTF-8"?>
<c3p0-config>
	<default-config>
		<property name="driverClass">com.mysql.jdbc.Driver</property>
		<property name="jdbcUrl">jdbc:mysql:///web07</property>
		<property name="user">root</property>
		<property name="password">root</property>
		
		<property name="initialPoolSize">5</property>
		<property name="minPoolSize">5</property>
		<property name="maxPoolSize">20</property>
	</default-config> 
</c3p0-config>

BigData小白

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery_AJAX_JSON

JQuery&AJAX&JSON第1章 jQuery的插件1.1 jQuery的插件机制jQuery插件机制概述jQuery插件的机制很简单，就是利用jQuery提供的jQuery.fn.extend()和jQuery.extend()方法，扩展jQuery的功能。jQuery插件机制语法语法解释jQuery.fn.extend(object)对j...
复制链接

扫一扫