day13

Day13

javascript

简单实现图片的轮播

上代码：

//js代码本人写在头文件中。 
<script type="text/javascript">
        var picsArr = new Array();
        picsArr[0] = "images/lunbotu/fang1.jpg";//将图片放入一个数组中
        picsArr[1] = "images/lunbotu/fang2.jpg";
        picsArr[2] = "images/lunbotu/fang3.jpg";
        var index = 0;//图片位置
        var timer = 0;//自动时间
        window.onload = showPic;
        function showNext() {
            //1.定时  2.点击下一页
            clearTimeout(timer);
            showPic().fadeIn(100);

        }
        function showPic() {//下一页
            if(index<picsArr.length-1){
                index++;
            }else{
                index = 0;
            }
            document.getElementById("pic").src = picsArr[index];  //找到id=pic时将其中src属性换成写的。
            timer = setTimeout("showPic()",2000);
        }

        function showPre() {
            showPuc()
        }
        function showPuc() {//上一页
            if(index>0){
                index--;
            }else{
                index = picsArr.length-1;
            }
            document.getElementById("pic").src = picsArr[index];
        }

    </script>


//网页代码
<div class="width1190">
    <ul id="adv">
        <li style="display: block;"><img src="images/lunbotu/fang1.jpg" alt="" id="pic"></li>
        <img src="images/lunbotu/l.png" id="prev" alt="" οnclick="showPre()">
        <img src="images/lunbotu/r.png" id="next" alt="" οnclick="showNext()">
    </ul>
</div>

javascript登录实现

<script type="text/javascript">
        function postLogin() {
            //1.获得表单里的值
            var username=document.getElementById("username").value;
            var password=document.getElementById("password").value;
            var params='username='+username+'&password='+password;
            alert(params);

            var requset=new XMLHttpRequest();//2.创建XMLHttpRequest对象

            requset.open("post","${pageContext.request.contextPath}/user/Login2.do",true);//3.发送请求
            requset.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//post写法必须写的固定写法
            requset.send(params);

            //4.监听状态的改变
            requset.onreadystatechange = function (){
                if(requset.readyState==4&&requset.status==200){//满足这样的条件就表明请求发送成功了
                    var aaa=requset.responseText;
                    if(aaa=="success")
                        alert('登录成功')
                    else
                        alert('登录失败')
                    alert(params);
                }
            }
        }
    </script>

最后在提交的按钮里加一个onclick的监听就可以实现上面的代码了

AjAX以及jQuery实现登录

是异步的js和xml

同步：同时只能干一件事情

异步：可以同时做很多事情

例：烧水的时候可以写作业，水开了在泡茶，泡好茶接着写作业

需要监听，通知水开了

post：性对安全，传输的数据量大长度没有限制，参数写在http的包体中

get：效率高，参数写在URL里面，长度有限制，相对不安全

<script type="text/javascript">
        function postlogin() {
            var username = $('#username').val();//获取值
            var password = $('#password').val();
            $.ajax({
                type:"post",
                url:"${pageContext.request.contextPath}/user/Login2.do",
                data:{
                    username:username,
                    password:password,
                },
                success:function (data) {
                    if(data=="success111")
                        alert('成功');
                    else
                        alert('失败');
                },
                error:function () {
                    alert('连接失败');
                }
            });
        }
    </script>