AJAX和JSON的使用

最新推荐文章于 2024-07-19 17:37:28 发布

简约的涵、

最新推荐文章于 2024-07-19 17:37:28 发布

阅读量472

点赞数

文章标签： java ajax servlet idea json

本文链接：https://blog.csdn.net/weixin_47637494/article/details/118877618

版权

JAVA WEB开发训练之 AJAX和JSON

Ajax 实现数据异步操作：如下案例
实现用户名有效性的异步验证和用户数据的异步填充

Ajax 实现数据异步操作：如下案例

实现用户名有效性的异步验证和用户数据的异步填充

1.AJAX与JSON的介绍

AJAX看完这篇就懂了（点击此处访问）

JSON？学完这篇你就懂了

2.分析项目

AJAX在现代开发过程中经常被使用，其优点在于采取异步逻辑，提高用户的体验度。并且AJAX通常都会和JSON数据一起使用，一个负责发送请求，处理响应结果。一个负责请求响应之间的数据传递。在日常生活中常见的AJAX常见很多，比如百度搜索(会提示搜索的相关信息)，用户名是否能使用(验证用户名是否存在)，用户数据的自动填充等，使用场景很多。
我们所要编写的项目简而言之就是实现当我们输入用户名之后实现其他数据的填充
下面让我开始这个简单的小项目吧

3.编写

3.1、分析步骤

一、创建项目
二、导入jar包
三、编写代码

3.2、开始编写

1.打开软件我使用的软件是
在这里插入图片描述
2.创建项目与导入jar包

3.编写
这是文件结构

项目效果展示

当我们输入已有学员id时，其余信息程序会自动填充
在这里插入图片描述

下面是各个部分源码


public class Student {
    private String stuName;//学生的姓名
    private int stdId;//学号
    private int age;//年龄
    private String sex;//性别

    public Student() {
    }

    public Student(String stuName, int stdId, int age, String sex) {
        this.stuName = stuName;
        this.stdId = stdId;
        this.age = age;
        this.sex = sex;
    }

    public String getStuName() {
        return stuName;
    }

    public void setStuName(String stuName) {
        this.stuName = stuName;
    }

    public int getStdId() {
        return stdId;
    }

    public void setStdId(int stdId) {
        this.stdId = stdId;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public String getSex() {
        return sex;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }
}

Servlet部分

package ServletTest;

import Bean.Student;
import net.sf.json.JSONArray;
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;
import java.util.ArrayList;
import java.util.List;

@WebServlet(urlPatterns = "/getStus")
public class ServletTest1 extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
       doPost(req,resp);//我们都采用post方法 其安全性更佳
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("UTF-8");

        String a = req.getParameter("stuId");
        int aa= Integer.parseInt(a);
         Student student = new Student();
        switch (aa) {
            case 1:
             student = new Student("张三", 001, 20, "男");
                break;
            case 2:
            student =  new Student("李四", 002, 20, "女");break;
            case 3:
           student = new Student("王五", 003, 20, "男");break;
            case 4:
            student =  new Student("张飞", 004, 20, "男");break;
            case 5:
           student =  new Student("吕布", 005, 20, "男");
                break;
            default:
                student = null;
        }

        JSONObject obj=JSONObject.fromObject(student);
        resp.setContentType("text/html;charset=utf-8");
        PrintWriter writer = resp.getWriter();
         writer.print(obj);
    }
}

index部分

<%--
  Created by IntelliJ IDEA.
  User: shinelon
  Date: 2021/7/18
  Time: 14:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>显示页面</title>
    <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
      $(function (){
        $("#stuId").blur(function (){
          var stuId = $(this).val();
          $.post("/getStus","stuId="+stuId,function (rs){
            rs = eval("("+rs+")");
              if(rs!=null) {
                  $("#name").val(rs.stuName);
            $("#age").val(rs.age);
            $("#sex").val(rs.sex);
           }else {
                  $("#name").val("");
                  $("#age").val("");
                  $("#sex").val("");
              }

          });
        });
      })
    </script>
  </head>
  <body>
   id:<input type="text" id="stuId" ><br>
  name:<input type="text" id="name"><br>
   age:<input type="text" id="age"><br>
   sex:<input type="text" id="sex"><br>
  </body>
</html>

简约的涵、

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
AJAX和JSON的使用

JAVA WEB开发训练之 AJAX和JSONAjax 实现数据异步操作：如下案例实现用户名有效性的异步验证和用户数据的异步填充1.AJAX与JSON的介绍2.分析项目3.编写3.1、分析步骤3.2、开始编写项目效果展示下面是各个部分源码Ajax 实现数据异步操作：如下案例实现用户名有效性的异步验证和用户数据的异步填充1.AJAX与JSON的介绍AJAX看完这篇就懂了（点击此处访问）JSON？学完这篇你就懂了2.分析项目AJAX在现代开发过程中经常被使用，其优点在于采取异步逻辑，提高用户的
复制链接

扫一扫