Ajax简单示例

已于 2023-03-28 16:20:21 修改
阅读量532 收藏 1
点赞数
分类专栏： 前端技术 文章标签： ajax javascript 前端
于 2020-11-17 16:36:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52472152/article/details/109746129
版权

一、HTML文件代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        function getAjaxData() {
            let xmlHttpRequest;
            console.log("ada");
            if(window.XMLHttpRequest)
                xmlHttpRequest = new XMLHttpRequest();
            else
                xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
            xmlHttpRequest.onreadystatechange=function () {
                if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){
                    const test = document.getElementById("test");
                    const text = xmlHttpRequest.responseText;
                    test.innerHTML=text;
                    console.log(text);
                }
            }
            xmlHttpRequest.open("GET","/getAjaxData",true);
            xmlHttpRequest.send();
        }
        function getAjaxByPost() {
            let xmlHttp;
            if(window.XMLHttpRequest)
                xmlHttp = new XMLHttpRequest();
            else
                xmlHttp = new ActiveXObject("Microsoft.XMPHTTP");
            xmlHttp.onreadystatechange = function () {
              //  const test = document.getElementById("test");
              //  test.innerHTML = xmlHttp.responseText;
                $("#test").html(xmlHttp.responseText);
            }
            xmlHttp.open("POST","getAjaxData",true);
            xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xmlHttp.send("welcome=" + $("#welcome").val() + "&name=" + $("#name").val());
        }
    </script>
</head>
<body>
    <div id = "test">
        要替换的内容
    </div>
    <button type = "button " οnclick="getAjaxData()">从服务器获得数据</button>
    <label>请输入欢迎词：</label><input id ="welcome" /><br>
    <label>请输入姓名：</label><input id = "name">
    <button οnclick="getAjaxByPost()">Post请求获得AJAX数据</button>
</body>
</html>

二、controller文件如下：

package com.ruoyi.web.controller;

