标签：service   主动权   bin   pre   public   test   pwd   验证   name   

AJAX

1. AJAX简介

AJAX = Asynchronous JavaScript and XML (异步的JavaScript和XML)

Ajax不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术

增强B/S的体验性(Browser/Service)

B/S:未来的主流,并且会爆发式持续增长

产品链:H5 + 网页 + 客户端 + 手机端 (Android + IOS) + 小程序

请求的类型: xhr

2. 利用iframe伪造AJAX

    
请输入地址:
    

        





    

3. 利用js实现AJAX

1. 引入jquery

在jsp的head标签内写

2. 编写jsp

  


  用户名: 

3. 编写controller

package com.wang.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@RestController
public class AjaxController {

    @RequestMapping("/t1")
    public String test() {
        return "hello";
    }

    @RequestMapping("/a1")
    public void a1(String name, HttpServletResponse response) throws IOException {
        System.out.println("a1:param => " + name);
        if ("wang".equals(name)){
            response.getWriter().print("true");
        } else {
            response.getWriter().print("false");
        }
    }
}

4. 流程分析

ajax把主动权交给了前端 ==> callback函数

4. AJAX从后台加载数据

1. 创建实体类

package com.wang.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
    private String name;
    private int age;
    private String sex;
}

2. 在controller中将数据传递给前端

package com.wang.controller;

import com.wang.pojo.User;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

@RestController
public class AjaxController {

    @RequestMapping("/t1")
    public String test() {
        return "hello";
    }

    @RequestMapping("/a1")
    public void a1(String name, HttpServletResponse response) throws IOException {
        System.out.println("a1:param => " + name);
        if ("wang".equals(name)){
            response.getWriter().print("true");
        } else {
            response.getWriter().print("false");
        }
    }

    @RequestMapping("/a2")
    public List a2() {
        ArrayList userArrayList = new ArrayList();
        //添加数据
        userArrayList.add(new User("wang_1", 1, "male"));
        userArrayList.add(new User("wang_2", 2, "female"));
        userArrayList.add(new User("wang_3", 3, "male"));
        return userArrayList;
    }
}

• 如果要使用AJAX, 此处controller不能调用视图解析器, 要返回json供AJAX中的data参数调用
• 不使用视图解析器的方法: 类上写@RestController或者方法上写@ResponseBody

3. 使用ajax调用并显示

姓名
        
年龄
        
性别
    

注意

• js中, 最外面的function保证窗口一打开里面的函数就运行, 一定要写!(相当于入口函数)

• 使用html方法, 直接拼接html语句到tbody中

• function(data){}是回调函数,ajax可以执行则执行其中的函数!

5. AJAX用户名验证

1. 解决中文乱码,配置Spring

2. 添加controller层的功能

package com.wang.controller;

import com.wang.pojo.User;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

@RestController
public class AjaxController {

    @RequestMapping("/t1")
    public String test() {
        return "hello";
    }

    @RequestMapping("/a1")
    public void a1(String name, HttpServletResponse response) throws IOException {
        System.out.println("a1:param => " + name);
        if ("wang".equals(name)){
            response.getWriter().print("true");
        } else {
            response.getWriter().print("false");
        }
    }

    @RequestMapping("/a2")
    public List a2() {
        ArrayList userArrayList = new ArrayList();
        //添加数据
        userArrayList.add(new User("wang_1", 1, "male"));
        userArrayList.add(new User("wang_2", 2, "female"));
        userArrayList.add(new User("wang_3", 3, "male"));
        return userArrayList;
    }

    @RequestMapping("/a3")
    public String a3(String name, String pwd) {
        String msg = "";
        if (name != null){
            //"admin"这些数据应该在数据库中查
            if("admin".equals(name)) {
                msg = "ok";
            } else {
                msg = "用户名有误";
            }
        }

        if (pwd != null){
            //"admin"这些数据应该在数据库中查
            if("123456".equals(pwd)) {
                msg = "ok";
            } else {
                msg = "密码有误";
            }
        }
        return msg;
    }
}

3. 编写前端代码

    用户名 : 


    密码 : 

注意

• html方法可以向指定的元素内部插入html语句, 用于动态修改网页

SpringMVC-AJAX

标签：service   主动权   bin   pre   public   test   pwd   验证   name   

原文地址：https://www.cnblogs.com/wang-sky/p/13651938.html