Ajax 发送 post请求案例

最新推荐文章于 2023-06-25 21:57:14 发布
最新推荐文章于 2023-06-25 21:57:14 发布
阅读量574 收藏 2
点赞数
分类专栏： AJAX 初学者的成长日记 文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42524153/article/details/109489380
版权
该博客详细介绍了如何利用Ajax在鼠标悬停div时向服务器发送POST请求，并将返回的响应内容显示在div内。实例包含HTML和服务器端脚本代码。
摘要由CSDN通过智能技术生成

需求 :鼠标放在div上的时候 向服务端发post请求 把响应结果在div中呈现

html部分:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax post</title>
    <style>
        #result{
   
            width: 200px;
            height: 100px;
            border: 1px solid #90b;
        }
    <
最低0.47元/天 解锁文章
小小小竹子
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajax中get、post请求的介绍与使用实例
qq_45700583的博客
07-20 423
1.Ajax用get请求提交数据：， 将要传递的数据放在地址URL后面， 以URL?userName=liufunan&userPwd=123的格式， 则就把数据提交过去了。 2.Ajax用post请求提交数据: Ajax用post请求提交数据不能和get请求那样把要提交的数据放在地址URL后面。 Ajax用post请求提交数据的规则： 使用setRequestHeader()来添加HTTP头，然后在 send()方法中规定您希望发送的数据即： (1).在设置请求和发送请求中间加上： xmlhttp
Ajax Post请求实例
weixin_30535843的博客
05-06 208
前台JS function OnSaveBarCodeTitle() { if (document.getElementByIdx_x("Path1").value != "") { var mPDF417Text = PDF417Text.value; var mTitle ...
ajax----------3、GET请求示例
android_zyf的博客
07-13 398
一,建立一个Servlet很简单的通过response输出一个响应体. @WebServlet(name = "AServlet",urlPatterns = "/servlet/as") public class AServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpS
jquery ajax post请求实例
weixin_30876945的博客
10-20 218
function test(){ $.ajax({ //提交数据的类型 POST GET type:"POST", //提交的网址 url:"testLogin.aspx", //提交的数据 该参数为属性值类型的参数 //（和url?Na...
AJAX案例一：发送POST请求
weixin_30402085的博客
11-20 181
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTM...
Ajax提交post请求案例分析
12-10
前言：博主之前有篇文章是快速入门Ajax ，主要是利用Ajax做简单的get请求，今天给大家分享一篇利用Ajax提交post请求，以及使用post时需要注意的地方，还是以案例的方式告诉大家。 案例： 注册表单 文件结构图： 06-...
基于JSON的AJAX请求案例
05-10
**基于JSON的AJAX请求案例** 在Web开发中，AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个页面的情况下更新部分网页的技术。而JSON（JavaScript Object Notation）是轻量级的数据交换格式，它使得...
jQuery实现ajax的嵌套请求案例分析
10-17
本文将详细分析jQuery实现AJAX嵌套请求的案例，旨在帮助大家深入理解其原理、实现方法和相关注意事项。 一、AJAX嵌套请求原理 AJAX嵌套请求指的是在一个AJAX请求的回调函数中再次发起另一个AJAX请求，实现数据的...
jQuery Ajax： $.post请求示例
weixin_34314962的博客
11-22 329
jQuery Ajax：$.post请求示例 leyangjun.html页面 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src...
jQuery Ajax： $.post请求实例
乐杨俊浅谈LAMP
06-22 2460
jQuery Ajax： $.post请求实例
Ajax发送Post请求
翻滚吧小牛
12-18 1429
Ajax发送post请求与发送get请求大致类似，下面看具体实例，首先看JSP显示页面： 用户账号： 用户密码： 然后看对发送信息进行处理的Servlet类，因为是POST方式发送信息，所
Ajax：ajax发送Post请求、ajax案例
热门推荐
dengfengling999的博客
07-21 1万+
上面项目，目前存在的缺点在后端的java代码中又开始拼接HTML代码了。显然这是在后端java中写前端的HTML代码。一般后端不会这样写拼html串返回，只会在后端查数据，把数据返回交给前端。能不能直接将数据返回，给WEB前端数据就行了。让WEB前端能够拿到数据就行，然后页面展示的功能交给WEB前端来处理。我们后端的java代码能不能只返回数据？（返回数据可以采用JSON的格式，也可以采用XML的格式）一般采用JSON，因为json体积小，xml体积大，解析起来有一定难度。......
AJAX实例之发送POST请求、服务端响应JSON数据、请求超时与网络异常问题、取消请求问题、以及jQuery发送AJAX请求
m0_63374484的博客
04-03 2023
一、AJAX发送POST请求： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
使用ajax向服务器发起post请求（提交数据给服务器）
最新发布
Forever_Hopeful的博客
06-25 5511
前端开发：网络请求后台数据，使用ajax向服务器发起post请求（提交数据给服务器）
AJAX POST实例
weixin_30423977的博客
10-27 106
=====ajax.html===== <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&...
ajax/post请求
weixin_30878361的博客
07-21 194
1 <script> 2 window.addEventListener('load', function (ev) { 3 var btn = document.getElementById('send'); 4 btn.addEventListener('click', function (ev1) { 5 6 ...
使用原生ajax发送post请求完整案例
Chappi
11-22 1万+
使用ajax发送数据实现前后台的交互，我想是web开发最基础的技能了。近来dz开发因为不兼容jquery，所以只能使用原生js发送数据，不想还遇到很多问题。在这里分析总结一下。先来一个使用ajax发送post表单数据的案例。
原生php ajax post_使用原生ajax发送post请求完整案例
05-31
好的，这是一个使用原生 AJAX 发送 POST 请求的完整案例： HTML 代码： ``` <!DOCTYPE html> <html> <head> <title>使用原生 AJAX 发送 POST 请求</title> <meta charset="UTF-8"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <h1>使用原生 AJAX 发送 POST 请求</h1> <form> <label for="name">姓名：</label> <input type="text" id="name" name="name"><br><br> <label for="email">邮箱：</label> <input type="email" id="email" name="email"><br><br> <button type="button" id="submit">提交</button> </form> <div id="result"></div> <script src="main.js"></script> </body> </html> ``` JavaScript 代码： ``` document.getElementById("submit").addEventListener("click", function() { var name = document.getElementById("name").value; var email = document.getElementById("email").value; var xhr = new XMLHttpRequest(); xhr.open("POST", "submit.php", true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.onreadystatechange = function() { if (this.readyState === XMLHttpRequest.DONE && this.status === 200) { document.getElementById("result").innerHTML = this.responseText; } }; xhr.send("name=" + name + "&email=" + email); }); ``` PHP 代码（submit.php）： ``` <?php $name = $_POST["name"]; $email = $_POST["email"]; echo "姓名：" . $name . "<br>邮箱：" . $email; ?> ``` 注意：这个案例使用了 jQuery 库，但是只是为了方便引入 Ajax 库。实际上，这个案例并不需要 jQuery。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值