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. PHP/JS中获取当前页面的完整URL

    javascript实现: top.location.href 顶级窗口的地址this.location.href 当前窗口的地址 php实现 PHP实现 #测试网址: http://localhos ...

  2. SYN591-A型 计数器

       SYN591-A型 计数器 秒表计数器累计计数器电机测速表使用说明视频链接: http://www.syn029.com/h-pd-248-0_310_44_-1.html 请将此链接复制到浏览 ...

  3. KNN算法——分类部分

    1.核心思想 如果一个样本在特征空间中的k个最相邻的样本中的大多数属于某一个类别,则该样本也属于这个类别,并具有这个类别上样本的特性.也就是说找出一个样本的k个最近邻居,将这些邻居的属性的平均值赋给该 ...

  4. 区块狗开发可以做出APP吗

    区块狗系统开发林生▉l8l加4896微9698电同步▉,区块狗奖励系统开发,区块狗平台系统开发,区块狗系统开发软件,区块狗系统开发案例,区块狗源码系统开发. 本公司是软件开发公司,华登区块狗/十二生肖 ...

  5. 【转】如何在Ubuntu 14.04 LTS上设置Nginx虚拟主机

    介绍 转自http://www.pandacademy.com/%E5%A6%82%E4%BD%95%E5%9C%A8ubuntu-14-04-lts%E4%B8%8A%E8%AE%BE%E7%BD% ...

  6. springboot 集成完整的swagger2

    springboot 在集成swagger中会不会遇到各种问题: 1.swagger  进行接口鉴权(比如设置header的token,接口进行拦截处理). 2.swagger 进行实体属性解析(po ...

  7. Adboe Flash远程代码执行_CVE-2018-4878漏洞复现

    Adboe Flash远程代码执行_CVE-2018-4878漏洞复现 一.漏洞描述 该漏洞可针对windows用户发起定向攻击.攻击者可以诱导用户打开包含恶意Flash代码文件的Microsoft ...

  8. HTML连载19-子元素选择器&交集选择器

    一.子元素选择器 1.定义:找到指定标签中所有特定的直接子元素,然后设置属性 2.格式: 标签名称一>标签名称2{ 属性:值: } 3.释义:先找到叫做“标签名称1”的标签,然后在这个标签中查找 ...

  9. 借助URLOS快速安装WordPress

    ### 简介 WordPress是一个以PHP和MySQL为平台的自由开源的博客软件和内容管理系统.WordPress具有插件架构和模板系统.截至2018年4月,排名前1000万的网站超过30.6%使 ...

  10. HDU 1584：蜘蛛牌（DFS）

    http://acm.hdu.edu.cn/showproblem.php?pid=1584 题意:要让小的牌放到大的牌上面最少移动的距离. 思路:看成让大的牌放在小的牌上面了...用一个标记数组vi ...