SpringMVC(3)

通过上面的学习我们知道,默认情况下无论是Spring MVC还是SpringBoot返回的都是现在都是前后端分离的,后端只需要进行返回数据给前端数据即可

1)向浏览器返回一个HTML界面 

请求参数的数据类型Contnt-Type:text/html;charset=utf-8

@RequestMapping("/CSS")
  @ResponseBody
public String GetHTML(String name)
  {
      return "

你好"+name+"

"; }

2.给浏览器返回一个JSON格式的数据:

浏览器上面输入:localhost:8080/JS?name=李佳伟
{"currentTime":"2022-07-17T12:30:34.76","name":"李佳伟"}

 @RequestMapping("/JS")
    @ResponseBody
    public Object GetJson(String name)
  {
      HashMap map=new HashMap<>();
      map.put("name",name);
      map.put("currentTime", LocalDateTime.now());
      return map;
  }
@Controller
public class UserController {
       @RequestMapping("/Java100")
       @ResponseBody
        public void run(String username,String password,Integer ClassID,Integer UserID,HttpServletResponse resp) throws IOException {
         ObjectMapper objectMapper=new ObjectMapper();
         User user=new User();
         user.setUserID(UserID);
         user.setClassID(ClassID);
         user.setUsername(username);
         user.setPassword(password);
         resp.setContentType("application/json;charset=utf-8");
         String html= objectMapper.writeValueAsString(user);
         resp.getWriter().write(html);
       }
}

 SpringMVC(3)_第1张图片

 实现一个简单的计数器:

SpringMVC(3)_第2张图片

注意后端最好要针对前端的参数要做一个参数校验,因为如果前端传递过来参数如果是null,那么最终两个null值是不可以进行相加的;

SpringMVC(3)_第3张图片

1)上面我们使用form表单给服务器发送一个GET请求的时候,我们使用Fidder抓包的结果是:自定义的参数放到了URLquerystring里面:

SpringMVC(3)_第4张图片

2)当我们使用form表单发送一个POST请求的时候:请求的数据直接放在body里面了

SpringMVC(3)_第5张图片

现在我们进行修改一下博客系统的登录的前端页面:

1)小技巧:ctrl+a进行全选,然后ctrl+c进行复制,然后在进行点击SpringBoot项目里面的resource目录下的static目录,在按下crtl+v进行粘贴;

2)jquery.getJSON("请求的地址url",{请求的参数},function(data,status){},请求成功之后的回调函数);

前端代码:通过AJAX发送HTTP请求:

有时候前端代码修改之后不会生效,我们只需要把target目录直接进行删除,重新启动程序

1)注意我们一定要在方法体内部获取UserName和Password的控件,获取控件里面的内容;

2)注意括号的范围不要写错,看看下面Spring自动判空的一些类;

3)因为在之前不同的浏览器是由不同的浏览器厂商去写的,不同的浏览器厂商引擎可能是不一样的,微软设计的是IE,火狐浏览器,搜狗浏览器,也就是说自己可以设计自己的一个JS行为,所以说在早期的时候,你写的JS代码在谷歌可以运营,在火狐底下可以运行,但是在IE浏览器上不可以运行,因为不同的开发厂商有自己的行为,可以不遵循一些设计规范,不同的浏览器会写不同的JS代码;

4)jQuery本身又是一个门面模式,底层可以有不同的实现,不同的厂商可能会有不同的实现,用户的代码写jQuery代码的时候只是写一份,然后jQuery()会根据底层浏览器的不同,因为他是可以拿到浏览器的一个标识的,那么我会按照底层浏览器标识的不同从而生成不同的代码,但是对于用户是啥也感知不到的,用户在写代码的时候只需要会JQuery的代码就可以,兼容性只是有我们的JQuery()来进行自适应的,但是后来浏览器都遵循了一定的规范;

我们可以自动在JS代码中写一个mysub()函数,来执行我们自动写的一部分逻辑 

  public static boolean hasLength(@Nullable String str) {
        return str != null && !str.isEmpty();
    }
  let button=document.querySelector("#submit");
 button.onclick=function()
    {
        //1先拿到用户名和密码控件iput1和input2都是id属性
        var username=jQuery("#input1");
        var password=jQuery("#input2");
        console.log(username.val());
        console.log(password.val());
//jQuery里面填写的是id属性,我们可以通过username.val可以得到输入框里面的内容
        // 2进行非空校验
        if(jQuery.trim(username.val())=="")
        {
            alert("请先输入用户名");
            username.focus();//光标设置到用户名输入框
            return;
        }
        if(jQuery.trim(username.val())=="")
        {
            alert("请先输入密码");
            username.focus();
            return;
        }
        // 3发送ajax请求和后端进行交互
        jQuery.getJSON("/login",
        {"username":jQuery.trim(username.val()),
         "password":jQuery.trim(password.val()),//trim方法就是去掉里面的空格
          },function(data){
            if(data!=null&&data.succ==200)
            {
                console.log("后端接口访问成功");
                if(data.state==1)
                {
                    alert("登陆成功");
                }else{
                    alert(data.message);
                }
            }else{
                console.log("后端接口访问失败"+data.succ);
            }
          });
//第一个参数表示请求的地址,第二个参数表示请求的参数,第三个参数表示服务器端返回的一个回调函数
    }

或者通过这种方式给后端发送AJAX:

 
用户名
密码


  
   
                    
                    

你可能感兴趣的:(前端,java,spring)