AJAX Jquery JSON 【笔记+案例】

最新推荐文章于 2024-07-25 12:41:07 发布
最新推荐文章于 2024-07-25 12:41:07 发布
阅读量798 收藏
点赞数
分类专栏： AJAX 用户名已存在 文章标签： ajax java jquery json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/KKKYolanda/article/details/122130194
版权

版本一

1. SelectUserServlet

package web.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.Serial;

/**
 * 注册时用户名是否存在
 *
 * @author KKK
 */
@WebServlet(name = "SelectUserServlet", value = "/selectUser")
public class SelectUserServlet extends HttpServlet {
  @Serial private static final long serialVersionUID = 7592892756611769375L;

  @Override
  protected void doGet(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {
    // 1.接收参数
    String username = request.getParameter("username");
    // 2.调用service查询user对象
    boolean flag = true;

    // 3.响应标记
    response.getWriter().write("" + flag);
    // 然后去注册页面找username的id
  }

  @Override
  protected void doPost(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {}
}

2. jsp页面 --AJAX

<script>


    //用户名是否存在
    //1.给用户名输入框绑定onblur事件
    document.getElementById("username").onblur = function () {

        //2.发送ajax请求
        //获取用户名的值
        var username = this.value;
        //2.1创建核心对象
        var xhttp;
        if (window.XMLHttpRequest) {
            xhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //2.2向服务器发送请求
        xhttp.open("GET", "http://localhost:8080/selectUser?username=" + username);
        xhttp.send();
        //2.3获取响应
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                //alert(this.responseText);
                if (this.responseText == "true") {
                    //用户名存在，显示提示信息，设置class=error_msg的style
                    document.getElementById("username_err").style.display = '';
                } else {
                    //用户名不存在，清除提示信息
                    document.getElementById("username_err").style.display = 'none';
                }
            }

        }
    }

</script>

3. jsp页面 --注册部分

 <form action="userServlet" method="post">
                    <input type="hidden" name="action" value="regist">
                    <h2>Create an account</h2>

--------------主要看这一块-------------------------------------------
                    <input class="itxt" autocomplete="off" id="username" name="username" placeholder="Username"
                           type="text" value="${requestScope.username}">
                    <br>
                    <span id="username_err" class="error_msg" style="display: none">此用户名已存在</span>

---------------------------------------------------------------------

                    <input class="itxt" autocomplete="off" id="email" name="email" placeholder="Email Address"
                           type="text" value="${requestScope.email}">
                    <input class="itxt" autocomplete="off" id="password" name="password" placeholder="Create Password"
                           type="password">
                    <input class="itxt" autocomplete="off" id="repwd" name="repwd" placeholder="Confirm Password"
                           type="password">
                    <label>验证码：</label>
                    <input class="itxt" type="text" name="code" style="width: 80px;" id="code" value="abcde"/>
                    <img alt="" src="img/code.bmp" style="float: right; margin-right: 40px">

                    <input type="submit" value="Sign Up" id="sub_btn">
                    <p class="signup">Already have an account? <a href="#" onclick="toggleForm();">Sign in.</a></p>
                </form>

版本二

在这里插入图片描述

2. jsp页面

2.1 根据ajax实现

<%--
  Created by IntelliJ IDEA.
  User: xiaomi
  Date: 2021/3/4
  Time: 17:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
  </head>
  <script type="text/javascript">
     function  test() {
        //发送异步请求
       //1.创建XMLHttpRequest对象
      var xmlhttp;
      if(window.XMLHttpRequest){
        //非IE
        xmlhttp=new XMLHttpRequest();
      }else if(window.ActiveXObject){
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
       //2.打开链接
      var uname= document.getElementById("uname").value;
      //xmlhttp.open("get","/testuname?username="+uname,true);
       xmlhttp.open("post","/testuname",true);
       //3.指定回调函数
      xmlhttp.onreadystatechange=function(){
        //3.1 判断状态
        if(xmlhttp.readyState==4){
          //3.2 接收返回的数据
          var responseText = xmlhttp.responseText;
          document.getElementById("rs").innerText=responseText;
        }
      }
       //4.发送数据
       //xmlhttp.send();
       //post
       xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=UTF-8");
       xmlhttp.send("username="+uname);
     }

  </script>

  <body>
  <h1>index.jsp</h1>

  username:<input type="text" id="uname" onblur="test()"><span id="rs"></span>
  </body>
</html>

2.2 根据jquery实现

<%--
  Created by IntelliJ IDEA.
  User: xiaomi
  Date: 2021/3/4
  Time: 17:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
  </head>
  <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
  <script type="text/javascript">
    $(function(){
      $("#uname").blur(function(){
        //1.获得value值
        var uname = $(this).val();
        //2.发送请求
       /* $.ajax({
          url:"/testuname",
          data:"username="+uname,
          type:"post",
          dataType:"text",
          success:function(rs){
            $("#rs").html(rs);
          }
           });
          */
          
      /* $.get("/testuname","username="+uname,function(rs){
           $("#rs").html(rs);
        });*/

        $.post("/testuname","username="+uname,function(rs){
          $("#rs").html(rs);
        });

      });

    })

  </script>
  <body>
  <h1>jquery_ajax.jsp</h1>

  username:<input type="text" id="uname" ><span id="rs"></span>
  </body>
</html>

3. TestServlet

package servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet(urlPatterns = "/testuname")
public class TestServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
         //1.接收参数
        String username = req.getParameter("username");
        resp.setContentType("text/html;charset=utf-8");
        PrintWriter writer = resp.getWriter();

        if("admin".equals(username)){
            writer.println("账户已被注册");
        }else{
            writer.println("账户可用");
        }
    }
}

