关于springboot:第六天的代码

3次阅读

共计 9291 个字符，预计需要花费 24 分钟才能阅读完成。

ajaxController 层 层 层 层 层
@Controller
@RequestMapping("/")
public class AjaxController {private List<String> container=new ArrayList<>();
    @RequestMapping("doCheck")
    @ResponseBody
    public String doCheck(String name) {if(container.contains(name))
            return name+"已存在, 请换个名字";
        return name +"不存在, 能够注册";
    }
    @RequestMapping("doSave")
    @ResponseBody
    public String doSave(String name) {// 办法参数名和客户端申请参数名雷同
        container.add(name);// 后续这个值能够存储到数据库
        return name+"save ok";
    }
    @RequestMapping("doAjaxGet")
    @ResponseBody // 通知 spring mvc 此办法的返回值不是 viewname, 能够将其看成是一般字符串
    public String doAjaxGet()throws Exception {//Thread.sleep(5000);
        return "Ajax Get Request Result";
    }
}

Controller 层 层 层 层 层
@Controller
@RequestMapping("/jquery/")
public class JQueryController {@RequestMapping("doAjaxGet")
    @ResponseBody
    public String doAjaxGet(String msg) {if(Math.random()>0.1) {throw new IllegalArgumentException("参数异样");
        }
        // 将客户端传到服务端的字符换转换为大写, 而后再响应给客户端.
        return "Jquery Get request result"+msg.toUpperCase();}
    @RequestMapping("doAjaxPost")
    @ResponseBody
    public String doAjaxPost(Integer id,String title) {
        // 将客户端传到服务端的字符换转换为大写, 而后再响应给客户端.
        return "Jquery Post request result"+id+"/"+title;
    }
    @RequestMapping("doAxiosPost")
    @ResponseBody
    public String doAxiosPost(@RequestBody Message msg) {return msg.toString();
    }
}

Message controller pojo 层 层 层
public class Message {
    private Integer id;
    private String title;
    public Integer getId() {return id;}
    public void setId(Integer id) {this.id = id;}
    public String getTitle() {return title;}
    public void setTitle(String title) {this.title = title;}
    @Override
    public String toString() {return "Message [id=" + id + ", title=" + title + "]";
    }
}

ajax-01
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
  <h1>The Ajax-01 Page</h1>
  <fieldset><!-- fieldset 能够对页面元素进行分组设计 -->
     <legend>Ajax 异步申请 </legend>
     <button onclick="doAjaxGet()">Ajax Get Request</button>
     <span id="ajaxResultId">The Data is Loading ....</span>
  </fieldset>
  <script type="text/javascript">
      //JS 中代码调试技巧:3 种办法 (日志 -console.log(), 断点 -debugger, 排除法 )
      function doAjaxGet(){// debugger ( 只有在关上控制台窗口当前才无效)
          //1. 创立 xhr 对象
          var xhr=new XMLHttpRequest();
          //2. 设置 xhr 对象的事件监听函数
          xhr.onreadystatechange=function(){console.log(xhr.readyState);
              //readyState== 4 示意服务端的响应后果在客户端曾经接管完了
              //status==200 示意服务解决申请的过程中没有呈现任何异样.(响应的都是失常数据)             if(xhr.readyState==4&&xhr.status==200){
                // 获取 span 对象
                var span=document.getElementById("ajaxResultId");
                // 更新 span 对象外部的内容
                span.innerHTML=xhr.responseText;
              }
          };
          //3. 建设连贯 (Get 申请形式)         xhr.open("GET","http://localhost/doAjaxGet",true);//true 示意异步
          //4. 发送申请
          xhr.send(null);
          //console.log("======main======");
      }
  </script>
</body>
</html>

