109 使用Ajax传递请求本地数据库

已于 2022-09-11 07:52:39 修改
阅读量1.3k 收藏 9
点赞数
分类专栏： javascript学习园地 文章标签： ajax
于 2022-09-11 07:15:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47197906/article/details/126801716
版权

文章目录


先使用Ajax post 数据到本地数据库，然后使用Ajax从数据库请求数据。

1、准备数据库

访问http://localhost/phpmyadmin/ 进入数据库后台
在这里插入图片描述创建一个数据库ajaxstudydb。再创建一张表users，表中有2个字段id和name。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2、使用Ajax post 数据到本地数据库

使用Ajax post 2个数据到前面创建的数据库中。

修改process.php

在这里插入图片描述

post 数据到本地数据库

使用前面一节制作的页面，实现使用ajax post数据到本地数据库
在这里插入图片描述

3、使用Ajax请求数据库中的数据

user.php

在这里插入图片描述

页面部分ajax5.html

在这里插入图片描述

js部分

在这里插入图片描述

效果

在这里插入图片描述

远近2021
关注
专栏目录
Ajax请求本地数据库demo
hr226的博客
09-12 781
ajax5.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ajax 5 - 请求PHP数据</title> </head> <body> <button id="bu...
SSM框架中使用ajax传递数据
SSL 的博客
11-16 2157
1. 依赖准备 <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.13.0</version> </dependency> <
使用ajax发送请求
逆轮回
06-28 320
方法一1.创建XMLHttpRequest对象var xmlHttpRequest = new XMLHttpRequest();2.设置回调函数xmlHttpRequest.onreadystatechange = callBack;3.初始化XMLHttpRequest对象xmlHttpRequest.open("post",url,true); xmlHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencod
ajax本地请求数据
WGTkris的博客
07-20 635
ajax本地请求数据
使用Ajax请求数据
算法与编程之美
10-01 683
本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。引言首先我们需要了解什么是异步请求和同步请求。同步请求：就是在发送一个请求之后，需要等待服务器响应返回，才能够发...
如何使用Ajax进行请求数据
weixin_58032179的博客
07-07 727
Ajax请求向同源（即协议、域名和端口都相同）的服务器发送请求
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
10-18
在本文中，我们将探讨如何使用Ajax和jQuery配合数据库来实现下拉框的二级联动效果，这对于构建交互式、响应式的Web应用非常重要。二级联动通常指的是一个下拉框的选择会影响另一个下拉框的内容，例如在选择省份后，...
ajax动态获取数据库中的数据方法
12-10
总的来说，这个例子展示了如何使用Ajax结合SSM框架实现动态获取数据库数据的功能，通过前端发送请求，后端处理请求并返回数据，然后前端解析数据并更新页面内容。这种方法提高了用户体验，使得数据的获取更加高效和...
php + ajax 实现的写入数据库操作简单示例
10-15
在JavaScript代码中，通过监听按钮点击事件，收集输入框中的数据，然后使用jQuery的$.ajax方法进行异步请求。在$.ajax请求中，定义了请求类型为POST，指定处理表单提交的PHP页面URL，以及要发送的数据对象。在请求...
php+ajax 实现输入读取数据库显示匹配信息
10-23
4. **JSON数据格式**：在Ajax请求中，后端通常使用JSON格式返回数据。JSON是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。 ### 关键技术点解析： - **PHP后端**：后端脚本`...
AJAX实现读取本地文本文档内容并展示在网页上
05-05
使用AJAX技术来实现读取本地文本文档内容，然后将读取到的内容显示在网页上
从数据库中读取数据（AJAX版本）
03-01
博文链接：https://qmug.iteye.com/blog/221703
Ajax异步请求，获取本地json数据
m0_73341533的博客
03-13 2367
Ajax的核心是XMLHttpRequest对象。2、jQuery的Ajax请求。
AJAX访问数据库
AnnGreen的博客
12-19 6037
AJAX访问数据库 AJAX（Asynchronous JavaScript and XML，异步的 JavaScript 和 XML）可以在不重新加载整个页面的情况下与服务器交换数据并更新网页内容。之前学的时候没怎看，现在刚好能用到，又是一个黑暗中瞎摸索的过程 ???? XMLHttpRequest对象 XMLHttpRequest 对象是AJAX的基础，通过它就可以在后台与服务器交换数据，能够让我们在不重新加载整个网页的情况下，对网页局部进行更新，且目前几乎所有的浏览器都支持（除了IE5 和 IE6，它
AJAX请求 JSON数据并实现本地缓存
xingguangtu的博客
11-17 802
本文主要介绍通过ajax请求json数据，并实现数据的本地存储，以下面的实例为例: 请求新闻列表时判断ajax请求是否成功 请求失败读取本地缓存信息,请求成功是判断res.code 当res.code不为1000000时依旧读取缓存,否则更新页面数据并更新缓存 以下为部分代码 $('.nowDay').html(date); var detailUrl = 'sentiment/index.php/news/today-news/list'; var url = _baseUrl_ +
【知识沉淀】原生Ajax封装请求本地模拟数据---get请求
weixin_47093559的博客
04-28 237
原生实现ajax封装 先来无事封装了一下原生ajax请求本地mock数据 <script> function ![ajax](https://img-blog.csdnimg.cn/20210428121459158.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzA5MzU1OQ==,size_16,co
一个简单的ajax请求数据
热门推荐
dezhonger的专栏
04-17 2万+
jquery提交表单 用户名 密码 性别man woman 使用ajax提交表单数据 before.. $(document).ready(function(){ $("a").click(function(){ $.ajax({ type:'post
写html5 遇到的ajax请求跨域问题，访问本地数据库问题
qq_27990953的博客
08-19 2121
最近经理要求把app做成html5 版本的。我用的apicloud （没遇到什么特别难的问题）做好后给经理看，然后说不是他想要的效果，他想要的是不要打包成apk形式的html5项目（就是纯网页版的项目）。好吧大部分东西都白忙活了。 于是我就改吧，还好前面做的页面大部分还可以用。可是问题就在第一天就出现了，网络请求 ajax跨域问题（以前没做过网页版的项目），我是直接拿android用的接口，用$
AJAX通过前端发送AJAX请求获取数据库数据动态展示------AJAX
最新发布
春风若有怜花意，可否许我再少年
10-30 172
AJAX通过前端发送AJAX请求获取数据库数据动态展示------AJAX
ajax传递表单数据spring boot存入数据库
06-10
要使用 AJAX 传递表单数据并存储到 Spring Boot 数据库中，可以按照以下步骤进行操作： 1. 在前端页面，使用 jQuery 或者其他 JavaScript 框架来编写 AJAX 请求，将表单数据作为参数传递给后端接口。 例如，可以使用 jQuery 的 `$.ajax()` 方法来发送 POST 请求，将表单数据作为 JSON 数据传递给后端接口： ``` $.ajax({ url: '/api/saveForm', method: 'POST', data: JSON.stringify(formData), contentType: 'application/json', success: function(response) { // 处理成功响应 }, error: function(jqXHR, textStatus, errorThrown) { // 处理错误响应 } }); ``` 其中 `formData` 是一个包含表单数据的 JavaScript 对象。 2. 在 Spring Boot 后端应用中，编写一个处理 POST 请求的控制器方法，用于接收前端传递的表单数据，并将其存储到数据库中。 例如，可以编写一个控制器方法如下： ``` @PostMapping("/api/saveForm") public ResponseEntity<?> saveForm(@RequestBody FormData formData) { // 将表单数据存储到数据库中 formDataRepository.save(formData); // 返回成功响应 return ResponseEntity.ok().build(); } ``` 其中 `FormData` 是一个 Java 类，用于表示表单数据，可以使用 `@RequestBody` 注解将前端传递的 JSON 数据自动转换成 Java 对象。`FormDataRepository` 则是一个 Spring Data JPA 的接口，用于操作数据库。 3. 在 Spring Boot 应用中配置数据库连接信息，并创建对应的表格。 例如，可以在 `application.properties` 配置文件中设置数据库连接信息： ``` spring.datasource.url=jdbc:mysql://localhost:3306/mydb spring.datasource.username=root spring.datasource.password=root spring.datasource.driver-class-name=com.mysql.jdbc.Driver spring.jpa.hibernate.ddl-auto=create spring.jpa.show-sql=true ``` 这里使用 MySQL 数据库，并设置了数据库连接信息。`spring.jpa.hibernate.ddl-auto` 参数设置为 `create`，表示在应用启动时自动创建表格。 4. 在 Spring Boot 应用中定义 `FormData` 实体类和 `FormDataRepository` 接口，并使用 `@Entity` 和 `@Repository` 注解进行标记。 例如，可以定义 `FormData` 类如下： ``` @Entity @Table(name = "form_data") public class FormData { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String name; private String email; // 省略 getter 和 setter 方法 } ``` 其中 `@Entity` 注解表示这是一个实体类，会映射到数据库中的表格。`@Table` 注解指定表格名称。`@Id` 和 `@GeneratedValue` 注解用于指定主键和自动生成策略。 定义 `FormDataRepository` 接口如下： ``` @Repository public interface FormDataRepository extends JpaRepository<FormData, Long> { } ``` 其中 `@Repository` 注解表示这是一个 Spring Data JPA 的仓库接口。`JpaRepository` 是 Spring Data JPA 提供的一个基本仓库接口，继承了 `PagingAndSortingRepository` 和 `CrudRepository` 接口，提供了一些基本的数据操作方法。 这样就可以使用 AJAX 传递表单数据并存储到 Spring Boot 数据库中了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值