JSON

1. JSON的存值取值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript">
        //1.定义json
        var j1={"name":"张三","age":18};
       // alert(j1.name+","+j1.age);
        //数组
        var j2={"names":["aa","bb","cc"]};
        alert(j2.names[1]);
        //json数组内容
        var j3={"users":[{"name":"张三1","age":18},{"name":"张三2","age":15},{"name":"张三3","age":13}]};
        alert(j3.users[2].name);

    </script>
</head>
<body>

</body>
</html>

2. JSON与JAVA对象之间的转换

在这里插入图片描述

实体类

package bean;

//实体类
public class Users {
    private Integer uid;
    private String username;
    private String password;
    private Double money;

    @Override
    public String toString() {
        return "Users{" +
                "uid=" + uid +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                ", money=" + money +
                '}';
    }

    public Users() {
    }

    public Users(Integer uid, String username, String password, Double money) {
        this.uid = uid;
        this.username = username;
        this.password = password;
        this.money = money;
    }

    public Integer getUid() {
        return uid;
    }

    public void setUid(Integer uid) {
        this.uid = uid;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public Double getMoney() {
        return money;
    }

    public void setMoney(Double money) {
        this.money = money;
    }
}

JSON与JAVA的转换

package test;

import bean.Users;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

import java.util.ArrayList;


public class Demo {
    public static void main(String[] args) {
    
        //java->json
        Users users = new Users(11,"aaa","123456",123.456);
        JSONObject jsonObject = JSONObject.fromObject(users);
        System.out.println(jsonObject);//json

        //json-java
        String str="{\"money\":123.456,\"password\":\"123456\",\"uid\":11,\"username\":\"aaa\"}";
        JSONObject jsonObject1 = JSONObject.fromObject(str);
        Object o = JSONObject.toBean(jsonObject1, Users.class);
        System.out.println("o="+o);

        //java集合->json
        ArrayList arrayList = new ArrayList();
        arrayList.add(new Users(1,"张三","123",12.34));
        arrayList.add(new Users(2,"张三2","12322",1244.34));
        arrayList.add(new Users(3,"张三3","12333",1255.34));
        JSONArray jsonArray = JSONArray.fromObject(arrayList);//json
        System.out.println(jsonArray);

        //json->java集合
        String str2="[{\"money\":12.34,\"password\":\"123\",\"uid\":1,\"username\":\"张三\"},{\"money\":1244.34,\"password\":\"12322\",\"uid\":2,\"username\":\"张三2\"},{\"money\":1255.34,\"password\":\"12333\",\"uid\":3,\"username\":\"张三3\"}]";
        JSONArray jsonArray2 = JSONArray.fromObject(str2);

        Object[] o1 = (Object[])JSONArray.toArray(jsonArray2, Users.class);
        for (Object o2 : o1) {
            System.out.println("o2="+o2);
        }

    }
}

json和AJAX案例

通过id回显用户信息

1. GetUsersServlet

package servlet;

import bean.Users;
import net.sf.json.JSONObject;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet(urlPatterns = "/getuser")
public class GetUsersServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
         //1.接收参数
        String uid = req.getParameter("uid");
        int userid=Integer.parseInt(uid);
        Users users=null;
        switch (userid){
            case  1:
                users=new Users(1,"张三","abc",11.22);
                break;
            case  2:
                users=new Users(2,"张三2","abc2",222.1);
                break;
            case  3:
                users=new Users(3,"张三3","abc3",33.2);
                break;
            case  4:
                users=new Users(4,"张三4","abc4",44.4);
                break;
            default:
                users=new Users();
        }

