1.前台调用ajax访问后台方法,并接收数据

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>success</title>
</head>
<script type="text/javascript">
function ajax(url, fnSucc) {
if (window.XMLHttpRequest) {
var oAjax = new XMLHttpRequest();
} else {
var oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6浏览器创建ajax对象
}
oAjax.open("GET", url, true);//把要读取的参数的传过来。
oAjax.send();
oAjax.onreadystatechange = function () {
if (oAjax.readyState == 4) {
if (oAjax.status == 200) {
fnSucc(oAjax.responseText);//成功的时候调用这个方法
} else {
if (fnfiled) {
fnField(oAjax.status);
}
}
}
};
} function change() {
ajax('/abc2?user="wangerxiao"', function (str) {
alert(str);
})
}
</script>
<body>
<h1>this is success page</h1>
<h2>${msg}</h2>
<div class="form" style="width: 100px;height: 100px;background-color: red" onclick="change()">
</div>
</body>
</html>

2.后台处理请求返回数据map以及list

@Controller
public class HelloController {
@GetMapping("/abc2")
@ResponseBody
public Map<String,Object> hello2(@RequestParam("user")String user){
System.out.println(user);
List<String> list = new ArrayList<>();
list.add("a");
list.add("b");
list.add("c");
Map<String,Object> map = new HashMap<>();
map.put("1","王二小");
map.put("2","刘明");
map.put("3","张三");
return map;
}
}

js - 原生ajax访问后台读取数据并显示在页面上的更多相关文章

  1. 【WPF学习笔记】之如何把数据库里的值读取出来然后显示在页面上:动画系列之(六)(评论处有学习资料及源码)

    (应博友们的需要,在文章评论处有源码链接地址,以及WPF学习资料.工具等,希望对大家有所帮助) ...... 承接系列五 上一节讲了,已经把数据保存到数据库并且删除数据,本讲是把已经存在的数据从数据库 ...

  2. 使用原生ajax访问后台数据并将其展现在前端页面中(小菜鸟自己整理玩的,大神勿喷)

    首先你要有php的环境,关于php环境的搭建,php本地站点的搭建,此处不再重复请看这里:http://www.cnblogs.com/Gabriel-Wei/p/5950465.html我们把wam ...

  3. JS原生ajax

    原文链接:http://caibaojian.com/ajax-jsonp.html 一.JS原生ajax ajax:一种请求数据的方式,不需要刷新整个页面: ajax的技术核心是 XMLHttpRe ...

  4. struts2中从后台读取数据到<s:select>

    看到网上好多有struts2中从后台读取数据到<s:select>的,但都 不太详细,可能是我自己理解不了吧!所以我自己做了 一个,其中可能 有很多不好的地方,望广大网友指出 结果如图 p ...

  5. Atitit  项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx

    Atitit  项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx 1. 场景:应用在项目列表查询场景下1 1.1. 预计初步掌握vue ...

  6. jquery通过AJAX从后台获取信息并显示在表格上的类

    前一阵我写了:<jquery通过AJAX从后台获取信息并显示在表格上,并支持行选中.>现在,我把他们处理了一下,不需要每次写代码了: 具体代码如下: //获取数据并显示数据表格 funct ...

  7. jquery通过AJAX从后台获取信息并显示在表格上,并支持行选中

    不想用Easyui的样式,但是想要他的表格功能,本来一开始是要到网上找相关插件的,但是没找到就开始自己写,没想到这么简单. 后台代码:(这个不重要) public ActionResult GetDi ...

  8. 从多个XML文档中读取数据用于显示webapi帮助文档

    前言: 你先得知道HelpPageConfig文件,不知道说明你现在不需要这个,所以下文就不用看了,等知道了再看也不急.当然如果你很知道这个,下文也不用看了,因为你会了. 方法一: new XmlDo ...

  9. 原生js,jquery通过ajax获得后台json数据动态新增页面元素

    一.原生js通过ajax获取json数据 因为IE浏览器对ajax对象的创建和其他浏览器不同,为了兼容全部浏览器,我用下面的代码: function createXMLHttpRequest(){ t ...

随机推荐

  1. 条款16:成对使用new和delete时要使用相同的形式

    请牢记: 如果在new表达式中使用[],必须在相应的delete表达式中也使用[]. new[]  对应  delete[] 如歌在new表达式中不适用[],一定不要在相应的delete表达式中使用[ ...

  2. hadoop之文件管理基本操作

    # 格式化hdfs hadoop namenode -format # 查看hadoop下的文件夹 hadoop fs -ls # 创建hdfs文件夹 hadoop fs -mkdir /user/i ...

  3. ZooKeeper学习第七期--ZooKeeper一致性原理(转)

    转载来源:https://www.cnblogs.com/sunddenly/p/4138580.html 一.ZooKeeper 的实现 1.1 ZooKeeper处理单点故障 我们知道可以通过Zo ...

  4. 解决Mac下sed命令报错的问题

    在Mac上准备批量替换一些文字,使用sed命令,如下: sed -i 's/xxx/yyy/g' file 同样的命令在Linux上是可以成功运行的,注意Mac下man sed中-i参数的说明: 原来 ...

  5. Laravel --- 部署Laravel项目到vps主要步骤以及遇到的问题记录

    买了一个国外的vps,然后搭建环境并且跑了下laravel,折腾了一天半左右,遇到的问题和操作在此记录下: 1.我把本地的代码用git方式上传到github,然后在vps用git下载代码,步骤如下 - ...

  6. Java 程序员的大数据入门指南

    项目 GitHub 地址:https://github.com/heibaiying/BigData-Notes ✒️ 前 言 大数据常用技术栈思维导图 大数据常用软件安装指南 一.Hadoop 分布 ...

  7. Docker 安装mysql容器数据卷挂载到宿主机

    环境 Centos:7 Docker: 17.05-ce Mysql: 5.7 1. Mysql外部数据和配置文件路径 msyql配置文件路径:/etc/mysql mysql数据卷路径:/var/l ...

  8. Neo4j 爬坑笔记for3.2.6

    官网语法,非常详尽:http://neo4j.com/docs/developer-manual/current/cypher/clauses/match/ A:请对应版本号,不同大版本可能会有很大区 ...

  9. CLR 垃圾回收算法

    c#相较于c,c++而言,在内存管理上为程序员提供了极大的方便,解放了程序员与内存地址打交道,提高了程序员的工作效率.比如c中分配的malloc堆空间没有释放导致的内存泄露,数组越界导致的踩内存错误, ...

  10. 怎么用Hostwinds搭建Wordpress博客网站(超详细图文教程)

    Hostwinds 成立于 2010 年,在主机托管行业算是一个比较新的品牌,但是,凭借丰富的产品线.卓越的服务器性能.良好的客户支持,以及低廉实惠的价格,他们受到了广大客户的喜爱,并多次获得行业重要 ...