js和jQuery以及ajax的小练习

今天学习了通过鼠标的点击事件然后让边框变颜色，还有怎么设置一个点击浏览器的输入框然后显示一个边框，还学习了通过ajak来获取post和get的值，通过它如何调用这个函数。

第一部分：

通过鼠标的点击让我们的边框变颜色，通过手在input标签里面敲击键盘让浏览器的consloe显示他的元素，html部分代码就不写主要写js部分因为是主要部分,

<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script>
   $(document).ready(function () {
            $("#input").focus(function () {
                $("#input_out").css("borderColor", "#19b955"); //修改边框的颜色
            });
            $("#input").blur(function () {
                $("#input_out").css("borderColor", "#bbb");
            });
            $("#input").focus()
            function suggest_so(res) {
                console.log(res)
            }

            $("#input").keyup(function () {
            　 var searchCon = $("#input").val();

 //这部分代码主要是跨域的，因为这是一个测试的项目所以，要用人家百度写好的代码自己用所以这个部分不用看，实际的开发项目根据实际的情况，这部分代码需要跟下面的代码连接在一起的。

                var scriptElement = document.createElement('script');

                scriptElement.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?json=1&cb=cbFun&wd=' + searchCon;

                document.body.appendChild(scriptElement);

 });
</script>

第二部分：

第二部分主要是学习通过keyup的监听事件，当你敲击键盘的时候在浏览器里面的console会显示你在浏览器里面所输出的数组以及在浏览器的页面显示一个列表出来，这一部分的代码是靠前面的。

 function cbFun(data) {
            var result = data.s;   // json  js数组操作
            $("#searchResult").empty()
            for (var i = 0; i < result.length;i++) {
                $("#searchResult").append("<li>"+result[i]+"</li>")
            }
            if(result.length == 0){
                $(".drop").hide()
            } else {
                $(".drop").show()
            }
        }

整体的代码

<script>
        function cbFun(data) {
            // console.log(data);
            // console.log(data.g);
            // console.log(data.g[0]);
            // console.log(data.g[0].q);
            var result = data.s;   // json  js数组操作
            $("#searchResult").empty()
            for (var i = 0; i < result.length;i++) {
                $("#searchResult").append("<li>"+result[i]+"</li>")
            }
            if(result.length == 0){
                $(".drop").hide()
            } else {
                $(".drop").show()
            }
        }
        $(document).ready(function () {
            $("#input").focus(function () {
                $("#input_out").css("borderColor", "#19b955"); //修改边框的颜色
            });
            $("#input").blur(function () {
                $("#input_out").css("borderColor", "#bbb");
            });
            $("#input").focus()
            function suggest_so(res) {
                console.log(res)
            }

            $("#input").keyup(function () {
                var searchCon = $("#input").val();

                // 不要看
                var scriptElement = document.createElement('script');
                scriptElement.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?json=1&cb=cbFun&wd=' + searchCon;
                document.body.appendChild(scriptElement);
            })
        });
    </script>

第三部分：

这部分主要是学习，get和post的区别，以及使用ajax是如何实现get和post一些敏感数据显示在网页上。

 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
    
    // GET
    $.ajax({
        type:"get",
        url:"http://localhost:3000/aaa?id=123&password=456"
    }).then(function(res){
        console.log(res)
        console.log(res.user)
        $("#getAccount").text(res.user)
        $("#getAccount_1").text(res.password)
        console.log(res.password)
        // 网络正常 200  400左右的问题  500以上的问题都是服务器后台的
    },function(res){
       
        // 网络正常
    })
    
    // POST
    $.ajax({
        type:"post",
        url:"http://localhost:3000/bbb",
        data:{
            "id":"123123121",
            "password":"123232323232"
            
        }
        
    }).then(function(res){
        console.log(res)
        console.log(res.user)
        console.log(res.password)
        $("#getAccount_2").text(res.user)
        $("#getAccount_3").text(res.password)

        // 网络正常 200  400左右的问题  500以上的问题都是服务器后台的
    },function(res){
        // 网络正常
    })