        //java->json
        JSONObject jsonObject = JSONObject.fromObject(users);//json

        resp.setContentType("text/html;charset=utf-8");
        PrintWriter writer = resp.getWriter();
        writer.print(jsonObject);

    }
}

2. jsp页面

<%--
  Created by IntelliJ IDEA.
  User: xiaomi
  Date: 2021/3/5
  Time: 11:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("#uid").blur(function(){
            //1.获得value值
            var uid = $(this).val();
            //2.发送请求
            $.post("/getuser","uid="+uid,function(rs){
                //转换成可以处理的js
                rs=eval("("+rs+")");
                //此时的rs是json格式的对象
                $("#uname").val(rs.username);
                $("#pass").val(rs.password);
                $("#money").val(rs.money);
            });
        });
    })

</script>
<body>
    uid:<input type="text" id="uid"><br>
    name:<input type="text" id="uname"><br>
    pass:<input type="text" id="pass"><br>
    money:<input type="text" id="money">
</body>
</html>

如果启动tomcat 报错显示找不到类，就把lib里的东西复制到tomcat的lib里面

Yolanda KB
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Ajax和jQuery详细笔记
weixin_47541976的博客
08-23 293
Ajax和jQuery详细笔记
ajax （部分案例使用jquery）实例集锦
10-26
ajax极好的实例代码集锦，部分实例应用了jquery框架，代码极其规范，实用价值极强，极具学习和参考的价值。
JQuery+Ajax+Json
2401_84153193的博客
05-05 538
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
jquery ajax java 源码_java+ajax+json+jquery完整实例
weixin_39556811的博客
02-26 88
【实例简介】实现了java+ajax+json+jquery的完整实例，包括ajax+jquery向后台传参，后台传输json数据到前台ajax接收。里面有自己遇到的四个问题，及解决的具体办法。【实例截图】【核心代码】jsonajax简单实例└── json+ajax简单实例├── json+ajax随手笔记.txt└── jsonTest├── build│ └── classes│ ...
JQuery +AJAX+JSON笔记
weixin_43271235的博客
05-02 163
JQuery +AJAX+JSON 内容基本是黑马视频笔记，偶尔会加些个人补充，仅作为复习巩固用途。如有错误，请指出，谢谢。 AJAX与JSON放一起是因为，ajax传回来数据目前看到的大多是json JQuery 基础：比较重要 1. 概念： 一个JavaScript框架。简化JS开发 * jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaS...
JSON、Ajax、jQuery学习笔记
jnydep的博客
04-01 512
Web 1.0时代 早期网站，登录，如果失败，需要刷新页面，才能重新登录；不点击提交，就不知道自己的密码错了； 现在大多数网站，都是局部刷新，不刷新整个页面的情况下，实现页面刷新； 注册的时候，发现手机已经注册过了，但是只要是输入了，没有提交，就会出现提示。 web 2.0时代，最重要的一个因素就是Ajax JSON JSON（JavaScript Object Notation, JS 对象标记）是一种轻量级的数据交换格式。 采用完全独立于编程语言的文本格式来存储和表示数据，是一个理想的数据交.
Ajax&Json笔记【极简】
qq_38777882的博客
12-26 392
Ajax&Json笔记[极简] Ajax快速入门 --使用JQuery封装的方法发送异步请求 方式一 $.ajax({ url:"findUser",//请求路径 type:"GET",//请求类型 data:"{"username":"tom","age":28}",//请求参数 success:function(data){}//响应成功后的回调函数 error:function(){}//响应失败后的回调函数 dataType:"js
Ajax+JQuery+Vue
qq_53662170的博客
04-12 1746
Ajax+JQuery+Vue学习笔记Ajax1. 全局刷新和局部刷新全局刷新局部刷新2. Ajax概念3. Ajax异步实现步骤step 01 创建异步对象step 02 给异步对象绑定事件step 03 初始异步请求对象step 04 使用异步对象发送请求step 补充说明4. Ajax举例：计算BMI5. Ajax举例：根据省份id查询省份名称6.JSON7.同步和异步JQuery1.jQuery概述2.DOM对象和jQuery对象3.选择器基本选择器表单选择器过滤器表单对象属性过滤器4.jQuery
jquery，ajax笔记,ajax|jquery笔记
weixin_39608132的博客
08-06 376
1.index.PHP$(document).ready(function(){$('#submitbt').click(function(){//var name = $('#name').val();//var dataString = "name="+name;var dataPass = {'name': $("#name").val()};$.ajax({type: "POST",url...
JSON_ajax笔记2
08-08
jQuery提供了$.ajax方法简化了AJAX操作，可以更直观地指定请求参数，如URL、请求类型、发送的数据等： ```javascript $.ajax({ url: "请求地址", type: "GET或POST", data: {"key": "value"}, // 发送给服务器...
ajax笔记+源代码.7z
08-29
在"ajax笔记+源代码.7z"这个压缩包中，我们可以期待找到关于Ajax的详细笔记和相关的源代码示例。笔记可能会涵盖以下关键知识点： 1. **Ajax基本原理**：讲解Ajax的工作流程，包括创建XMLHttpRequest对象、打开连接...
ajax \ git \ jquery笔记
11-06
总结以上笔记，我们可以看到，Ajax、Git和jQuery是Web开发中的关键工具，它们分别处理页面动态更新、版本控制和简化JavaScript编程。Bootstrap作为前端框架，为快速构建响应式网站提供了便利。掌握这些技术，对于...
jQuery 自学笔记　+　 汉化版　jQuery Api
09-21
这份“jQuery自学笔记”结合“jQuery API汉化版”提供了全面而简洁的学习资源，适合初学者快速掌握jQuery的核心概念和用法。 首先，jQuery的核心理念是“写得更少，做得更多”。它的选择器机制借鉴了CSS，使得选取...
Ajax&JSON笔记
阿城的博客
12-31 416
文章目录AJAX：1. 概念： ASynchronous JavaScript And XML 异步的JavaScript 和 XMLajax原理：2. 实现方式：原生的JS实现方式（了解）JQeury实现方式JSON：1. 概念： JavaScript Object Notation，JavaScript对象表示法2. 语法：3. JSON数据和Java对象的相互转换jackson解析器1. JSON转为Java对象2. Java对象转换为JSON字符串4、json对象在js中的转换案例：校验用户名是否存
快速入门了解Ajax
最新发布
音符犹如代码的博客
07-25 563
上面是一个原生的Ajax的一个写法，但是原生的Ajax太繁琐甚至还有浏览器不兼容的问题，所以现在都是基于原生的Ajax的Axios。意义：AJAX（Asynchronous JavaScript and XML）即异步 JavaScript 和 XML。介绍：Axios是简化的Ajax，对传统的Ajax操作的简化和改进，也是一个更强大和便捷的http请求处理的工具。下边是两个来自官网的post的请求和get请求的代码。
AjaX 数据爬取
qq_39217312的博客
07-25 496
Ajax 全称： Asynchronous JavaScript and XML , 即异步的 JavaScript 和 XML， 它不是一门编程语言，而是利用 JavaScript 在保证页面不被刷新，页面链接不改变的情况下与服务器交换数据，并更新部分网页内容的技术对于传统网页，如果想要更新内容，就必须刷新整个页面， 但有了 Ajax ，可以在页面不被全部刷新的情况下更新。这个过程实际是页面在后台与服务器进行了数据交互，获取数据后，在利用 JavaScript 改变网页，这样网页内容就会更新了。
Web开发：ASP.NET CORE中前端使用Ajax定时获取后端数据
m0_67412019的博客
07-22 290
给a标签每15s刷新一次，显示最新的时间（时间必须由后端获取） 应该如何操作呢。
韩顺平AJAX与jQuery笔记梳理：核心技术与实战应用
本资源是一份由韩顺平整理的关于AJAX和jQuery的详细笔记文档。文档共分为三天的内容，分别探讨了AJAX的基本概念、工作原理及其广泛应用，以及jQuery的引入原因、流行状况和入门教程。 第一天的内容主要聚焦于AJAX。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Yolanda KB

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值