jquery的ajax例子

jquery的ajax例子Jquery实现Ajax登录验证页面<%@pagecontentType=”text/html;charset=UTF-8″language=”java”%><html><head><title>Title</title><scriptsrc=”${pageContext.request.contextPath}/static/js/jquery-3.6.0.js”></script>

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

Jquery实现Ajax登录验证

页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.6.0.js"></script>
    <script>
        function a1() {
            $.post({
                url:"${pageContext.request.contextPath}/a3",
                data:{"name":$("#name").val()},
                success:function (data) {
                    if(data.toString()==='ok'){
                        $("#userInfo").css("color","green");
                    }else {
                        $("#userInfo").css("color","red");
                    }
                    $("#userInfo").html(data);
                }
            })
        }
        function a2() {
            $.post({
                url:"${pageContext.request.contextPath}/a3",
                data:{"pwd":$("#pwd").val()},
                success:function (data) {
                    if(data.toString()==='ok'){
                        $("#pwdInfo").css("color","green");
                    }else {
                        $("#pwdInfo").css("color","red");
                    }
                    $("#pwdInfo").html(data);
                }
            })
        }
    </script>
</head>
<body>

<p>
    用户名:<input type="text" id="name" οnblur="a1()">
    <span id="userInfo"></span>
</p>

<p>
    密码:<input type="text" id="pwd" οnblur="a2()">
    <span id="pwdInfo"></span>
</p>

</body>
</html>

请求

@RequestMapping("/a3")
public String a3(String name,String pwd){ 
   
    String msg="";
    if(name!=null){ 
   
        //admin在数据库查
        if("admin".equals(name)){ 
   
            msg="ok";
        }else { 
   
            msg="用户名错误";
        }
    }
    if(pwd!=null){ 
   
        //admin在数据库查
        if("123456".equals(pwd)){ 
   
            msg="ok";
        }else { 
   
            msg="密码错误";
        }
    }
    return msg;
}

使用Jquery的Ajax需要先导入js文件

然后使用$.post(url,data,success)进行异步交互post ,get ,ajax方法都可以实现

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/158745.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 创建java web项目_java搭建环境

    创建java web项目_java搭建环境手把手搭建一个完整的javaweb项目本案例使用Servlet+jsp制作,用MyEclipse和Mysql数据库进行搭建,详细介绍了搭建过程及知识点。下载地址:http://download.csdn.net/detail/qq_23994787/9904842点击下载主要功能有:1.用户注册2.用户登录3.用户列表展示4.用户信息修改5.用户信息删除…

  • Python画图源码|玫瑰花|皮卡丘|小猪佩奇|哆啦A梦|大白|小猫

    Python画图源码|玫瑰花|皮卡丘|小猪佩奇|哆啦A梦|大白|小猫Python各种画图源码Python各种画图源码Python真的太强大了,最近被Python的画图功能给震撼到了,原来Python还能这样画画,简直打开眼界。turtle没错,Python画图用的就是turtle这个库,这个库非常强大,简直就是神笔马良啊,可以画出各种你想要画的东西。所以下面一起来看一些效果图和视频吧效果图两个小孩皮卡丘小猪佩奇小熊猫小狗大熊小猫小鱼儿哆啦A梦小鸭子大白皮卡丘小

  • ubuntu安装python3(源码安装方法)

    ubuntu安装python3(源码安装方法)Ubuntu安装Python3(第0步)建议配置阿里镜像https://developer.aliyun.com/mirror/ubuntu一、安装相关依赖apt-getupdate&&apt-getupgradeapt-getinstall-ybuild-essentialcheckinstalllibreadline-gplv2-devlibncursesw5-devlibssl-devlibsqlite3-devtk-devlibgdbm-devl

  • Python3列表_python sorted

    Python3列表_python sorted列表列表特点:是一种序列结构,与元组不同,列表具有可变性,可以追加、插入、删除、替换列表中的元素新增元素appendappend添加一个对象,可以是任意类型a=['zhangsa

  • springboot下使用拦截器和过滤器[通俗易懂]

    springboot下使用拦截器和过滤器[通俗易懂]1.拦截器InterceptorSpringMVC的拦截器(Interceptor)和Filter不同,但是也可以实现对请求进行预处理,后处理。先介绍它的使用,只需要两步:1.1实现拦截器实现拦截器可以自定义实现HandlerInterceptor接口,也可以通过继承HandlerInterceptorAdapter类,后者是前者的实现类。如果preHandle方法ret…

  • SpringBoot2.x系列教程汇总-从入门到精通「建议收藏」

    SpringBoot2.x系列教程汇总-从入门到精通「建议收藏」因为CSDN没有分类归纳博客的功能,所以特写本帖汇总SpringBoot2.x系列教程,方便大家查阅!SpringBoot2.x系列教程01–史前文明之Spring简介SpringBoot2.x系列教程02–史前文明之Spring发展史SpringBoot2.x系列教程03–新纪元之SpringBoot初相见SpringBoot系列教程04–新纪元之SpringBoot环境……

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号