前端与后台交互-案例解析

最新推荐文章于 2024-10-06 14:22:54 发布

seven豆

最新推荐文章于 2024-10-06 14:22:54 发布

阅读量2.4k

点赞数 3

分类专栏： JavaScript 开发总结文章标签： ajax

本文链接：https://blog.csdn.net/qq_35546787/article/details/107980700

版权

开发总结同时被 2 个专栏收录

10 篇文章 1 订阅

订阅专栏

JavaScript

9 篇文章 0 订阅

订阅专栏

前端与后台交互

前端与后端的交互方式分为以下几种：

1.href页面跳转模式

前端通过url访问后端的servlet，后端返回一个html页面或字符串

可以在url地址后附加参数，例如http://www.123.com?name=jay&age=34

2.form表单提交模式

分为get和post

通过submit直接提交（非ajax），后端返回一个html页面或字符串

3.ajax提交模式

分为get和post

页面不会全部刷新，局部模块提交

通常返回数据列表或处理结果的json字符串，通过JSON.stringify()函数解析json字符串

案例分析

1，前端页面提供用户名，密码输入框。
2，通过Ajax发送请求到后端Serlvet。
3，后端Serlvet处理请求，根据输入的用户名和密码返回给前端不同信息

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

主要代码

1、前端页面

<!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>

3、Servlet代码及web.xml配置
写这个，有点弱智了，但为了代码的完整性，忍一下吧！
web.xml

<servlet>
    <servlet-name>LoginServlet</servlet-name>
    <servlet-class>com.imooc.login.LoginServlet</servlet-class>
  </servlet>

 <servlet-mapping>
    <servlet-name>LoginServlet</servlet-name>
    <url-pattern>/servlet/loginServlet</url-pattern>
  </servlet-mapping>

servlet:

public class LoginServlet extends HttpServlet {

    private static final long serialVersionUID = 5417488369543075097L;

    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        String message = "{\"message\":\"登录成功\"}";
        response.setContentType("application/json;charset=utf-8");
        if("双击".equals(username) && "666".equals(password)) {
            response.getWriter().write(message);
        }
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }

}