乐趣区

关于springboot:第六天的代码

作者：

jiezi

在

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>

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

更多文章