文章目录
javaWeb
一、课程目标
【了解】原生ajax
【掌握】JqueryAjax的使用
【理解】json数据前后期交互
【掌握】java处理解析json数据
二、Ajax
异步请求，在不刷新当前页面的情况下进行数据请求，在响应后在页面进行操作，是前后台分离项目实现的主要技术之一
| 差异 | 方式 | 说 明 |
|---|---|---|
| 发送请求方式不同 | 传统Web | 提交表单方式发送请求 |
| Ajax技术 | 异步引擎对象发送请求 | |
| 服务器响应不同 | 传统Web | 响应内容是一个完整页面 |
| Ajax技术 | 响应内容只是需要的数据 | |
| 客户端处理方式不同 | 传统Web | 需等待服务器响应完成并重新加载整个页面后用户才能进行操作 |
| Ajax技术 | 可以动态更新页面中的部分内容 用户不需要等待请求的响应 |
2.1 执行流程
1、创建原生ajax对象(XMLHttpRequest)
2、使用opean方法填入参数
3、使用send方法发送请求
4、为原生ajax对象添加状态修改事件，当修改状态码为4并且服务器响应状态码为200则为请求响应成功
5、使用responseText属性获取服务器返回数据
2.2 原生Ajax
使用js技术完成异步请求的发送以及服务器数据的返回处理
get
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload=function(){
window.setTimeout(function(){
//1、创建元素ajax对象XmlHttpRequest
//由于不同的浏览器限制所以创建原生ajax对象也需要进行判断
var xmlhttp;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp = new XMLHttpRequest();
}
else {
// IE6, IE5 浏览器执行代码
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//2、创建相应的请求方式填入请求数据
//get请求
// xmlhttp.open();
xmlhttp.open("GET", "ajax?username=123", true);
//请求方式 请求服务器地址 是否发送异步请求（一般都为true）
//get请求数据可以直接拼写在请求地址后
//3、发送请求
xmlhttp.send();//get请求发送
//4、书写原生ajax请求对象状态修改事件
xmlhttp.onreadystatechange = function () {
//当修改的状态为4 并且服务器返回状态码为200时说明请求响应成功
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//responseText属性保存着服务器请求相应的数据
document.getElementById("i1").value = xmlhttp.responseText;
}
}
},2000)
}
</script>
</head>
<body>
<input type="text" id="i1">
</body>
</html>
post
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload=function(){
window.setTimeout(function(){
//1、创建元素ajax对象XmlHttpRequest
//由于不同的浏览器限制所以创建原生ajax对象也需要进行判断
var xmlhttp;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp = new XMLHttpRequest();
}
else {
// IE6, IE5 浏览器执行代码
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//2、创建相应的请求方式填入请求数据
//post请求
xmlhttp.open("POST", "ajax", true);
//请求方式 请求服务器地址 是否发送异步请求（一般都为true）
//post请求数据是在请求体中进行传输 所以在发生前需要设置请求头
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//3、发送请求
xmlhttp.send("username=456&password=789");//post请求发送
//4、书写原生ajax请求对象状态修改事件
xmlhttp.onreadystatechange = function () {
//当修改的状态为4 并且服务器返回状态码为200时说明请求响应成功
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//responseText属性保存着服务器请求相应的数据
document.getElementById("i1").value = xmlhttp.responseText;
}
}
},2000)
}
</script>
</head>
<body>
<input type="text" id="i1">
</body>
</html>
实例
使用原生ajax实现注册时数用户名的重复校验
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function userTrue() {
var i1= document.getElementById("i1")
var username = i1.value;
var xmlhttp;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp = new XMLHttpRequest();
}
else {
// IE6, IE5 浏览器执行代码
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "username?"+i1.name+"="+username, true);
xmlhttp.send();
xmlhttp.onreadystatechange = function () {
//当修改的状态为4 并且服务器返回状态码为200时说明请求响应成功
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("si1").innerHTML=xmlhttp.responseText;
}
}
}
</script>
</head>
<body>
账号:<input type="text" id="i1" name="username" onblur="userTrue()"><span id="si1"></span><br>
</body>
</html>
usernameServlet.java
package com.yunhe.ajax;
import com.yunhe.dao.AccountDao;
import com.yunhe.dao.impl.AccountDaoImpl;
import com.yunhe.pojo.Account;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
@WebServlet("/username")
public class UsernameServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
String username = request.getParameter("username");
AccountDao accountDao=new AccountDaoImpl();
ArrayList<Account> accounts = accountDao.selectByUserName(username);
PrintWriter writer = response.getWriter();
if(accounts.isEmpty()){
writer.print("<font color='green'>可以注册<font>");
}else{
writer.print("<font color='red'>用户名已存在<font>");
}
}
}
2.3 jqueryAjax
对原生ajax进行了封装，将其属性参数进行了简化，提供了很多默认的参数，在调用时只需要进行指定属性的设置，对于请求对象的创建、赋值、请求、响应都封装为了对应的方法与属性
2.3.1 常用方法
$.ajax()：通用ajax请求，可以通过参数对象请求的数据、方式、响应数据的类型进行设置
$.get() ：通用get请求，无需设置请求方式，默认使用get请求进行数据的请求与响应
$.post()：通用post请求，无需设置请求方式，默认使用post请求进行数据的请求与响应
2.3.1.1 Ajax请求
将所有的数据以json格式进行设置，所有属性不一定需要全部进行设置，一些属性如果没有设置会提供默认值
常用属性参数
| 属性名 | 说 明 |
|---|---|
| String url | 发送请求的地址，默认为当前页地址 |
| String type | 请求方式（POST或GET，默认为GET） |
| Number timeout | 设置请求超时时间（毫秒） |
| Object（json） data 或String data | 发送到服务器的数据 |
| String dataType | 预期服务器返回的数据类型，包括：XML、HTML、Script、JSON、JSONP、text |
| boolean global | 表示是否触发全局Ajax事件，默认为true肯定要异步 |
常用回调方法
| 函 数 | 说 明 |
|---|---|
| **function beforeSend( ** XMLHttpRequest xhr) | 发送请求前调用的函数 参数xhr：可选 |
| **function complete( ** XMLHttpRequest **xhr, ** String ts) | 请求完成后调用的函数 参数xhr：可选参数ts：可选，描述请求类型的字符串 |
| **function success( ** Object result) | 请求成功后调用的函数 参数result：可选，由服务器返回的数据 |
| **function error( ** XMLHttpRequest **xhr, ** String em,Exception e) | 请求失败时被调用的函数 参数xhr：可选参数em：可选，错误信息参数e：可选，捕获的异常对象 |
语法
$.ajax({
url : url, //要提交的URL路径
type : “GET", /POST //发送请求的方式
data : data, //要发送到服务器的数据
dataType : “json", //指定传输的数据格式
success : function(result) {//请求成功后要执行的代码
干的事儿
},
error : function() { //请求失败后要执行的代码
}
});
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="static/js/jquery-3.4.1.min.js"></script>
<script>
function userTrue() {
var k = $("#i1").attr("name")
var v = $("#i1").val()
//alert(k+'='+v)
$.ajax({
url: "username",
type: "GET",
data:{"username":v},
// data: k + "=" + v,
dataType: "json",
global: true,
success: function (res) {
console.log(res.username)
$("#si1").html(res.username);
},
error:function(xhr,em,e){
// console.log(xhr)
// console.log(em)
// console.log(e)
alert("请确认填入数据的准确性")
}
})
}
</script>
</head>
<body>
账号:<input type="text" id="i1" name="username" onblur="userTrue()"><span id="si1"></span><br>
</body>
</html>
2.3.1.2 Get请求
是ajax请求的简写形式，主要用于发送get请求
常用属性参数及回调方法
| 参数名 | 说 明 |
|---|---|
| String url | 规定将请求发送到目标URL |
| Object data 或String data | 可选。规定连同请求发送到服务器的数据 |
| **function success( ** **Object result, ** String **status, ** XMLHttpRequest xhr) | 可选。请求成功后调用的函数参数result：可选。服务器返回的结果数据 参数status：可选。请求的状态 参数xhr：可选 |
| String dataType | 可选。预期服务器返回的数据类型，包括：XML、HTML、Script、JSON、JSONP、text |
语法
$.get(url,data,successFunction,dataType)
实例
LoginServlet.java
package com.yunhe.ajax;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet("/login")
public class LoginServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
String username = request.getParameter("username");
String password = request.getParameter("password");
PrintWriter writer = response.getWriter();
writer.print("{\"u\":\""+username+"\",\"p\":\""+password+"\"}");
System.out.println("{\"u\":\""+username+"\",\"p\":\""+password+"\"}");
}
}
aget.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="static/js/jquery-3.4.1.min.js"></script>
<script>
$(function () {
$("button").click(function (){
$.get("login",$("#f1").serialize(),function(res){
console.log(res)
},"json")
})
})
</script>
</head>
<body>
<form id="f1">
<input type="text" name="username">
<input type="password" name="password">
</form>
<button>获取</button>
</body>
</html>
2.3.1.2 Post请求
是ajax请求的简写形式，主要用于发送post请求
常用属性参数及回调方法
| 参数名 | 说 明 |
|---|---|
| String url | 规定将请求发送到目标URL |
| Object data 或String data | 可选。规定连同请求发送到服务器的数据 |
| **function success( ** **Object result, ** String **status, ** XMLHttpRequest xhr) | 可选。请求成功后调用的函数参数result：可选。服务器返回的结果数据 参数status：可选。请求的状态 参数xhr：可选 |
| String dataType | 可选。预期服务器返回的数据类型，包括：XML、HTML、Script、JSON、JSONP、text |
语法
$.post(url,data,successFunction,dataType)
实例
LoginServlet.java
package com.yunhe.ajax;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet("/login")
public class LoginServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
String username = request.getParameter("username");
String password = request.getParameter("password");
PrintWriter writer = response.getWriter();
writer.print("{\"u\":\""+username+"\",\"p\":\""+password+"\"}");
System.out.println("{\"u\":\""+username+"\",\"p\":\""+password+"\"}");
}
}
apost.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="static/js/jquery-3.4.1.min.js"></script>
<script>
$(function () {
$("button").click(function (){
$.post("login",$("#f1").serialize(),function(res){
console.log(res)
},"json")
})
})
</script>
</head>
<body>
<form id="f1">
<input type="text" name="username">
<input type="password" name="password">
</form>
<button>获取</button>
</body>
</html>
如果没有书写返回数据类型默认为text文本类型，如果需要转换为json对象有很多方法
console.log(JSON.parse(res))//js
console.log($.parseJSON(res))//jquery
2.4 json数据的返回
在前台请求时无论请求字符串数据还是json数据，后台获取方式不变，但是后台获取保存数据使用的是been或者集合，所以需要对其进行转换，转换为相应的json对象，在返回数据时调用toString方法返回对应的json字符串
需要导入相应的jar包（在java中进行json转换的工具类有很多 这里使用的jsonObjec）
//JsonObject就是在java中创建一个json对象 可以通过对应的方法进行存值
JSONObject jsonObject=new JSONObject();
//put(key:value)在当前对象中添加一个数据键值对
jsonObject.put("user","zhangsna");
jsonObject.put("pwd","123456");
//JSONObject.fromObject(Obj);将指定的数据对象转换为json对象
JSONObject jsonObject1 = JSONObject.fromObject(account);
//JSONArrayfromObject(obj)将指定的集合转换为json对象
JSONArray jsonArray = JSONArray.fromObject(list);
实例
layui数据表格的使用
table.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="static/js/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="static/layui/css/layui.css">
<script src="static/layui/layui.js"></script>
<script>
$(function () {
layui.use('table', function () {
var table = layui.table;
//第一个实例
table.render({
elem: '#demo'
, height: 312
, url: 'findAll' //数据接口
, page: true //开启分页
,limit:1
,limits:[1,2,3]
, cols: [[ //表头
{ field: 'aid', title: 'ID', width: 80, fixed: 'left' }
, { field: 'username', title: '用户名', width: 80 }
, { field: 'password', title: '密码', width: 80 }
, { field: 'name', title: '姓名', width: 80, }
, { field: 'idCard', title: '身份证号', width: 80 }
, { field: 'address', title: '地址', width: 177 }
, { field: 'tel', title: '电话号码', width: 80 }
, { field: 'email', title: '邮箱', width: 80}
, { field: 'role', title: '角色id', width: 80 }
]]
});
});
})
</script>
</head>
<body>
<table id="demo" lay-filter="test"></table>
</body>
</html>
FindAllServlet.java
package com.yunhe.ajax;
import com.yunhe.dao.AccountDao;
import com.yunhe.dao.impl.AccountDaoImpl;
import com.yunhe.pojo.Account;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.util.ArrayList;
@WebServlet(name = "FindAllServlet", value = "/findAll")
public class FindAllServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
String page = request.getParameter("page");
String limit = request.getParameter("limit");
if(page==null||limit==null){
page="1";
limit="1";
}
AccountDao accountDao=new AccountDaoImpl();
ArrayList<Account> accounts = accountDao.selectByPageAndLimit(Integer.valueOf(page),Integer.valueOf(limit));
JSONArray jsonArray = JSONArray.fromObject(accounts);
//通常情况下返回的json数据的格式为
JSONObject jsonObject=new JSONObject();
jsonObject.put("code",0);
jsonObject.put("msg","请求成功!");
jsonObject.put("count",accountDao.selectAll().size());
jsonObject.put("data",jsonArray);
response.getWriter().print(jsonObject);
}
}
AccountDaoImpl.java
package com.yunhe.dao.impl;
import com.yunhe.dao.AccountDao;
import com.yunhe.pojo.Account;
import com.yunhe.util.MyJDBCutil;
import java.util.ArrayList;
public class AccountDaoImpl implements AccountDao {
@Override
public ArrayList<Account> selectByUserName(String username) {
String sql="select * from account where username=?";
return MyJDBCutil.dql(sql,Account.class,username);
}
@Override
public ArrayList<Account> selectAll() {
String sql="select * from account ";
return MyJDBCutil.dql(sql,Account.class);
}
@Override
public ArrayList<Account> selectByPageAndLimit(int page, int limit) {
String sql="select * from account limit "+(page-1)*limit+","+limit;
return MyJDBCutil.dql(sql,Account.class);
}
}
3902
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
