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

已于 2022-09-11 07:52:39 修改
阅读量1.2k 收藏 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
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AJAX 数据库
06-18 696
AJAX（Asynchronous JavaScript and XML）是一种流行的网络开发技术，它允许网页在不重新加载整个页面的情况下与服务器交换数据和更新部分网页内容。AJAX技术与数据库的结合，为现代网络应用提供了更加丰富和动态的用户体验。本文将探讨AJAX如何与数据库交互，以及这种交互在实际应用中的优势和挑战。
使用ajax实现对数据库中数据的查询
Ailing_kildd的博客
05-04 3258
ajax的小例子，对数据库中的数据的在浏览器上进行局部刷新。
简单的AJAX往数据库添加内容
qq_43142795的博客
05-11 358
<tr> <td>备注：</td> <td colspan="2"><textarea rows="3" style="width: 100%" id="content" ></textarea></td><td> <input type="hidden" value="<?php echo $arr['id'] ?>" id="listId"> <input type="but
ajax写入数据库php,php + ajax 实现的写入数据库操作简单示例
weixin_35368330的博客
03-21 249
本文实例讲述了php+ ajax 实现的写入数据库操作。分享给大家供大家参考，具体如下：这个是最简单的表单提交 延伸：后面有很多需要提交的信息 如何快速部署接口此例子是移动端H5页面，使用的是zepto.min.jsHTML前端页面JS 不跨域的情况下$('#form_tijiao').click(function () {var name =$('#name').val(),tel=$('#t...
ajax 通过URL提交给后台数据
04-22 1433
$.ajax({                 url:"/jweb/account?"+"name=tom&password=123456",                 type: 'post',                 contentType: 'application/json',                 dataType:"text",          
ajax发送请求实例使用
qq_40132294的博客
02-28 1766
目录 局部刷新和无刷新 同源策略 1.熟悉jquery选择器， 去页面上获取发送ajax请求时的参数数据2.发送ajax请求3.将返回数据加载到页面：通过jquery操作页面元素和属性 示例：登录界面发送ajax请求 ajax技术的目的是让javascript发送http请求与后台通信，获取数据和信息。ajax技术的原理是实例化xmlhttp对象，然后使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行，从而实现异步。 局部刷新和无刷新 ajax可以实现局部.
使用ajax发送请求
逆轮回
06-28 313
方法一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传值后台接收并写入数据库
热门推荐
Wang Wenly的博客
01-20 3万+
前端与后台之间的数据传输。。。
ajax动态获取数据库中的数据方法
12-10
总的来说，这个例子展示了如何使用Ajax结合SSM框架实现动态获取数据库数据的功能，通过前端发送请求，后端处理请求并返回数据，然后前端解析数据并更新页面内容。这种方法提高了用户体验，使得数据的获取更加高效和...
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
10-18
在本文中，我们将探讨如何使用Ajax和jQuery配合数据库来实现下拉框的二级联动效果，这对于构建交互式、响应式的Web应用非常重要。二级联动通常指的是一个下拉框的选择会影响另一个下拉框的内容，例如在选择省份后，...
Ajax异步请求技术实例讲解
10-19
在Ajax请求中，JSON常被用于传递数据，因为它可以直接被JavaScript对象解析，简化了数据处理的过程。前端可以接收JSON响应，然后通过JavaScript操作DOM元素，实现页面的动态更新。 Ajax接口调用是实现异步请求的...
利用ajax提交form表单到数据库详解(无刷新)
10-18
主要给大家介绍了关于利用ajax提交form表单到数据库(无刷新)的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
ajax php 实现写入数据库
12-17
在本文中，我们将深入探讨如何使用Ajax和PHP实现在网页中无刷新地向数据库写入数据。这个过程涉及前端的JavaScript、Ajax技术以及后端的PHP处理和数据库交互。 首先，我们有一个HTML页面，其中包含一个简单的表单，...
Ajax动态加载数据库示例
12-12
这个示例展示了如何使用Ajax与服务器进行通信，动态获取和更新数据库中的数据，提供了一个基础的前端与后端交互模型。在实际项目中，通常会使用更高级的库，如jQuery或Vue.js，以简化Ajax操作，并且通常会采用异步...
ajax从数据库中查询获取数据,如何使用ajax从数据库获取正确的数据
weixin_39845406的博客
08-05 3123
在我的项目中，我使用ajax从数据库中获取数据。我测试数据内容，我选择alert(valData)成功函数。但不幸的是，没有从 ajax返回。我测试过如何使用ajax从数据库获取正确的数据select contact from IDC WHERE id=5;它在mysql cmd行中正常工作。这里是我的js代码：var stNum = 5;$.ajax({dataType:'json',type:...
原生AJAX post请求访问后端JSON数据接口
AdamShyly的博客
05-16 755
function testAvatar() { var data = { "username": "123123", "password": "123" } var xmlHttp = new XMLHttpRequest(); xmlHttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) {.
ajax上传图片添加数据到数据库以及数据及图片回显
royal1235的博客
10-31 6698
1.效果图（将数据和图片一起保存到数据库，查询数据时图片进行展示） 2.springboot+easyui写的，将图片上传到resources下面的upload123文件夹中，所以首先应该新建一个文件夹 3.html &lt;div id="win" class="easyui-dialog" title="班级信息添加" style="width: 400px; padding: ...
Ajax实现和数据库的连接
weixin_51855195的博客
12-05 4091
终于把关于JDBC的增删改查给彻底了解了 显示JDBC和Ajax之间的增加关系 1.咱就是说先把增加的html页面写好 <h2>增加</h2> <form id="add-form"> ID:<input type="text" name="id"> 姓名：<input type="text" name="username"> 密码：<input type="password" name="password">
ajax获取本地服务器后台数据
最新发布
05-05
要使用 Ajax 获取本地服务器后台数据，你需要编写一个服务器端程序来处理客户端的请求并返回数据。以下是一个简单的示例： 1. 创建一个文件 `server.php`，在其中编写以下代码： ``` <?php header('Content-Type: application/json'); $data = array( 'name' => 'John Doe', 'email' => 'john@example.com' ); echo json_encode($data); ?> ``` 2. 在客户端的 HTML 文件中编写以下代码： ``` <!DOCTYPE html> <html> <head> <title>Ajax Example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <div id="result"></div> <script> $.ajax({ url: 'server.php', dataType: 'json', success: function(data) { $('#result').html(data.name + ' (' + data.email + ')'); } }); </script> </body> </html> ``` 3. 打开客户端 HTML 文件，你应该可以看到 `John Doe (john@example.com)` 显示在页面上。这是通过 Ajax 请求服务器端程序 `server.php` 返回的数据实现的。 请注意，在本地服务器环境中，你需要使用正确的 URL 来访问你的服务器端程序，例如 `http://localhost/server.php`。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值