JQuery AJAX用法

作者: 叫我小码哥 | 来源:发表于2019-04-28 08:22 被阅读0次

jQuery ajax——参数详解
ajax
JQuery AJAX用法
Jquery Ajax 封装
jQuery API学习之ajax与回调对象篇
2019-11-08
Ajax实现登陆验证
jQuery中的ajax
jQuery中的Ajax
ajax使用注意

html,css代码

<head>
    <meta charset="UTF-8">
    <title>主界面</title>
    <style type="text/css">
        body{
            background-image: url(img/2.png);
            background-repeat: no-repeat;
            background-size: 100% 120%;
        }
        .img td input{
            with: 80px;
            height: 30px;
        }
        font{
            color: #fafafa;
        }
    </style>
</head>
<body>
    <h1 align="center">主界面</h1>
    <form>
        <table class="table" align="center" width="300px"  border="0"  cellpadding="0"cellspacing="1">
            <tr>
                <td align="center" colspan="2"><img src="img/1.png" alt="假装有个图片" with="10%" height="10%"//></td>
            </tr>
            <tr>
                <td align="center" height="50px">用户名：</td>
                <td  height="50px"><input type="text" id="userPhone"/></td>
            </tr>
            <tr>
                <td align="center" height="50px">密码：</td>
                <td height="50px"><input type="password" id="userPassword"/></td>
            </tr>
            <tr>
                <td align="right" ><input type="radio" name="personId"  checked="checked" value="1"/>用户</td>         
                <td align="center"><input type="radio" name="personId" value="2"/>商家</td>
            </tr>

            <tr>
                <td height="80px" align="right" ><input type="button" id="login" value="登录"/></td>
                <td height="80px" align="center" ><input type="button" id="resign" value="注册"/></td>
            </tr>
        </table>
    </form>
</body>

Jquery AJAX

<script src="jquery.min (1).js"></script>
    <script type="text/javascript"> 
        //登录
        $("#login").click(function(){       
            if($('input:radio:checked').val() == 1){
                $.ajax({
                    url: 'http://127.0.0.1:8080/renting/user/login',
                    data: {
                        "userPhone": $("#userPhone").val(),
                        "userPassword": $("#userPassword").val(),
                    },
                    type: "get",
                    async: false,               
                    dataType: "jsonp",
                    jsonpCallback: "foo",
                    success: function (data) {                      
                        console.log(data);
                        if (data.statue === "SUCCEED" || data.bool === true){
                            alert("用户验证成功");
                            $(window).attr('location','show.html');
                        }else{
                            alert("用户名或密码有误");
                        }

                    },
                    error: function () {
                        alert('接收数据失败');
                    }
                });
            }else{
                $.ajax({
                    url: 'http://127.0.0.1:8080/renting/seller/login',
                    data: {
                        "sellerPhone": $("#userPhone").val(),
                        "sellerPassword": $("#userPassword").val(),
                    },
                    type: "get",
                    async: false,               
                    dataType: "jsonp",
                    jsonpCallback: "foo",
                    success: function (data) {
                        console.log(data);
                        if (data.statue === "SUCCEED" || data.bool === true){
                            alert("验证成功");
                            $(window).attr('location','businessResign.html');
                        }else{
                            alert("用户名或密码有误");
                        }
                    },
                    error: function () {
                        alert('接收数据失败');
                    }
                }); 
            
            }       
    
        });
    //注册
    $("#resign").click(function(){
        
        if($('input:radio:checked').val() == 1){
            $(window).attr('location','userResign.html');
        }else{
            $(window).attr('location','sellerResign.html');
        }
        
        
    
    });
    </script>