• 5、Ajaxform与servlet


    为了解决前后端的传输问题使用表单和Ajax的传输方式。

    其中表单对于后端的返回值不会接收,Ajax会接收。

    form如下:

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>form表单登陆页面</title>
    </head>
    <body>
        <form action="index.jsp" method="get">
            <span>账号</span><input type="text" name="username">
            <input type="submit">
        </form>
    </body>
    </html>

    ajax如下:

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>ajax登陆页面</title>
    </head>
    <body>
            <span>账号</span><input type="text" name="username">
            <button>登陆</button>
            
            
            
        <script src="js/jquery-3.6.0.min.js"></script>
        <script>
            $("button").click(function(){
                var username = $("input[name='username']").val();
                $.ajax({
                    url:"user?method=login",            //请求地址
                    type:"get",        //请求方式
                    data:{            //前端给后台发送的参数
                        key:username
                    },    
                    dataType:"json",    //后台给前端返回参数的格式
                    success:function(result){    //result后台给前端响应的参数
                        if(result.status == true){
                            location.href = "index.jsp";
                        }else{
                            alert(result.message);
                        }
                    }
                }); 
            });
        </script>
    </body>
    </html>

    其中返回值使用json是使用一个resultmap类返回,并使用fastjson

    String username = req.getParameter("key");
    if(username.equals("gjj")) {
    resultMap.setStatus(true);
    }else {
    resultMap.setStatus(false);
    resultMap.setMessage("用户名输入有误!");
    }
    String jsonStr = JSON.toJSONString(resultMap);
    return jsonStr;

  • 相关阅读:
    贝叶斯在机器学习中的应用(一)
    使用ajax发送的请求实现页面跳转
    关于welcom-file-list 失效
    在新的线程中使用session 出现的问题
    关于innerHtml= 与 html() 区别
    request.getAttribute()和 request.getParameter()有何区别?
    __STL_VOLATILE
    声明一个返回特定类型函数指针的函数
    关于vue的基础概念
    Vue.js结合vue-router和webpack编写单页路由项目
  • 原文地址:https://www.cnblogs.com/syqlwyx/p/14862715.html
Copyright © 2020-2023  润新知