Ajax

作者: wanggs | 来源:发表于2017-10-26 16:39 被阅读0次

    请求方式

    ajax
    $.ajax({
                            url : "/login",
                            type : "post",
                            data : $("#loginForm").serialize(),
                            beforeSend:function(){
                                $("#loginBtn").append($("<i class='fa fa-spinner fa-spin'></i>")).attr("disabled","disabled");
                            },
                            complete:function(){
                                $("#loginBtn").html("登录").removeAttr("disabled");
                            },
                            success : function(data) {
                                if(data.state == "error") {
                                    alert(data.message);
                                } else {
                                    window.location.href = "/jq/demo1.jsp";
                                }
                            },
                            error : function() {
                                alert("服务器错误");
                            }
                        });
    
    post
     $("#loginBtn").click(function(){
                    var username = $("#username").val();
                    var password = $("#password").val();
    
                    //alert($("#loginForm").serialize());
    
                    $.post("/login",$("#loginForm").serialize()).done(function(data){
                        if(data.state == "error") {
                            alert(data.message);
                        } else {
                            window.location.href = "/jq/demo1.jsp";
                        }
                    }).error(function(){
                        alert("服务器异常");
                    });
                })
    
    get
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
    
    <input type="text" id="username">
    <span id="loding" style="display: none">![](/static/img/loding.gif)</span>
    <span id="text"></span>
    
    <script src="/static/js/jquery-1.11.3.min.js"></script>
    <script>
        $(function () {
            $(document).ajaxSend(function(){
                $("#loding").show();
            });
            $(document).ajaxComplete(function(){
                $("#loding").hide();
            });
    
            $("#username").blur(function(){
                var name = $(this).val();
    
                $.get("/ajax",{"name":"ajax"},function(data){
                    alert(data);
                });
    
                /*$.post("/ajaxs",{"name":name,"age":23})
                    .done(function(data){
                        $("#text").text(data);
                    })
                    .error(function(){
                        alert("服务器端错误");
                    });*/
    
    
    
                /*$.ajax({
                    url : "/ajax",
                    type : "post",
                    data : {"name":name,"age":23},
                    timeout : 15000,
                    beforeSend : function(){
                        //请求发送之前做的函数
                        $("#loding").show();
                        $("#text").text("");
                    },
                    success : function(data){
                        $("#text").text(data);
                    },
                    error : function(){
                        alert("服务器异常");
                    },
                    complete : function(){
                        //无论success还是error都会执行
                        $("#loding").hide();
                    }
                });*/
    
    
            });
        });
    </script>
    </body>
    </html>
    

    相关文章

      网友评论

        本文标题:Ajax

        本文链接:https://www.haomeiwen.com/subject/phpkpxtx.html