Ajax解决登录问题

最新推荐文章于 2024-07-02 00:50:11 发布

旺仔碎碎

最新推荐文章于 2024-07-02 00:50:11 发布

阅读量192

点赞数

分类专栏： Java基础文章标签： java ajax js web

本文链接：https://blog.csdn.net/qq_45020745/article/details/107374997

版权

Java基础专栏收录该内容

23 篇文章 0 订阅

订阅专栏

框架

在这里插入图片描述

index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>这是jsp界面</title>
    <%-- 导入jquery控件  ./同级目录--%>
    <script src="./js/jquery-1.11.1.min.js"> </script>
  </head>
  <script type ="text/javascript">
    alert("这是我的web项目")
    //声明一个函数 function关键字用来声明函数
    function def(){
      alert("这是一个函数")
      //document.getElementById("idName") js代码获取一个标签 根据id属性获取
      //想要获取到值的话我们要给一个val()函数
      //var value=document.getElementById("idName").val()
      //通过标签选择器来获取值
      // jqurey语法去获取一个标签
      var biaoshi2=$("#idName").val;//表达方式1
      var biaoshi=$("[name='biaoshi']").val();
      alert("这个值是"+biaoshi)
    }
  </script>
  <body>

list.jsp

  <%--
  1.什么是jquery
  jquery其实就是一个Java script的一个类库
  2.有什么作用
  简化了 java script的开发
  3.jquery是一个框架或者说是一个控件 如果要使用的话 我们需要导入jquery控件
  --%>
<table>

  <tr>
    <td>用户名</td>
    <td><input type="text" id="idName" name="biaoshi"> </td>
    <td><input type="button" value="测试" onclick="def()"></td>

  </tr>
    <tr>
        <td>密码</td>
        <td><input type="text" id="idName2" name="biaoshi2"> </td>
        <td><input type="button" value="测试" onclick="def()"></td>

    </tr>
  <tr>
    <td><input type="button" value="提交" onclick="alert('你好啊')"> </td>
  </tr>
  <tr>
    <td>测试函数</td>
    <td><input type="button" value="测试函数" onclick="def()"></td>

  </tr>

</table>
  </body>
</html>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<%--导入jquery控件--%>
<script src="./js/jquery-1.11.1.min.js"> </script>
<script>

    // $.ajax({
    //     url:"WebServlet?method=login",
    //     type:"post",
    //     date:{username:username,passward:passward},
    //     success:function(obj){
    //         if(obj){
    //         alert("恭喜你登录成功");
    //         location.href="http://localhost:8080/list.jsp";
    //         }else {
    //             alert("登陆失败");
    //         }
    //     },
    //     dateType:"json"
    // })
    //ajax一定要写在函数里面 ，方便我们调用
    //定义一个函数
    function fun(){
        //ajax 与后端的异步交互技术
        //url获取后端路径
        //type 提交方法类型  post get
        //date 前端给后端打包的数据 {username:username,passward:passward}
        //success 成功之后响应后端（成功之后的回调函数）
        //dataType 预期服务器给前端返回的数据类型

        //----------------------、
        //获取标签的值 ，通过定位内部属性是idname的值

        var idName=$("[name='idName']").val();
      $.ajax({
            //获取后端路径，根据配置文件定位web.xml   method==aaaa的可以不写，这个只是为了手动给后端传递参数
            url:"/WebServlet?method=aaaaaa",
            //type 提交方法类型  post:提交的数据内容更加多一点 get
            type:"post",
            //date 前端给后端打包的数据 name自己定义的
           data:{idName:idName},
          //success 成功之后响应后端（成功之后的回调函数） flagJson后端传递的
          success:function(flag){

                if(flag){
                    alert("后端已经接受到我传递的数据了")
                }

          },
          //dataType 预期服务器给前端返回的数据类型
          dateType:"json"

        })

    }


</script>

<body>
<input type="text" name="idName" id="idName">
<input type="button" value="提交" onclick="fun()">

</body>
</html>

webServet.java

package servlet_test;
import com.alibaba.fastjson.JSON;
import com.sun.javaws.IconUtil;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class WebServet extends HttpServlet {
    /**
     * HttpServletRequest 请求
     *HttpServletResponse  响应
     */
    @Override
    //重写HttpServlet里的方法
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //super.service(req, resp); 重写父类方法 ，不需要父类的业务逻辑，所以不需要 就可以删除了
    //获取前端接入过来的值
        String method=req.getParameter("method");
        //获取前端idName的值
        String idName=req.getParameter("idName");
        System.out.println("method的值为"+method+"idName的值为"+idName);
        boolean flag=true;
        //把flag打包成json类型,只有这样才可以被前端识别
        String flagJson=JSON.toJSONString(flag);
        //把数据写回前端
        resp.getWriter().print(flagJson);
    }
}

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <servlet>
        <description></description>
        <display-name>WebServlet</display-name>
        <servlet-name>WebServlet</servlet-name>
        <servlet-class>servlet_test.WebServet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>WebServlet</servlet-name>
        <url-pattern>/WebServlet</url-pattern>
    </servlet-mapping>
</web-app>

旺仔碎碎

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax解决登录问题

框架index.jsp<%@ page contentType="text/html;charset=UTF-8" language="java" %><html> <head> <title>这是jsp界面</title> <%-- 导入jquery控件 ./同级目录--%> <script src="./js/jquery-1.11.1.min.js"> </script&gt
复制链接

扫一扫