JAVA WEB开发训练 之 AJAX和JSON
- Ajax 实现数据异步操作：如下案例
- 实现用户名有效性的异步验证和用户数据的异步填充
- 1.AJAX与JSON的介绍
- 2.分析项目
- 3.编写
- 3.1、分析步骤
- 3.2、 开始编写
- 项目效果展示
- 下面是各个部分源码
Ajax 实现数据异步操作：如下案例
实现用户名有效性的异步验证和用户数据的异步填充
1.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>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
