精华内容
下载资源
问答
  • 前端获取数据常见的几种方法

    千次阅读 2020-09-16 19:55:10
    1.原生获取ajax <script> // 1. 创建xhr,是一个请求对象,用来向服务器端发送各种请求 var xhr = new XMLHttpRequest(); // 在放送请求之前,必须建立连接。 // 2. open()打开连接,参数1:请求方式,不...

    1.原生获取ajax

    <script>
            // 1. 创建xhr,是一个请求对象,用来向服务器端发送各种请求
            var xhr = new XMLHttpRequest();
    
            // 在放送请求之前,必须建立连接。
            // 2. open()打开连接,参数1:请求方式,不区分大小写。参数2:请求的地址,请求的服务器所在的位置。
            var url = "book.xml";
            xhr.open("GET", url);
    
            // 3. 开始请求,发送请求。参数:携带的数据
            xhr.send();
    
            // 4. 监听服务器状态变化。在状态发生变化时执行。相应的一个“摄像头”
            // 可以在创建了xhr对象后监听。
            xhr.onreadystatechange = function () {
                // xhr.readyState === 4表示数据已经传递过来。客户端可以使用了。
                // xhr.status === 200 http状态码为200, 请求已成功
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // 5. 接收并使用数据  
                    // response响应:站在服务器的角度。服务器给客户端响应。
                    // request请求:站在客户端的角度。客户端向服务器请求。
                    // xhr.response返回任意类型。
                     console.log(xhr.response);
    
                    // xhr.responseText返回字符串。(掌握)
                     console.log(xhr.responseText);
    				
    			 	// 把字符串解析成js对象,序列化
                    var obj = JSON.parse(xhr.responseText);
                    console.log(obj)
                    
                    // xhr.responseType获取返回类型
                     console.log(xhr.responseType);
    
                    // 响应的URL,本质上就是服务器上数据的地址。
                     console.log(xhr.responseURL);
                    
                    // 返回xml格式的文本。(掌握)
                    console.log(xhr.responseXML);
    
                }
            } 
           
        </script>
    

    原理

    首先,XMLHttpRequest构造函数通过new的方式构造一个XHR对象,并将这个对象赋值给xhr(可取任意名字)

    然后,调用XMLHttpRequest对象的方法open与send。

    调用send方法之后请求被发往服务器,由于这次请求是同步的,JS代码会在xhr.send()这个步骤暂停掉,一直等到服务器根据请求生成响应(Response),传回给XHR对象,再继续执行。

    最后,在收到响应后相应数据会填充到XHR对象的属性。

    有四个相关属性会被填充:
    1、responseText —— 从服务器进程作为响应主体被返回的文本。
    2、responseXML —— 从服务器进程返回的DOM兼容的文档数据对象。
    3、status —— 响应的HTTP状态。即从服务器返回的数字代码,如404(未找到)和200(已就绪)。
    4、statusText —— HTTP状态的说明。伴随状态码的字符串信息。

    2.依赖jquery的三种方法

    在这里插入图片描述

    箭头函数不懂的可以参考如下代码
    在这里插入图片描述

    展开全文
  • 前端获取后端数据

    千次阅读 2021-04-16 23:49:54
    前端获取后端数据 前阵子做个项目,因为涉及到前端代码,奈何前端知识有限,有个问题搞了好久。 前端的js里需要一个数组,我后端都封装好了,但是这短短的距离我却不知道怎么拿过去前端的js。 用了网上一个不太友好...

    前端获取后端数据

    前阵子做个项目,因为涉及到前端代码,奈何前端知识有限,有个问题搞了好久。

    前端的js里需要一个数组,我后端都封装好了,但是这短短的距离我却不知道怎么拿过去前端的js。

    用了网上一个不太友好的方法:

    • 先用input从后端拿到前端的body

      <input type="hidden" th:value="${address}" id="address"/>
      
    • 再用document.getElementById拿到js,但是这样如果是传数组会出错

      var address = document.getElementById("address").value;
      

    正好今晚周末,宿舍的前端大佬实习回来,我问了一下前端一般都是怎么拿到后端传过来的数据。

    接下来便是一顿操作:

    • 首先导入JQuery

    • 再写ajax代码访问后端接口

      $.ajax({
              url:'/heap',	//这是后端接口的url
              method:'get',
              success:function (res) {
                  //res便是的数据便是后端拿到的数据
                  //这里需要注意:res为局部变量,
                  //所以需要在方法外定义一个变量把res赋值给他,才能在方法之外使用。
              },
          })
      
    • 后端接口便是我们java开发最熟悉不过的controller类了

      //测试接口
          @RequestMapping("/heap")
          public String heap(){
              String adds = "前端获取的res为该值";
              return adds;
          }
      

    大功告成!
    掌声

    展开全文
  • 补充上一篇文章中遗留下来的坑,上篇文章从数据库动态获取时间并显示。 由于昨天的文章中,前台向后台请求数据后后台返回的值是int[]类型,很多时候不太方便,没有用json传值是因为小尘很多地方还没明白,经过昨晚...

    补充上一篇文章中遗留下来的坑,上篇文章从数据库动态获取时间并显示

    由于昨天的文章中,前台向后台请求数据后后台返回的值是int[]类型,很多时候不太方便,没有用json传值是因为小尘很多地方还没明白,经过昨晚的恶补和今天的实践,小尘继续补充:

    1.Ajax一般用作浏览器向服务器请求数据,小尘看了很多帖子都是这样用的:

    function testGet() {
                $.ajax({
                    type: 'get',
                    url: 'NormalPage.aspx',
                    async: true,
                    success: function (result) {
                        alert(result);
                    },
                    error: function () {
                        setContainer('ERROR!');
                    }
                });
    }

    注意url的值,指定了请求页面,但不会指定方法,后台代码在page_Log方法中写Respose,具体效果小尘没有实践,因为喜欢吧,小尘用了下面这种方法

    function getdata() {
    
                   $.ajax(
                        {
                           type: "post",    
                           async: false,   //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
                            //后台获取数据的函数,注意当对该页面重命名时,
                            url: "Default.aspx/getData",
                             //返回数据形式为json
                            contentType:"application/json; charset=utf-8",
                             dataType: "json",
    
                            //成功获取数据
                            success: function (result) {
                                var obj = JSON.parse(result.d);
                                console.log(obj);
                                alert("tip@@@@@@@@@@" + obj.dataTime + "@@@@@@@@@@@@end");
                                
                            },
    
                            //显示错误                                       
                            error: function (err) {
                                alert(err + "调用后台程序出现错误,请尝试刷新!");
                            },
    
                        });  
                }

    注意这里的url,在页面后面跟了指定的方法,这种方法要求后台的对应方法为静态方法,所以在该方法中不能使用response(会报错,时间原因小尘没有去研究错误原因),后台代码(.cs):

     [WebMethod]
        public static string getData()
        {
            string dataOne =  "{" + '"' + "dataTime" + '"' + ":[1]"+',' +'"'+"dataValue"+'"'+":[10]"+ "}";
            return dataOne;
        }

    这里小尘在后台返回了一个json格式的字符串给前台,而如果前台要用obj.dataTime(obj.key)的方式取值,需要将后台返回的数据解析成json对象,这里提一下response方法,用这种方法是可以直接返回一个json对象给前台的。

    今天的经历分享就到这儿了,错误的地方欢迎批评,也期待大佬们对文章中提到的点进行指导!

    展开全文
  • 剩下的时间有零零散散的学习了一些JS的知识,知道了获取标签可以分为静态获取动态获取。  所谓静态获取也就是通过Id来获取标签,如下: var Box=document.getElementById("Box");  而动态获取则是通过...

      这周三考完最后一门离散数学,考试周告一段落。剩下的时间有零零散散的学习了一些JS的知识,知道了获取标签可以分为静态获取和动态获取。

      所谓静态获取也就是通过Id来获取标签,如下:

    var Box=document.getElementById("Box");
    
    
    

     而动态获取则是通过标签名来获取标签,如下:

    var Box=document.getElementsByTagName("div");

      以上边为例,这两种获取标签有如下三种区别:

    1、通过静态获取只能获取到有特定ID(Box)的div标签;

          而通过动态获取到的是div这一类的标签,变量Box也可能变成一个数组。

    2、假如两个div嵌套:

    <div id="Box2"><div id="Box1"></div></div>

          静态获取Box1的div时,只能用document获取:

    var Box1=document.getElementById("Box1");

          而动态获取时,则可写成:

    var Box2=document.getElementById("Box2");
    var Box1=Box2.getElementsByTagName("div");

    3、如果body里没有div元素,但JS中写入了div元素,静态获取也是获取不到的

    但是动态获取则可以:

    var Box=document.getElementsByTagName("div");
    document.body.innerHTML='<div></div>';
    

    展开全文
  • springMvc中前端获取后台数据的方式

    千次阅读 2019-09-01 18:07:07
    最新项目中需要用到不跳转获取后台数据(List对象集合),百度操作一波,发现CSDN的帖子真水,根本没有一遍讲的比较全面的,而且帖子大多数是错的(可能作者执行成功了,但是那只是你刚好条件巧合罢了,换个条件,你...
  • 记录前端获取数据的方法

    千次阅读 2018-11-15 11:12:47
    1.获取下拉选择框中当前选中的文本值 &amp;lt;select class=&quot;form-control chosen-select isy&quot; name=&quot;pricingMode&quot; id=&quot;pricingMode&quot; &amp;gt; ...
  • 前端动态获取后台处理进度显示在进度条上

    万次阅读 热门讨论 2018-04-21 23:31:51
    我主要是借鉴了这篇博客的思路我来简述一下他的思路,他前端用到了ajax异步请求,一个用于获取冗长的数据,就比如我后台要跑一千次统计,是需要很长时间的,另一个是一个周期ajax,每隔一段时间就去后台访问拿数据,...
  • Flask中前端页面的数据刷新

    万次阅读 2018-10-16 20:20:13
    Flask中前端页面的数据刷新Flask中前端页面的数据刷新1. 后端刷新页面的流程1.1实现服务器的API接口文档1.2使用Flask实现Web服务器应用程序的构建1.3 实现前端请求URL,声明对应Route路由,一般情况下,一个URL对应一...
  • django-请求,获取前端传递的数据

    千次阅读 2020-12-02 11:00:22
    常用HttpRequest对象属性 ...encoding :浏览器提交数据的编码方式 FILES:包含上传的文件 COOKIES:包含所有的cookies session:表示当前会话 diango中一键多值获取 HttpRequest对象的属性GET、POST都是Q
  • 动态下拉框,从后台获取数据

    千次阅读 2019-06-13 18:38:22
    动态下拉框,从后台获取数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉框示例</title> <script type="text/javascript" src...
  • 前端获取数据的3种方式

    千次阅读 2019-03-13 21:39:00
    单表前端: < h1 > 业务线列表(对象) h1 > {% for row in v1 %} < li > {{ row.id }}-{{ row.caption }}-{{ row.code }} li > {% endfor %} < h1 > 业务线列表(字典) h1 > {% for row in v2 ...
  • 因为公司需求我需要从后端获取数据数据库数据在前端动态显示,因为每次数据在前端显示的标题和内容都不一样,我就在网上看,结果网上都是固定的数据,而且大部分是复制粘贴的,多亏我粘贴网址的博主她帮了我很大的忙...
  • 前端获取省市区镇数据

    千次阅读 2020-07-31 13:43:22
    自动生成省市区镇四级联动数据
  • 前端导出pdf js动态数据渲染pdf 动态数据生成pdf 动态数据生成页面pdf js动态生成页面pdf 预览pdf
  • 前端笔记-freemarker模板获取后端数据及提交数据

    万次阅读 多人点赞 2019-12-09 10:54:52
    这里面表单的数据都是从后端获取的,点获取数据,会调用getRecord方法从数据库获取数据。 点击提交备注,是备注可以让用户填写。 提交后,更新数据库中的数据。 在freemarker中使用${xxxx},这种方式获取单条的...
  • 前端默认只能获取以下响应头信息 ...如果想获取到响应头其他数据,需要在服务器端设置 Access-Control-Expose-Headers : 'Authorization' 这样前端就可以获取响应头的其他信息了(包括自定义的响应头)。 举个栗子:...
  • 前端ajax获取从后台传回的数据

    千次阅读 2017-08-16 20:42:25
    这里的数据全是从后台传过来的,今天说一下如何操作。 jsp页面: &amp;lt;div class=&quot;concrete-message&quot;&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;script type=&quot...
  • SpringMVC获取前端数据的四种方法

    千次阅读 2018-11-08 13:55:04
    获取数据之前先说下注解,注解的功能大家都知道,不再多说,这里说下如何使用  首先,我们需要在springmvc-servlet.xml文件中添加 &lt;!--开启注解扫描功能--&gt; &lt;mvc:annotation-driven/&...
  • ajax动态获取后台数据绘制echarts图表

    千次阅读 2019-01-10 15:21:43
    Echarts是一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量...动态获取后台数据绘制echarts图表可以使用jQuery的a...
  • 前端如何从服务器获取数据并显示

    千次阅读 2017-08-26 10:54:18
    前端通过接口去访问服务器,服务器通过脚本去取数据库里的数据,并将数据组织成xml或者json数据格式发送给前端前端使用一个操作句柄进行接收。技术就是采用ajax。可以使用jquery封装好的$.ajax去异步获取后台的...
  • 前后端对接,前端已经获取数据,但是没有展示出出来,如下: 开发者模式: 解决办法:
  • 页面: 事件是视图层到逻辑层的通讯方式。...可以在微信页面使用列表来动态展示数据,然后将动作绑定在列表的每一个元素上面,同时给JS传递相应的data或者dataset。 (1)在wxml页面输入数据,使bindinput实时...
  • select下拉框获取动态数据作为option

    千次阅读 2019-06-29 13:57:02
    select下拉框的内容来自某个表的数据。 可以使用select点击或者直接加载触发请求的事件。 实施 html <select id = "functionCode"> <option value = "">请选择</option> </select> ...
  • 微信小程序前端获取后端数据

    千次阅读 2019-01-26 19:57:37
    <!--index.wxml--> <view>{{webMessage}} <button bindtap="getMessage"> 测试 ... protected void service...这个测试是对于小程序如何获取到服务器内容并输出   如有错误望告知,非常感谢
  • 后端获取前端数据三种方式

    千次阅读 2019-12-23 15:25:01
    前端发出的请求:path?id=1; @RequestMapper(value="path") public void test(@RequestParam("id") int id){ System.out.println(id); } @PathVariable 前端发出的请求:path/{id}; @RequestMapper(value="path/...
  • 首先检查变量名等是否正确,当逻辑没有问题的时候,接收到的数据还是有错,就先在前台写一个input标签,然后再获取该input标签的value既可保证数据传输的正确性!
  • 前端获取JSON数据显示在页面上

    万次阅读 多人点赞 2019-06-04 15:11:34
    从后台获取数据显示在界面上是前端开发所必须要掌握的一项基本技能,简单记录一下从本地模拟数据的JSON文件中获取数据显示在界面上。 1.先创建本地json文件,命名为data.json,json文件存储数据格式如下: { ...
  • 原因:我前端是a标签进行了ajax数据请求,但是没有取消a标签的冒泡事件,只需要取消就好了 $("#tb").on("click",st,function (event) { //alert($(this).attr("value")); $.post("FilmServlet?method=deleteByFid...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 437,375
精华内容 174,950
关键字:

前端动态获取数据