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方法都可以实现

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

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

(0)
上一篇 2022年7月26日 下午8:16
下一篇 2022年7月26日 下午8:16


相关推荐

  • 使用instsrv.exe和srvany.exe将应用程序安装成windows后台服务

    使用instsrv.exe和srvany.exe将应用程序安装成windows后台服务windows系统下的自带的工具包介绍

    2022年5月22日
    28
  • python编译安装ssl的问题解决

    python编译安装ssl的问题解决python 编译安装需要 ssl 模块才能使用 pip 且 ssl 需要支持 x509 如果 openssl 版本太低 则无法安装 ssl 对应模块 如果支持 ssl 在 configure 的时候能看到 以下不需要管理员权限 解决方案 编译安装 openssl 最新版 1 安装 openssl 下载地址 https www openssl org source 解压后进入文件夹 configprefix openssl install pathmakemake openssl in

    2025年11月25日
    7
  • 常用webservice方法_太极拳初学入门的基本要领

    常用webservice方法_太极拳初学入门的基本要领1.什么是webservice先来考虑一个问题,如果我们要在自己的程序里面展示天气预报,那怎么弄?正确的做法是我们发送一个请求到一个系统,他会给我们返回来天气情况。这个就是一个webservice。天气预报系统就相当于webservice的服务端,我们的系统就相当于客户端。2.如何调用别人发布的webservice

    2026年2月9日
    5
  • 【ArcGIS Pro微课1000例】0016:ArcGIS Pro 2.8浮雕效果地图制图案例教程[通俗易懂]

    【ArcGIS Pro微课1000例】0016:ArcGIS Pro 2.8浮雕效果地图制图案例教程[通俗易懂]ArcGISPro制作地图时可以制作出很多很炫的效果,比如地图阴影、地图晕渲效果、浮雕效果、三维效果等等。本实验讲解在ArcGISPro2.8中制作浮雕效果地图,效果如下所示:【参考阅读】:ArcGIS实验教程——实验四十四:ArcGIS地图浮雕效果制作完整案例教程1.加载矢量数据加载实验数据包data16.rar中的秦安县乡镇矢量数据:2.缓冲区分析点击【分析】选项卡,点击【缓冲区】。输入要素选择秦安县乡镇数据,选择输出要素路径,线性单位输入-0.4,单位为千米,侧类型选择.

    2025年9月15日
    7
  • Android模拟器怎么配置网络连通

    Android模拟器怎么配置网络连通原文 http blog csdn net hongchangfir article details 作者 hongchangfir nbsp nbsp nbsp nbsp nbsp nbsp nbsp PC 机可以上网 PC 机上面的 android 模拟器不能上网 其实只要使模拟器跟自己的 PC 在同一个网段内就行了 nbsp nbsp nbsp nbsp nbsp 首先 如果没有配置 sdk 的环境变量的 那么在 CMD 命令

    2026年3月26日
    1
  • vue生命周期及其应用场景_介绍vue生命周期流程

    vue生命周期及其应用场景_介绍vue生命周期流程文章目录一,vue生命周期函数:一,vue生命周期函数:vue的生命周期函数又叫钩子函数:生命周期方法详解:beforeCreate//详情//实例初始化之后,组件被创建前,这个时候的el,data,message都是underfined//场景//可以加入loading事件;beforeCreated//详情//实例创建完成后,data、methods被初始化//场景//结束loading事件befor

    2022年10月21日
    11

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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