文章目录

一、AJAX概念二、AJAX快速入门1、编写AjaxServlet,并使用response输出字符(后台代码)2、创建XMLHttpRequest对象:用于和服务器交换数据 & 3、向服务器发送请求 & 4、获取服务器响应数据

三、案例-验证用户是否存在1、SelectUserServlet2、register.html

四、Axios异步框架1、Axios快速入门(1)、get(2)、post

2、Axios请求方式别名(阅读性不好)

五、JSONJSON概念1、JSON基础语法2、JSON数据和Java对象转换(1)、导入坐标(2)、转换

3、案例(1)、查询所有1、Web层2、brand.html

(2)、新增品牌1、Web层2、addBrand.html

一、AJAX概念

异步和同步

二、AJAX快速入门

1、编写AjaxServlet,并使用response输出字符(后台代码)

package com.itheima.web.servlet;

import javax.servlet.*;

import javax.servlet.http.*;

import javax.servlet.annotation.*;

import java.io.IOException;

@WebServlet("/ajaxServlet")

public class AjaxServlet extends HttpServlet {

@Override

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

//1. 响应数据

response.getWriter().write("hello ajax~");

}

@Override

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

this.doGet(request, response);

}

}

2、创建XMLHttpRequest对象:用于和服务器交换数据 & 3、向服务器发送请求 & 4、获取服务器响应数据

Title

三、案例-验证用户是否存在

1、SelectUserServlet

package com.itheima.web.servlet;

import javax.servlet.*;

import javax.servlet.http.*;

import javax.servlet.annotation.*;

import java.io.IOException;

@WebServlet("/selectUserServlet")

public class SelectUserServlet extends HttpServlet {

@Override

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

//1. 接收用户名

String username = request.getParameter("username");

//2. 调用service查询User对象

boolean flag = true;

//3. 响应标记

response.getWriter().write("" + flag);

}

@Override

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

this.doGet(request, response);

}

}

2、register.html

欢迎注册

欢迎注册

已有帐号? 登录

用户名


密码


验证码

okhttp 前端 AJAX介绍&使用&案例  第1张

看不清?


四、Axios异步框架

http://www.axios-http.cn

1、Axios快速入门

(1)、get

package com.itheima.web.servlet;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import java.io.IOException;

@WebServlet("/axiosServlet")

public class AxiosServlet extends HttpServlet {

@Override

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

System.out.println("get...");

//1. 接收请求参数

String username = request.getParameter("username");

System.out.println(username);

//2. 响应数据

response.getWriter().write("hello Axios~");

}

@Override

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

System.out.println("post...");

this.doGet(request, response);

}

}

axios({

method:"get",

url:"http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan"

}).then(function (resp) {

alert(resp.data);

})

(2)、post

axios({

method:"post",

url:"http://localhost:8080/ajax-demo/axiosServlet",

data:"username=zhangsan"

}).then(function (resp) {

alert(resp.data);

})

2、Axios请求方式别名(阅读性不好)

//get

axios.get("http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan").then(function (resp) {

alert(resp.data);

})

//post

var jsObject = {name:"zhangsan"};

axios({

method:"post",

url:"http://localhost:8080/ajax-demo/axiosServlet",

data:jsObject

}).then(function (resp) {

alert(resp.data);

})

五、JSON

JSON概念

1、JSON基础语法

Title

2、JSON数据和Java对象转换

(1)、导入坐标

com.alibaba

fastjson

1.2.62

(2)、转换

User

package com.itheima.json;

public class User {

private Integer id;

private String username;

private String password;

public Integer getId() {

return id;

}

public void setId(Integer id) {

this.id = id;

}

public String getUsername() {

return username;

}

public void setUsername(String username) {

this.username = username;

}

public String getPassword() {

return password;

}

public void setPassword(String password) {

this.password = password;

}

@Override

public String toString() {

return "User{" +

"id=" + id +

", username='" + username + '\'' +

", password='" + password + '\'' +

'}';

}

}

package com.itheima.json;

import com.alibaba.fastjson.JSON;

public class FastJsonDemo {

public static void main(String[] args) {

//1. 将Java对象转为JSON字符串

User user = new User();

user.setId(1);

user.setUsername("zhangsan");

user.setPassword("123");

String jsonString = JSON.toJSONString(user);

System.out.println(jsonString);//{"id":1,"password":"123","username":"zhangsan"}

//2. 将JSON字符串转为Java对象

User u = JSON.parseObject("{\"id\":1,\"password\":\"123\",\"username\":\"zhangsan\"}", User.class);

System.out.println(u);

}

}

3、案例

(1)、查询所有

1、Web层

package com.itheima.web;

import com.alibaba.fastjson.JSON;

import com.itheima.pojo.Brand;

import com.itheima.service.BrandService;

import javax.servlet.*;

import javax.servlet.http.*;

import javax.servlet.annotation.*;

import java.io.IOException;

import java.util.List;

@WebServlet("/selectAllServlet")

public class SelectAllServlet extends HttpServlet {

private BrandService brandService = new BrandService();

@Override

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

//1. 调用Service查询

List brands = brandService.selectAll();

//2. 将集合转换为JSON数据 序列化

String jsonString = JSON.toJSONString(brands);

//3. 响应数据

response.setContentType("text/json;charset=utf-8");

response.getWriter().write(jsonString);

}

@Override

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

this.doGet(request, response);

}

}

2、brand.html

Title



序号品牌名称企业名称排序品牌介绍状态操作
1三只松鼠三只松鼠100三只松鼠,好吃不上火启用修改 删除
2优衣库优衣库10优衣库,服适人生禁用修改 删除
3小米小米科技有限公司1000为发烧而生启用修改 删除

(2)、新增品牌

1、Web层

package com.itheima.web;

import com.alibaba.fastjson.JSON;

import com.itheima.pojo.Brand;

import com.itheima.service.BrandService;

import javax.servlet.*;

import javax.servlet.http.*;

import javax.servlet.annotation.*;

import java.io.BufferedReader;

import java.io.IOException;

@WebServlet("/addServlet")

public class AddServlet extends HttpServlet {

private BrandService brandService = new BrandService();

@Override

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

//1. 接收数据,request.getParameter 不能接收json的数据

/* String brandName = request.getParameter("brandName");

System.out.println(brandName);*/

// 获取请求体数据

BufferedReader br = request.getReader();

String params = br.readLine();

// 将JSON字符串转为Java对象

Brand brand = JSON.parseObject(params, Brand.class);

//2. 调用service 添加

brandService.add(brand);

//3. 响应成功标识

response.getWriter().write("success");

}

@Override

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

this.doGet(request, response);

}

}

2、addBrand.html

添加品牌

添加品牌

品牌名称:

企业名称:

排序:

描述信息:

状态:

禁用

启用

精彩内容

评论可见,请评论后查看内容,谢谢!!!评论后请刷新页面。