Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)(上)

简介: Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)

Ajax 实战


创建项目


创建Java项目


点击finish完成项目创建,然后右键选择"add Framework Support..."


勾选红框中的选项,点击"OK",完成后项目下出现web文件夹


点击"project structure"


点击Modules,选择"Web"模块,再按图示点击"+",按默认路径, 再点击"OK"


配置tomcat服务器


选择Edit Configuration...


选择Deployment标签,点击右侧"+",选择要部署的项目,按默认就可以


添加要部署的war文件,Application context设置为"/",点击ok。


添加依赖包


在"dependencies"标签中,点击右侧"+",选择Library...,添加 Tomcat


根据实际情况继续添加其它必要的依赖,如fastjson,commonslang等。


导入jquery包


在web目录下,创建js文件夹,把jquery-3.6.0.js放到js目录下


创建实体类User

package com.itbaizhan.ajax.pojo;
public class User {
    private Integer id;
    private String username;
    private String password;
    private Double salary;
    private String birthday;
    public Integer getId() {
        return id;
   }
    public void setId(Integer id) {
        this.id = id;
   }
    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 getSalary() {
        return salary;
   }
    public void setSalary(Double salary) {
        this.salary = salary;
   }
    public String getBirthday() {
        return birthday;
   }
    public void setBirthday(String birthday)
   {
        this.birthday = birthday;
 }
    public User(Integer id, String username,
    String password, Double salary, String birthday) {
        this.id = id;
        this.username = username;
        this.password = password;
        this.salary = salary;
        this.birthday = birthday;
   }
    public User() {
   }
}


创建页面


创建index.jsp中的静态部分

<body>
    <div>
        <table align="center" width="60%" border="1">
            <tr>
                <td>ID:</td>
                <td><input type="text" name="id" id="id"/></td>
                <td>姓名:</td>
                <td><input type="text" name="username" id="username"/></td>
                <td>密码:</td>
                <td><input type="text" name="password" id="password"/></td>
            </tr>
            <tr>
                <td>收入:</td>
                <td><input type="text" name="salary" id="salary"/></td>
                <td>出生日期:</td>
                <td><input type="text" name="birthday" id="birthday"/></td>
                <td colspan="2"></td>
            </tr>
            <tr align="center">
                <td colspan="6">
                    <input type="button" value="添加用户" id="add" />
                    <input type="button" value="更新用户" id="update"/>
                </td>
            </tr>
        </table> <hr/>
        <table align="center" width="60%" bgcolor="" border="1" id="myTable">
            <thead>
            <tr align="center">
                <td>ID</td>
                <td>姓名</td>
                <td>密码</td>
                <td>收入</td>
                <td>生日</td>
                <td>操作</td>
            </tr>
        </thead>
            <tbody id="tBody"></tbody>
        </table>
    </div>
</body>


Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)(下):https://developer.aliyun.com/article/1419259

目录
相关文章
|
1月前
|
XML 前端开发 JavaScript
AJAX 前端开发利器:实现网页动态更新的核心技术
**AJAX** 允许网页在不刷新的情况下更新内容,实现异步与服务器交换数据。通过JavaScript的XMLHttpRequest对象,可发送和接收数据。当用户触发事件(如点击),函数向服务器发送GET请求,服务器响应后更新指定HTML部分。AJAX并非编程语言,而是利用浏览器内置对象、JavaScript和DOM技术。核心是XMLHttpRequest对象,它有多种方法(如`open()`和`send()`)和属性(如`onreadystatechange`、`readyState`和`status`)来处理请求和响应。
52 2
AJAX 前端开发利器:实现网页动态更新的核心技术
|
2月前
|
设计模式 前端开发 JavaScript
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
22 0
|
2月前
|
XML JSON 前端开发
JavaWeb----Ajax技术
JavaWeb----Ajax技术
57 0
|
3月前
|
前端开发 JavaScript API
Ajax技术的秘密揭秘:异步传输,高效交互
Ajax技术的秘密揭秘:异步传输,高效交互
|
3月前
|
JSON 前端开发 JavaScript
探秘 AJAX:让网页变得更智能的异步技术(下)
探秘 AJAX:让网页变得更智能的异步技术(下)
探秘 AJAX:让网页变得更智能的异步技术(下)
|
3月前
|
XML 前端开发 JavaScript
探秘 AJAX:让网页变得更智能的异步技术(上)
探秘 AJAX:让网页变得更智能的异步技术(上)
探秘 AJAX:让网页变得更智能的异步技术(上)
|
3月前
|
JSON 前端开发 JavaScript
JavaScript学习 -- ajax方法的POST请求
JavaScript学习 -- ajax方法的POST请求
29 0
|
3月前
|
设计模式 缓存 前端开发
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)(下)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
15 1
|
5月前
|
XML 前端开发 JavaScript
什么是Ajax和jquery
什么是Ajax和jquery
38 0
|
4月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
57 0