ajax-02
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 <h1>The Ajax 02 Page</h1>
 <fieldset>
    <legend>Ajax 表单申请 </legend>
    <form>
       <input type="text" id="nameId" name="name" 
                          onblur="doCheck()" onfocus="doClear()">
       <input type="button" onclick="doSave()" value="Save">
    </form>
    <span id="resultId"></span><!-- 此地位显示服务端响应后果 -->
 </fieldset>
 <script type="text/javascript">
       function doClear(){document.forms[0].name.value="";         document.getElementById("resultId").innerHTML="";
       }
       // 检测名字是否已存在
       function doCheck(){
           //1. 创立 XHR 对象
           const xhr=new XMLHttpRequest();
           //2. 定义 XHR 对象的状态监听函数
           xhr.onreadystatechange=function(){            if(xhr.readyState==4&&xhr.status==200){document.getElementById("resultId").innerHTML=
                  `<font color='red'>${xhr.responseText}</font>`;
               }
           }
           //3. 建设连贯
           let name=document.forms[0].name.value;
           xhr.open("GET",`doCheck?name=${name}`,true);
           //4. 发送申请
           xhr.send(null);
       }
       // 保留表单中名字的值
       function doSave(){//debugger,log, 排除法
          // debugger
           //1. 创立 XHR 对象
           const xhr=new XMLHttpRequest();
           //2. 定义 XHR 对象的状态监听函数
           xhr.onreadystatechange=function(){             if(xhr.readyState==4&&xhr.status==200){document.getElementById("resultId").innerHTML=xhr.responseText;
               }
           }
           //3. 建设连贯 (Post)
           xhr.open("POST","doSave",true);
           //post 申请传参须要设置申请头
           xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
           //4. 发送申请
           let name=document.forms[0].name.value;// 获取输出的 name 属性值
           // 构建参数对象
           //4.1 形式 1
           //var params="name="+name;// 淘汰
           //4.2 形式 2
            const params=`name=${name}`;// 一种新的写法, 这种写法称之为模板字符串, 所有字符串拼接都能够以这种形式进行实现
           //4.3 形式 3
           //var params={"name":name};//JavaScript 中的对象 (原生 ajax 形式默认不能够间接传递这样的对象)
           xhr.send(params);//post 申请的参数须要写到此地位
       }
 </script>
</body>
</html>

ajax-03
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 <h1>The Ajax 03 Page</h1>
 <fieldset>
    <legend>Ajax 表单申请 </legend>
    <form>
       <input type="text" id="nameId" name="name" onblur="doCheck()">
       <input type="button" onclick="doSave()" value="Save">
    </form>
    <span id="resultId"></span><!-- 此地位显示服务端响应后果 -->
 </fieldset>
 <script type="text/javascript" src="/js/ajax.js"></script>
 <script type="text/javascript">
       // 检测名字是否已存在
       function doCheck(){
           //1. 定义申请的 url
           var url="http://localhost/doCheck";
           //2. 定义申请参数
           var name=document.forms[0].name.value;
           var params=`name=${name}`;
           //3. 发送 ajax get 申请
           doAjaxGet(url,params,(result)=>{document.getElementById("resultId").innerHTML=
                   `<font color=red>${result}</font>`;
           });
       }
       // 保留表单中名字的值
       function doSave(){//debugger,log, 排除法
          //1. 申请 url
          const url="http://localhost/doSave";
          //2. 申请参数
          let name=document.forms[0].name.value;
          let params=`name=${name}`;
          //3. 发送 ajax post 申请
          doAjaxPost(url,params,(result)=>{alert(result);
          })
       }
 </script>
</body>
</html>

ajax-04
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 <h1>The Ajax 04 Page</h1>
 <fieldset>
    <legend>Ajax 表单申请 </legend>
    <form>
       <input type="text" id="nameId" name="name" onblur="doCheck()">
       <input type="button" onclick="doSave()" value="Save">
    </form>
    <span id="resultId"></span><!-- 此地位显示服务端响应后果 -->
 </fieldset>
 <script type="text/javascript" src="/js/ajaxfk.js"></script>
 <script type="text/javascript">
       // 检测名字是否已存在
       function doCheck(){
           //1. 定义申请的 url
           var url="http://localhost/doCheck";
           //2. 定义申请参数
           var 
        name=document.forms[0].name.value;
           var params=`name=${name}`;
           //3. 发送 ajax get 申请
           $$.doAjaxGet(url,params,(result)=>{document.getElementById("resultId").innerHTML=
                   `<font color=red>${result}</font>`;
           });
       }
       // 保留表单中名字的值
       function doSave(){//debugger,log, 排除法
          //1. 申请 url
          const url="http://localhost/doSave";
          //2. 申请参数
          let name=document.forms[0].name.value;
          let params=`name=${name}`;
          //3. 发送 ajax post 申请
          $$.doAjaxPost(url,params,(result)=>{alert(result);
          })
       }
 </script>
</body>
</html>