import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PatchMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class AjaxTest {
    @GetMapping("AjaxTest")
    public String ajaxTest(){
        return "AjaxTest";
    }

    @ResponseBody
    @GetMapping("/getAjaxData")
    public String getAjaxData(){
        return "This Ajax Data from Server";
    }
    @ResponseBody
    @PostMapping("/getAjaxData")
    public String postAjaxData(@Param("welcome") String welcome, @Param("name") String name){
        return welcome + ":"+ name +"This Ajax Data from Server";
    }
}
仲夏幻境
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax技术 实例篇
weixin_47044904的博客
06-09 1118
本篇文章通过Html+Ajax+node技术实现一个简单的Ajax请求案例，为加强对Ajax技术的了解和实操经验
ajax 简单示例
07-26
在这个“ajax 简单示例”中，我们将探讨如何手写Ajax代码，以及如何在Java后端如Struts框架中配合使用。 首先，让我们看看**手写Ajax代码**的基本结构。通常，一个简单的Ajax请求由以下几个部分组成： 1. **创建...
原生Ajax的使用，四种请求方法示例（前后端代码）
最新发布
kkkys_kkk的博客
01-13 3576
这样可以避免整个页面的刷新，提高用户体验。3. 异步加载数据：原生 Ajax 可以用于异步加载数据，例如从服务器获取 JSON、XML 或纯文本数据，并用于更新页面的内容。2. 原生支持：原生 Ajax 是由浏览器原生支持的技术，无需引入额外的库或框架，可以直接使用浏览器提供的 API。例如，可以使用原生 Ajax 在用户点击按钮或链接时加载新的数据，然后将数据动态地插入到已有的页面中，实现无刷新的内容更新。对于一些高级的功能，例如处理异步请求的回调地狱、安全性等问题，可能需要更加细致的处理和实施。
Ajax笔记_01（知识点、包含代码和详细解析）
Forever_Hopeful的博客
07-31 1131
Ajax笔记_01（知识点、包含代码和详细解析）
HTML AJAX 前后端分离添加
weixin_63056225的博客
09-02 165
【代码】HTML AJAX 前后端分离添加。
在前台模拟ajax方法,写一个常用的模拟ajax上传文件的通用方法
weixin_42651748的博客
08-06 159
假设现在有个按钮点击上传，那么直接在按钮上加上onclick事件写上对应的方法即可，比如这样so easy，现在贴出来代码var imgcontro = {selectFile:function(imgname,action,params,callback){var rand = parseInt(Math.random()*10000000000000),paramArr = params !=...
AJAX简单示例
03-09
【AJAX简单示例】是针对初学者设计的一个教程，主要展示了如何在ASP.NET 2.0环境中利用AJAX技术实现动态数据查询，同时结合SQL Server 2005进行后端数据处理。AJAX（Asynchronous JavaScript and XML）是一种在无需...
DWR AJAX 简单示例
06-19
在"**DWR AJAX 简单示例**"中，我们通常会看到一个常见的应用场景，即级联下拉菜单。级联下拉菜单通常用于多级关联的数据选择，例如，选择国家后，相应的省份列表会动态加载；选择省份后，城市列表也会随之更新。...
wordpress进阶教程(三十):ajax简单示例-ajax翻页
01-20
ajax原理很简单，通过js提交请求，然后服务器上处理请求，再输出数据，浏览器接收数据，并显示。所以ajax在网页上需要js代码，我们一般使用jquery。在服务器上需要处理请求的代码(比如php程序)。 以ajax翻页，
ajax简单示例（易懂易上手）
05-30
**二、Ajax简单示例** 以下是一个简单的Ajax GET请求示例： ```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'AjaxHelloWorld.json', true); xhr.setRequestHeader('Content-type', 'application/...
ajax经典实例+代码大全
09-11
ajax经典实例+代码大全 绝对经典 -------- 目录说明 -------- database 目录存放数据库SQL文件 java 目录存放java源文件 webapp 目录存放实例页面及JSP源文件 -------------- 数据库安装说明 -------------- 了解MySQL的用户可以直接使用自己熟悉的方式创建名为ajax的数据库，并将ajax.sql文件导入即可。 下面是简要操作方法： 1. 实例数据库在MySQL 5.0.27 版本下测试通过 2. 将database目录中ajax.sql文件复制到C:\ 3. 进入MySQL安装目录中的bin目录 4. 输入 mysql -u root -p ，然后输入密码登录本地MySQL服务器 5. 输入 CREATE DATABASE ajax DEFAULT CHARACTER SET utf8; 创建名为ajax的数据库 6. 输入 use ajax 7. 输入 source c:\ajax.sql 执行数据库初始化语句 ------------------ Java源文件使用说明 ------------------ 实例中大部分文件为HTML及JSP文件，部分Java源文件存放在java目录中。 可将目录中的内容作为Eclipse的一个项目导入Eclipse中使用。 ----------- WEB发布方法 ----------- 所有实例在jdk 1.4.2 + Tomcat 5.0.28 环境下测试通过。 将webapp目录中的内容复制到Tomcat的webapps目录中作为一个web应用发布即可。 启动Tomcat前注意修改 ajax/WEB-INF/classes/ajax_db.properties 文件。 将其中的URL、USER和PASSWORD属性根据实际情况进行修改。 Tomcat正常启动后使用 http://localhost:8080/ajax 进行访问 +=========================================================================================== 最后注释： 可能还有一点，就是把你的ajax密码定位好 路径是：${ajax}\ajax\WEB-INF\classes\ajax_db.properties，用记事本打开。那个${ajax}就是你当前存放ajax这个文件夹的路 径 DRIVERS=com.mysql.jdbc.Driver URL=jdbc:mysql://localhost/ajax?useUnicode=true&characterEncoding=utf8 USER=root PASSWORD=ajax 里面的代码是这样写的，把最后一行的那个对应的密码改为你自己数据库的代码就OK
ajax加载数据模板
03-20
这是一个ssm为开发模式的项目，包含ajax增删改查，分页
ajax源代码
01-15
Ajax源码
AJAX的基本代码,ajax基本通用代码示例
weixin_29055137的博客
08-06 1133
本文实例讲述了ajax基本通用代码。分享给大家供大家参考，具体如下：var xmlhttpfunction loadxmldoc(url){// code for mozilla, etc.if (window.xmlhttprequest){xmlhttp=new xmlhttprequest()xmlhttp.onreadystatechange=state_changexmlhttp.ope...
ajax网站实例代码,分享Ajax创建简单实例代码
weixin_30953869的博客
08-06 207
XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。几乎所有的浏览器都支持XMLHttpRequest对象，它是Ajax应用的核心技术。js代码如下： New Document /**创建 XMLHttpRequest 对象 ...
ajax发送请求实例使用
qq_40132294的博客
02-28 1766
目录 局部刷新和无刷新 同源策略 1.熟悉jquery选择器， 去页面上获取发送ajax请求时的参数数据2.发送ajax请求3.将返回数据加载到页面：通过jquery操作页面元素和属性 示例：登录界面发送ajax请求 ajax技术的目的是让javascript发送http请求与后台通信，获取数据和信息。ajax技术的原理是实例化xmlhttp对象，然后使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行，从而实现异步。 局部刷新和无刷新 ajax可以实现局部.
jquery ajax 模板代码
PKWind的专栏
11-09 632
jquery ajax post 请求模板代码，如下：$.ajax({ type: "GET", url: "test.json", data: {username:$("#username").val(), content:$("#content").val()}, dataType: "json", success: function(data)
ajax模板
孔祥月的博客
03-19 198
ajax模板 背景 感觉ajax技术有很多版本，先提供一种较为靠谱的模板 $.ajax({ url:'/faceplus/mkdir', type: 'post', data: {'school':school, 'gonghao':num}, ...
Ajax初试之读取数据篇
zhangyanquen的技术专栏
08-21 563
<br />作者:康董 我很开心您来阅读我写的关于ajax的实例教程,无论您是第一次还是老朋友.我将在这里献上我至今所学,并毫不吝啬．<br />上次我们讲了＂ajax开始准备篇＂，做好了基本的ajax准备工作以后．我们开始牛刀小试一下：ajax初试之读取数据篇．是的，今天我们要实现的效果是．在不刷新网页的情况下读取并显示服务端的数据．<br />拿出来我们上次准备好的东西．１：XMLHTTPRequest对象的函数．２：Asp输出xml格式的文件．你可以点击查看该文件内容：Asp输出xml格式的数据<br
html js ajax 表格示例
07-27
当然，我可以为您提供一个简单的HTML、JavaScript和AJAX表格示例。以下是一个基本的示例代码： HTML部分： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AJAX表格示例</title> <script src="script.js"></script> </head> <body> <button onclick="loadData()">加载数据</button> <table id="data-table"> <thead> <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody id="table-body"> </tbody> </table> </body> </html> ``` JavaScript部分（script.js）： ```javascript function loadData() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var data = JSON.parse(this.responseText); var tableBody = document.getElementById("table-body"); tableBody.innerHTML = ""; // 清空表格内容 for (var i = 0; i < data.length; i++) { var row = document.createElement("tr"); var idCell = document.createElement("td"); var nameCell = document.createElement("td"); var ageCell = document.createElement("td"); idCell.innerText = data[i].id; nameCell.innerText = data[i].name; ageCell.innerText = data[i].age; row.appendChild(idCell); row.appendChild(nameCell); row.appendChild(ageCell); tableBody.appendChild(row); } } }; xhttp.open("GET", "data.json", true); // 假设数据存储在data.json文件中 xhttp.send(); } ``` 以上代码演示了如何使用AJAX加载数据并在HTML表格中显示。当点击“加载数据”按钮时，JavaScript函数`loadData()`将发送AJAX请求到服务器以获取JSON数据。然后，使用`JSON.parse()`将响应文本转换为JavaScript对象。接下来，根据数据动态创建表格行和单元格，并将其添加到表格中。 请注意，这只是一个简单的示例，您可能需要根据您的实际需求进行适当的修改。同时，您需要确保服务器返回的数据是正确的JSON格式，并且文件路径和名称与代码中的一致。 希望这个示例能对您有帮助！如果有任何进一步的问题，请随时提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值