Ajax简单示例

一、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经典实例+代码大全 绝对经典 -------- 目录说明 -------- 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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值