ajax-05 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 <h1>The Ajax 05 Page</h1>
 <fieldset>
    <legend>Ajax 表单申请 </legend>
    <form>
       <input type="text" id="nameId" name="name" onblur="doCheck()">
       <input type="button" onclick="doSave()" value="Save">
    </form>
    <span id="resultId"></span><!-- 此地位显示服务端响应后果 -->
 </fieldset>
 <script type="text/javascript" src="/js/ajaxfk02.js"></script>
 <script type="text/javascript">
       // 检测名字是否已存在
       function doCheck(){
           //1. 定义申请的 url
           var url="http://localhost/doCheck";
           //2. 定义申请参数
           var name=document.forms[0].name.value;
           var params=`name=${name}`;
           //3. 发送 ajax get 申请
           $$.doAjaxGet(url,params,(result)=>{document.getElementById("resultId").innerHTML=
                   `<font color=red>${result}</font>`;
           });
       }
       // 保留表单中名字的值
       function doSave(){//debugger,log, 排除法
          //1. 申请 url
          const url="http://localhost/doSave";
          //2. 申请参数
          let name=document.forms[0].name.value;
          let params=`name=${name}`;
          //3. 发送 ajax post 申请
          $$.doAjaxPost(url,params,(result)=>{alert(result);
          })
       }
 </script>
</body>
</html>

axios-ajax-01
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<button onclick="doAjaxGet()">doAjaxGet</button>
<button onclick="doAjaxPost()">doAjaxPost</button>
<span id="result"></span>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
  function doAjaxGet(){axios.get('/jquery/doAjaxGet',{params:{msg:"hello axios"}})
          .then((r)=>{// 服务响应状态为 200 时执行 then 函数内容
            console.log(r.data);            //document.getElementById("result").innerHTML=r.data;            document.querySelector("#result").innerHTML=r.data;
          })
          .catch((err)=>{// 服务端响应状态非 200 时，执行 catch 函数。console.log(err);
          });
   }
  function doAjaxPost(){axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
          axios.post('/jquery/doAxiosPost',{"id":100,"title":"axios"})
          .then((r)=>{// 服务响应状态为 200 时执行 then 函数内容
            console.log(r.data);           //document.getElementById("result").innerHTML=r.data;            document.querySelector("#result").innerHTML=r.data;
          })
          .catch((err)=>{// 服务端响应状态非 200 时，执行 catch 函数。console.log(err);
          });
   }

</script>

</body>

</html>

jquery ajax 01
<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

<h1>The Jquery ajax 01 Page</h1>

<fieldset>

   <legend>Jquery Ajax function </legend>

   <button onclick="doGet()">$.get(...)</button>

   <button onclick="doPost()">$.post(...)</button>

   <button onclick="doAjax()">$.ajax(...)</button>

   <button onclick="doLoad()">$(...).load(...)</button>

   <span id="resultId"></span>

</fieldset>

<script type="text/javascript" src="/js/jquery.min.js"></script>

<script type="text/javascript">

     function doGet(){

         //1. 申请 url

         var url="/jquery/doAjaxGet";

         //2. 申请参数

         var params="msg=hello jquery ajax get method";

         //3. 发送异步申请

         $.get(url,params,(result)=>{$("#resultId").html(result);

         })

     }

     function doPost(){

         //1. 申请 url

         var url="/jquery/doAjaxPost";

         //2. 申请参数

         var params="id=10&&title=AAA";

         //3. 发送异步申请

         $.post(url,params,(result)=>{$("#resultId").html(result);

         })

     }

     function doAjax(){

         //1. 申请 url

         var url="/jquery/doAjaxPost";

         //2. 申请参数

         var params="id=10&&title=AAA";

         //3. 发送异步申请

         $.ajax({

             type:"POST",// 能够省略，默认为 get 申请

             url:url,

             data:params,// 能够省略 (无需向服务端传递参数)

             dataType:"text",// 能够省略 (由 ajax 函数外部基于返回值进行匹配解决)

             async:true,// 能够省略，默认为 true，示意异步

             success:function(result){// 解决服务端返回的失常信息

                 $("#resultId").html(result); 

             },

             error:function(xhr){// 解决服务端返回的异样信息

                 console.log(xhr.statusText);

                 $("#resultId").html(xhr.statusText); 

             }

         })

     }

     function doLoad(){

         //1. 申请 url

         var url="/jquery/doAjaxGet";

         //2. 申请参数

         var params="msg=hello jquery ajax get method";

         //3. 发送异步申请

         // 通过 load 函数向服务端发送异步申请，将服务端响应的后果异步更新到

         //resultId 对应的地位

         $("#resultId").load(url,params);

     }

     //......

</script>

</body>

</html>

正文完