精华内容
下载资源
问答
  • ajax请求后端数据
    千次阅读
    2022-01-24 23:17:08

    springboot使用Echarts组件生成动态图,要从后端获取数据,就写了个这样的前端:

     $.ajax({
            type : "get",
            url : "/pre_homepage",
            cache : false,
       })      

    controller返回的是一个Json数组

    万万没想到,整了一下午+一晚上,都给我报404错误,试了各种解决方法都行不通

    而我又不是写的前后端分离,不会存在跨域问题

    后来试着将ajax换成js原生的fetch,依然报错

    就在这即将到凌晨的时候,搜到某网友的方法:加上@ResponseBody注解

    因为:如果不写@“ResponseBody注解,http请求的内容默认是一个页面,有了这个注解就是返回json字符串了”!!

    感谢这位网友解救我与水火之中呜呜呜..................

    更多相关内容
  • 目录1、Ajax简介1.1简介1.2优点1.3应用场景2、Ajax一般格式3、参数说明3.1一般参数...通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某...

    1、Ajax简介

    1.1简介

    如需要快速应用,请直接跳转至实例,并结合一般参数介绍了解相关参数含义!
    AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

    1.2优点

    1.页面无刷新,用户体验好。
    2.异步通信,更加快的响应能力。
    3.减少冗余请求,减轻了服务器负担
    4.基于标准化的并被广泛支持的技术,不需要下载插件或者小程序

    1.3应用场景

    1. 数据验证
    2. 按需取数据
    3. 自动更新页面

    2、Ajax一般格式

    $.ajax({  
         type: 'POST',  
         url: url ,  
         data: data ,
       dataType:dataType ,  
         success: success , 
         error: error   
    });  
    

    3、参数说明

    3.1一般参数说明

    1.url:发送请求的地址。

    2.data:发送到服务器的数据。将自动转换为请求字符串格式。(可选)

    3.success:当请求成功时运行的函数。

    success: function(data) {
     			console.log(data);
     		},
    

    4.dateType:预期服务器返回的数据类型(可选,默认执行智能判断)。
    若指定有如下可用值:
    “xml”: 返回 XML 文档,可用 jQuery 处理。
    “html”: 返回纯文本 HTML 信息;包含 script 元素。
    “script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。
    “json”: 返回 JSON 数据 。

    5.async:(默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。

    3.2完整参数说明

    完整参数说明请参见API手册:Ajax-API文档

    4、实例

    //存放不同的URL
    urls = {    
     	//时间
     	"time": 'http://*',
     	//日期
     	"date": 'http://*',
     };
    //请求数据:
     function getData_shijian(url,e,f,g) {
     	var result;
     	$.ajax({
     		type: "POST",
     		async: false,
     		url:url,
    		data: {
    			pass: e,
    			now: f,
    			future: g,
    		},
     		dataType: "json",
     		success: function(data) {
     			console.log(data);
     			result = data;
     		},
     		error: function(message) {
                 alert("请求数据失败!");
     		}
     	});
     	return result;
    }
    
    //调用函数
    getData_shijian(urls.time,1,2,3);
    getData_shijian(urls.date,1,2,3);
    
    展开全文
  • Ajax请求后端数据

    千次阅读 2018-12-09 15:21:59
    Ajax是一种无需重新加载整个网页的情况下,能够更新整个网页的技术,我们怎么用Ajax从后台请求后台数据呢? 看下面这个小例子   $.ajax({ type:'GET', //请求方式,可以是GET,也可以是POST url:' ', //...

     Ajax是一种无需重新加载整个网页的情况下,能够更新整个网页的技术,我们怎么用Ajax从后台请求后台数据呢?

    看下面这个小例子

     

    $.ajax({
    
         type:'GET',       //请求方式,可以是GET,也可以是POST
    
         url:' ',                //请求的地址
    
    //请求的格式设置为json(在这个例子中后台传过来的数据本身就是json数据,所以不需要我再进行转换
    
         dataType:"json"  
    
    //设置Ajax请求是同步还是异步,false表示同步,true表示异步,默认是异步的
    
         async:false,     
    
          jsonp:"callback", 
    
          responseType:'application/json',
    
          success:function(result){
    
           var type = result.type
    
            ......
    
           //请求数据成功后我要执行的操作
    
    },
    
    error:function(){
    
           //请求数据未成功
    
           alert("error");
    
    }
    
    })
    --------------------- 
    作者:qq_41795427 
    来源:CSDN 
    原文:https://blog.csdn.net/qq_41795427/article/details/84928200 
    版权声明:本文为博主原创文章,转载请附上博文链接!

     

     

     

     

    展开全文
  • ajax是什么?post、get、每隔几秒

    Ajax(Asynchronous Javascript And XML,异步JavaScript和XML),使用Ajax技术网页应用能够快速地将增量更新呈现在上,而不需要重载(刷新)整个页面,这使得程序能够更快地回应用户的操作。--百度百科

    jQuery.Ajax

    Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。

    jQuery 提供多个与 AJAX 有关的方法。通过 jQuery Ajax 方法,我们可以使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON,同时能够把这些外部数据直接载入网页的被选元素中。

    jQuery Ajax本质就是 XMLHttpRequest,对它进行了封装,方便调用。--狂神笔记

    Ajax请求的一般格式

    $.ajax({
                url: "http://localhost:8081/getUser", //要请求的后端地址
                type: "GET", //数据发送的方式(POST或者GET)
                data: {val1: "1", val2: "2"}, //需要传递的参数
                dataType: "json", //后端返回的数据格式
                success: function (result) {//ajax请求成功后触发的方法
                    console.log(result); //result为响应内容
                },
                error: function () {//ajax请求失败后触发的方法
                    console.log('Send Request Fail..');
                }
            });

    type类型为GET

    该实验请求的地址改编自vhr的后端接口,跨域问题可参照博文,后端接口不做过多赘述。

    <script type="text/javascript">
            $("#testId").click(function () {
                $.ajax({
                    url: "http://localhost:8081/system/basic/department/",
                    type: "GET",
                    data: {"id": 100},
                    dataType: 'json',
                    success: function (result) {
                        console.log(result);
                        console.log(result.obj.enabled);
                        $("#text1").val(result.msg);
                        alert("ajax请求成功!");
                    }
                });
            });
        </script>

    响应结果为:

     type类型为POST

    对于POST来说,我们提交data时需要注意:

    ①data的数据格式:一般来说是json字符串格式,当我们提交表单数据时,我们会将其存储在一个数组或者对象里,而这种格式是不符合ajax请求的数据格式,这时,我们可以利用JSON.stringify()方法将其转化为JSON字符串

    ②ajax请求头(header)的Content-Type字段,数据发送出去,服务端解析成功才有意义。一般服务端语言如 php、python 等,以及它们的 framework,都内置了自动解析常见数据格式的功能。服务端通常是根据请求头(headers)中的 Content-Type 字段来获知请求中的消息主体是用何种方式编码,再对主体进行解析。所以,这时我们需要设置请求头。

     <script type="text/javascript">
            $("#testId").click(function() {
                $.ajax({
                    url: "http://localhost:8081/system/basic/department/pos",
                    type: "POST",
                    data: JSON.stringify({
                            "id":"96",
                            "name":"运维4部",
                            "parentId":"92",
                            "depPath":"1.4.5.92.96"
                        }),
                    contentType: 'application/json',
                    dataType: 'json',
                    success: function(result) {
                        console.log(result);
                        alert("ajax请求成功!");
                    }
                });
            });
        </script>

    响应结果为:

     Ajax轮询请求

    Ajax轮询请求:客户端是按照规定时间(这个时间由你设定,如:2秒)向服务端发送请求,前一次请求完成后,无论有无结果返回,2秒之后下一次请求又会发出。

    本次实验为Ajax轮询请求后端接口,以后端接口返回的某个数据为条件,每3秒进行一次Ajax请求,当数据符合条件时,在页面显示PDF,并结束轮询。

    使用到:PDFObject.js、setInterval()、claerInterval()

    <script type="text/javascript">
            $(function(){
                var parentId,status;
                function getResult(){
                    $.ajax({
                        url: "http://localhost:8081/system/basic/department/",
                        type: "GET",
                        data: {"id":100},
                        dataType: 'json',
                        success: function(result) {
                            parentId = result.obj.parentId;
                            if (parentId==90){//当parentId等于90时,加载pdf,并且停止轮询
                                PDFObject.embed("http://localhost:8081/system/basic/department/getPdfFile", "#viewPDF");
                                clearInterval(status);
                            }
                        }
                    });
                }
                if(parentId!=90){//当parentId不等于90时,每3秒做一次ajax轮询请求
                    status = setInterval(getResult, 3000);
                }
            });
        </script>

    后端接口:返回pdf流。

    @GetMapping("/getPdfFile")
    @CrossOrigin(value = "http://localhost:8080")
    public void getPdfFile(HttpServletRequest request, HttpServletResponse response) throws IOException {
            BufferedInputStream bis = null;
            OutputStream os = null;
            try {
                byte[] buf = new byte[1024];
                int len = 0;
                response.reset();
                response.setContentType("application/pdf;charset=utf-8");
    
                String pdfPath = "E:\\iotest\\javase.pdf";
                File file = new File(pdfPath);
                if (file.exists()) {
                    FileInputStream fis = new FileInputStream(pdfPath);
                    if (fis != null) {
                        bis = new BufferedInputStream(fis);
                        os = response.getOutputStream();
                        while ((len = bis.read(buf)) != -1) {
                            os.write(buf, 0, len);
                        }
                    }
                }
            } catch (Exception e) {
                e.printStackTrace();
            } finally {
                if (bis != null) {
                    bis.close();
                }
                if (os != null) {
                    os.close();
                }
            }
        }

    结果:在数据库中修改parentId的值为90,过几秒后,pdf就会显示在页面上。

     参考:

    Ajax请求传递参数遇到的问题 - 苍 - 博客园

    Ajax轮询请求 - -零 - 博客园

    实现在线预览pdf文件(接口获取文件) - ID_小汤 - 博客园

    https://blog.csdn.net/qq_42607189/article/details/98059470?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-2.tagcolumn&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-2.tagcolumn

    展开全文
  • 获取后端数据后,进行前端的页面渲染,数据读到了,渲染却失败了...以上这篇解决jquery的ajax调取后端数据成功却渲染失败的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。
  • 如果不加这行代码,就是默认异步请求,那么可能出现一种情况就是你在使用ajax请求后端插入数据(增删查改)的同时,他也会执行getData的代码,那么就可能导致在后端还没有插入数据时你先去获取数据,这样就会出现...
  • 若依框架ECharts报表通过ajax请求后端数据显示 效果图: 1:柱状图 1.1 在html里面加入容器 1.2 后端-controller 向前端传入List数据 增加了 图片拖拽 功能,你可以将本地的图片直接拖拽到编辑区域直接展示; 全新...
  • 通过服务器中的一键部署软件将项目的jar包部署到服务器上,通过端口号访问,其中通过jQuery向后端发送请求出现500错误。 原因分析: 一开始检查时,由于我在写ajax请求时其中url写的是“http://127.0.0.1/xxx”...
  • ajax请求后端接口小demo ps:使用的jquery的ajax的请求方式 ajax的get请求 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ajax</title> <link rel=...
  • ajax接收后端数据

    千次阅读 2020-11-21 19:48:28
    页面放一个连接,当点击链接,向后端发送请求,最终显示到页面上。再次点击链接,信息隐藏。 效果: demo.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> &...
  • 第一种用最简介方便的$.post...第二种通过$.ajax的写法请求后端数据 $.ajax({ type: 'post', url: "你的url地址", cache: false, data: {//后台给的参数}, dataType: 'json',//通过json格式返回
  • Ajax正常返回,并且返回数据格式不是很复杂 复杂情况,前端会将复杂 数据进行反序列化为一个JSON串 下面本人就根据这 2 种情况,在后端如何获取数据的方法与大家分享。 第一种情况:(数据简单) 前端: $.ajax({ ...
  • Ajax的核心是JavaScript对象XmlHttpRequest,XmlHttp使我们可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。 通过XMLHttpRequest对象,前端开发人员就可以在页面加载以后进行页面的局部更新等操作。 ...
  • SpringMVC方法返回一个字符串时,前端的ajax的dataType若指定json,即便ajax请求成功,也不进success的回调; SpringMVC方法返回一个字符串时,前端的ajax的dataType若不指定json,则ajax会把后端返回的字符串直接传...
  • 本篇文章主要介绍了详解vue与后端数据交互(ajax):vue-resource,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
  • 今天小编就为大家分享一篇ajax判断后端返回的数据是否为null的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Ajax是通过http,使得JS与后端进行数据通信,由于Ajax的异步特性,可以使多个Ajax请求同时访问后端,对页面的局部数据进行逻辑处理,并渲染。 ajax中前端和后端的交互图: 代码实现: $.ajax({ type: "post", ...
  • 前端请求后端数据的三种方式

    千次阅读 2021-09-17 10:37:34
    在前后端分离的开发项目中,前后端联调的时候会出现这样那样的问题,尤其是在调取数据的程序上面,有时候前端给的前端给到后端的明明是正确的但就是无法拿到正确的数据,下面小千就来给大家详解一下常见的三种数据...
  • (一)ajax请求后端数据 $.ajax({ url: "/xx/yy", type: "post", data: {"test": test}, dataType: "json", success: function(ret){ if(!ret["success"]) { alert(ret["msg"]); return; } }, error: ...
  • 前台请求异步请求 Controller下的Action 方法,后端返回ActionResult 即可。但是在ASP.NET WebForm中使用异步就比较麻烦,下面介绍一种处理WebForm异步请求的形式。   通过一般处理程序的形式处理异步请求  1....
  • 1.导入脚手架axios.min...2.模拟请求数据data.json { "sucess": true, "code": 20000, "message": "成功", "data": { "items": [ {"name": "lucy", "age": 20}, {"name": "mary", "age": 21}, {"name": "jack",
  • ajax后台请求方式
  • 2. 解决办法:声明:本人前端页面名称index.html,后端产生数据的是servlet层,文件名称为 Pre_sensorServlet.java需要给以下页面标红的格子里传入由后端获取到的数据(因为项目还未结题,仍处于保密阶段,文字信息已...
  • 可以看这篇文章,说得很好。 ajax向后台传对象时,@RequestBody 接收对象
  • Ajax请求数据小实例

    2018-10-18 21:06:31
    使用Ajax get请求数据的小例子,使用$.each()循环显示到表格,里面有接口,大家可以使用,欢迎指导学习
  • 1、前台使用jQuery ajax请求 $.ajax({ url: r_getRolePer.action, dataType:'json', data: {userId:1}, //请求的附加参数,用json对象 method:'POST', success: function(data){ $.messager.alert('消息',data....
  • 请求头里添加流的类型 // 批量导出 export const exportBakingRecords = (data) => { return request({ // url: "/api/blade-pcm/baking-records/exportBakingRecords", url: "/center/baking-records/...
  • react-ajax axios 方法一:在package.json中配置 "proxy":"http://localhost:5000" 这样localhost:5000就是我们要代理到的服务器 getStudentData = () => { axios.get('/students').then( (result) =>...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 70,639
精华内容 28,255
关键字:

ajax请求后端数据