前端和后台对接案例

最新推荐文章于 2024-07-21 10:19:19 发布

大可&不必

最新推荐文章于 2024-07-21 10:19:19 发布

阅读量1.1k

点赞数 1

分类专栏： jquery 文章标签： javascript jquery

原文链接：https://blog.csdn.net/gao_zhennan/article/details/81022832

版权

jquery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

前端访问后端接口通过后端提供的的URL

<!DOCTYPE html>
<html>
<head>
<title>login.html</title>
<meta charset="utf-8">
</head>

<！-- 待补充的javaScript Ajax请求代码 在下面 --！>

<body>
    <form action="#">
        username:<input type="text" name="username"><br>
        password:<input type="password" name="password"><br>
        <input type="button" value="submit" id="submit">
    </form>
</body>
</html>

2、Ajax请求代码
这里使用了jquery-1.8.3.js库，顺便回顾下函数的书写格式
格式：jQuery.ajax([settings])

参数settings：设置所有的参数,JSON对象
data:请求参数
type:请求方式 (“POST” 或 “GET”)，
success:成功的回调函数，function(data, [textStatus], [jqXHR])
error:请求失败时调用函数
dataType:预期服务器返回的数据类型

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(function(){
        $("#submit").click(function(){
        var url = "/myblog/servlet/loginServlet";
        var params = {"username":$("input[type='text']").val(), "password":$("input[type='password']").val()};

        $.ajax({
                "url" : url,
                "data" : params,
                "type" : "post",
                "success" : function(data) {
                    // 参数为json类型的对象
                    alert(data.message)
                },
                "error" : function() {
                    alert("用户名或者密码错误");
                }
            });

        });
    });
</script>

大可&不必

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
前端和后台对接案例

前端访问后端接口通过后端提供的的URL<!DOCTYPE html><html><head><title>login.html</title><meta charset="utf-8"></head><！-- 待补充的javaScript Ajax请求代码在下面 --！><b...
复制链接

扫一扫

专栏目录