对后端函数的Ajax JSON调用总是会触发错误响应，即使函数工作正常 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

前后端交互的弯弯绕绕

前后端交互：，收拾一下心情让我们来聊一聊AJax吧，随着前端的飞速发展，前后的交互也发生了天翻地覆的变化：前后端交互的方式有很多： AJAX、表单提交、WebSocket、RESTful API、......因为，普通用户不会去控制台里看错误信息，我们要编写代码拿到错误并展示给用户在页面上，使用 axios 的 catch 方法，捕获这次请求响应的错误并做后续处理，具体的错误处理过程如下：如果请求成功发出且服务器也响应了状态码...也会被捕获如果在发送请求时出了问题，比如请求配置有误；开发者可以使用 .catch() 方法来处理这些错误；Demo用户注册请求：部分平台对用户名有唯一的限制，对于相同的用户会错误提醒；POST http...执行异步任务-并传递结果 // 成功调用: resolve(值) 触发 then() 执行 // 失败调用: reject(值) 触发 catch() 执行})// 3....： async 关键字用于声明一个异步函数，定义：函数声明、函数表达式前面；当你在一个函数前面加上 async，这个函数就会返回一个 Promise 对象；如果函数正常执行结束，Promise 的状态将变为

6862 0

Ajax 技术学习（Java EE 实现） —— 用户账户的验证

同步：我们正常访问网页的时候，都是点一个链接，页面刷新好了，就可以看到我们想看的数据异步：页面向服务器发送请求之后不必等待返回结果，服务器返回的结果会由专门的回调函数来处理结果回调函数【补充】：...，这就是 ajax 技术的应用，在我们没有察觉的情况下，就自动显示结果 1.3 ajax 的工作原理 Ajax 首先会向服务端发送一个请求，然后调用一个服务（回调函数），接着返回结果。...XMLHttpRequest 常用属性 onreadystatechange：请求状态改变的事件触发器（readyState变化时会调用此方法），一般用于指定回调函数 readystate：XMLHttpRequest...，想更多了解的请移步 —— http 响应状态码大全 200 成功 400 客户端错误，404 页面不存在，403 没有权限访问 500 服务端发生错误 2....然后服务端在返回数据的时候，又出现了了问题，又是找 json 格式数据返回，xml 数据格式返回，最后是通过输出流，写入数据给 ajax 的回调函数，这样就接收到了数据 3.2 学习参考 ajax

2.1K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

请求跨域的解决方案

，默认不允许跨域调用，这里记录一下解决方案，防止以后再犯相同的错误。...然后其实jquery会在getJSON方法被触发时，动态的创建一个script，这个script的src会是类似于http://b.com/2.php?...jQuery可以从一个脚本对服务器发出Ajax/HTTPD调用，$.getJSON()可以获取服务响应。但是当网页的ajax调用存在于服务器不同的域名中时，这种方法可能会失败。...JSONP(JSON with Padding)就是为了让所有浏览器都能够跨域名调用。 JSONP将JSON请求封装进一个JavaScript函数，作为脚本发回给浏览器。...开发者不需要预先知道函数名，只要回调参数就行了。回到客户端，返回的函数就像原始JSON对象一样。

1.4K8 0

Vue 前后端交互基础

如果改变已经发生了，你再对 Promise 对象添加回调函数，也会立即得到这个结果。...函数的作用是，将 Promise 对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected)，在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。 ...第一个回调函数是 Promise 对象的状态变为 resolved 时调用，第二个回调函数是 Promise 对象的状态变为 rejected 时调用。其中，第二个函数是可选的，不一定要提供。...API ♞ 拦截请求和响应 ♞ 转换请求数据和响应数据 ♞ 取消请求 ♞ 自动转换 JSON 数据 ♞ 客户端支持防御 XSRF 1.4.2 axios 的使用 ☞ 安装 #...; }, function(error){ // 处理错误响应 console.log(error) });

2.4K5 0

读Zepto源码之Ajax模块

，定义了以下几个事件，正常情况下的触发顺序如下： ajaxstart : XMLHttpRequest 实例化前触发 ajaxBeforeSend：发送 ajax 请求前触发 ajaxSend : 发送...：对响应数据进行过滤； xhr： XMLHttpRequest 实例，默认用 new XMLHttpRequest() 生成； accepts：从服务器请求的 MIME 类型； beforeSend：...在触发 ajaxSuccess 事件前，先调用配置中的 success 方法，将 ajax 返回的数据 data 和当前状态 status 及 xhr 作为回调函数的参数。...在触发事件前，调用配置中的 error 方法，将 xhr 实例，错误类型 type 和 error 对象作为回调函数的参数。...jsonp 实现跨域其实是利用了 script 可以请求跨域资源的特点，所以实现 jsonp 的基本步骤就是向页面动态插入一个 script 标签，在请求地址上带上需要传递的参数，后端再将数据返回，前端调用回调函数进行解释

3.8K0 0

【面试Vue全家桶】vue前端交互模式-es7的语法结构？asyncawait

处理异步调用接口的方式。网上一图，回调地狱：看到晕，使代码难以理解和维护。 ? 前后端的交互是什么前后端的交互就是前端的浏览器去调用后端的接口，拿到后端的数据，在做前端的处理，进行渲染。...客户端与服务器的通信模式，前后端交互，调用接口的方法，第一种，原生的ajax，第二种，基于jquery的ajax，第三种，基于fetch，第四种，基于axios。...callback函数注意，异步操作会在将来某个时间点触发一个函数调用。...当promise状态发生改变时，就会触发then()里面的响应函数处理，promise状态一旦改变，就不会再变了。...它的特性，第一点是支持浏览器和node.js，第二点是支持promise，第三点，能够拦截请求和响应，第四点，可以自动转换json类型。

1.7K1 0

Django之json、Ajax简介及实例介绍

(usernames_r); js中对json的处理也有两个函数。...前端向后端传数据 js的JSON.stringify()方法+python的json.loads()方法。...默认不需要显性指定这个属性，ajax会根据服务器返回的content Type来进行转换；比如我们的服务器响应的content Type为json格式，这时ajax方法就会对响应的内容...进行一个json格式的转换，if转换成功，我们在success的回调函数里就会得到一个json格式的对象；转换失败就会触发error这个回调函数。...(dic)) 这其实就是JSONP的简单实现模式，或者说是JSONP的原型：创建一个回调函数，然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递，完成回调。

7.2K2 0

全面分析前端的网络请求方式

四、Ajax的出现解决了什么问题在 Ajax出现之前， web程序是这样工作的： ?...构造函数里面并没有对 responseText的明确处理，最后交给了 _initBody函数处理，而 Response并没有主动声明 _initBody属性，代码最后使用 Response调用了 Body...，不能多次调用无法正常的捕获异常老版浏览器不会默认携带 cookie 不支持 jsonp 十一、对fetch的封装请求参数处理支持传入不同的参数类型： function stringify(url...HTTP 状态码时，从 fetch()返回的 Promise 不会被标记为 reject，即使该 HTTP 响应的状态码是 404 或 500。...src属性中的链接可以访问跨域的 js脚本，利用这个特性，服务端不再返回 JSON格式的数据，而是返回一段调用某个函数的 js代码，在 src中进行了调用，这样实现了跨域。

2.2K4 0

前后端数据对接的思考及总结

早期的开发方式早期的开发方式如下图：这也是我前面工作1-3年的开发方式,我们没有前端帮我们写JS函数功能,所有的页面表单验证,数据渲染,数据接口编写都是我们后端全部实现,看上去更像是一个全栈工程师,...但大都使用jsonp跨域接口调用的方式来达到分离效果,后端所有的接口都是可跨域调用的jsonp形式,抛开需要登录的授权之外的接口，前端在开发的时候本地无需开启服务即可调用服务端接口，然后渲染数据，完成页面交互渲染效果...,这也涉及到前端的知识,简单点说就是js端的function函数执行正常的后端响应数据,例如： { "code":"8200", "data":{ "id":"100", "name":"Test...//more...... } }); 前端在页面定义callback回调函数,callback函数接收后端响应回来的data-json数据,后端响应后执行callback函数达到调用前端业务逻辑的目的...，经过一系列相关业务场景下的计算，响应给前端json数据，每一层url的path定义需要清晰明了，这和后端在使用AOP定义事务管理同理，后端service需要满足一定的命名规范，这样方便统一管理，而且有这层规范后

3.3K3 0

原生JS与jQuery对AJAX的实现

就是利用JS来无刷新与后端交互，通过get和post方式把数据发送到后端，或者请求后端的数据，然后根据请求的数据进行改变DOM节点等操作，从而取消掉用form的submit方式一提交就会跳转页面的情况，...是返回的数据，为字符串格式三、jQuery实现AJAX 1.GET 使用get()方法时，采用GET方式向服务器请求数据，并通过方法中回调函数的参数返回请求的数据，它的调用格式如下： $.get(...四、AJAX的调试在运行AJAX的页面按F12(Chrome下)，进入“Network”选项卡，点击"XHR"过滤器，然后触发AJAX的事件。 ? 点击要进行调试的AJAX动作，进入详情页。 ?...一般是200正常；404未找到页面，一般是URL错误，或者后台没有创建相应的action；500内部服务错误，多为后台错误。...点击Response就可以查看服务器返回的数据了，一般在这里查看返回是否正常，格式是否正确，一般是JSON。 ? 基本上通过发送的数据及传回的数据就能定位问题所在了。

3.6K2 0

javaee的OA项目（九）ajax的学习,JavaScript结合ajax使用，实现二级联动

就绪状态 05发送请求注意事项二级联动的实现实现的效果代码实现的第一步第二步，写ajax代码后端的代码 Ajax响应数据内容 01普通文本(必须掌握) 02json格式(必须掌握) 1...、更改对象的toString 方法 2、手动拼接json字符串 3、使用GSONjar包 03XML格式(了解) 为什么使用ajax 方案1：传统方案提交表单，服务器端处理，错误后跳转到注册页面，同时显示错误信息...03指定回调函数 Ajax响应回来后自动调用函数不同的Ajax请求基本步骤相同，差别和难易主要在回调函数 function process(){ if(xhr.readyState == 4){/...在Ajax应用程序中需要了解五种就绪状态,但通常只使用状态4： 0：请求没有发出（在调用 open() 之前） 1：请求已经建立但还没有发出（调用 send() 之前） 2：请求已经发出正在处理之中（这里通常可以从响应得到内容头部...第二步，写ajax代码也就是在第一个下拉框上写一个改变的事件，当选择的东西变了，就会触发这个事件，这个事件里面的内容就是根据这个选择的东西，从后端获取对应的数据之后，放到第二个下拉框里面。

1.1K1 0

异步编程Ajax的详解，并对其进行封装整理

Ajax开始讲起，然后最后会尽可能得模仿JQuery对其进行封装，让我刚才提到的两类人能对Ajax有进一步的了解。...（1）JQuery中的Ajax （2）封装准备工作（3）封装$.get方法（4）封装$.post方法（5）封装$.ajax方法五、Ajax的约束六、结束语一、什么是Ajax Ajax（Asynchronous...）三、Ajax的使用 Ajax的基本流程：创建XHR对象 => 发送数据 => 接收数据（1）状态码既然Ajax涉及到前后端的数据交互，那么我们就先来简单的看一下几种类型的状态码，如下表：状态码...() 方法，但未发送 send() 方法 2：已调用 send() 方法，但未接收到响应 3：已接收到部分响应 4：已接收到全部的响应同时，xhr对象可以绑定一个 readystatechange...JSON.parse(xhr.responseText) : xhr.responseText // 调用回调函数，并把参数传进去 callback(res, xhr.status,

2K2 0

jquery ajax参数详解

如果你明确地传递了一个content-type给 $.ajax() 那么他必定会发送给服务器（即使没有数据要发送） context type:Object 这个对象用于设置Ajax相关回调函数的上下文...提供data和type两个参数：data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。...(因为将使用DOM的script标签来加载) “json”: 返回 JSON 数据。 “jsonp”: JSONP 格式。使用 JSONP 形式调用函数时，如 “myurl?...通常只在本地和远程的内容编码不同时使用。 statusCode 默认: {} 一组数值的HTTP代码和函数对象，当响应时调用了相应的代码。...例如，如果响应状态是404，将触发以下警报： $.ajax({ statusCode: {404: function() { alert('page not found'); } });

3.2K1 0

都0202年了，你还不会前后端交互吗

文章目录一、后端 API 服务搭建二、原生 ajax 2.1 不带参数的 get 请求 2.2 带参数的 get 请求 2.3 带参数的 post 请求 2.4 get 请求返回 json 数据三...(msg); } }) 成功响应 2.2 带参数的 get 请求后端接口编写 # 带参数的 get 请求 @app.route("/ajax/data1") def...}, pwd：{pwd}" 后端响应前端 js // 带参数的 post 请求 $.ajax({ url: "http://127.0.0.1:3000/ajax/post", type...2.4 get 请求返回 json 数据后端接口编写 @app.route("/ajax/js") def ajax_json(): person = {"id":3324,"username...:"json", success: function(msg) { console.log(msg); } }) 数据正常响应了三、原生 Promise 3.1 什么是 Promise

1.9K2 1

关于ajax学习笔记

一、什么是AJAX，为什么要使用Ajax（请谈一下你对Ajax的认识） ajax全称Asynchronous JavaScript and XML（异步的javascript和XML）,为什么会有这么一种技术的出现呢...AJAX缺点： ajax不支持浏览器back按钮。安全问题 AJAX暴露了与服务器交互的细节。对搜索引擎的支持比较弱。破坏了程序的异常机制。不容易调试。...二、ajax 的执行过程创建XMLHttpRequest对象,也就是创建一个异步调用对象创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息设置响应HTTP请求状态变化的函数发送...501 Internal Server Error服务器遇到一个错误，使其无法对请求提供服务这是比较齐全的状态表： ?..._JSONtoURLparams(json)); } } })(); 五、关于ajax缓存问题当Ajax第一次发送请求后，会把请求的URL和返回的响应结果保存在缓存内，当下一次调用

2K2 0

AJAX-前后端交互的艺术

，具有良好的响应能力将一些工作从服务器转移到客户端中，节省了服务器和带宽资源按需取数据，减轻了服务器负担，也大大减少了冗余请求缺点： AJAX 主要依赖于JavaScript ，浏览器对 JavaScript...charset=utf-8"); String username = request.getParameter("username"); //此语句仅为方便判断是否后端正常收到了前端的数据...=admin&age=20" success：响应成功后的回调函数 error：果请求响应出现错误，会执行的回调函数 dateType：设置接受到的响应数据的格式（上例中未写）当然它的参数和设置选项不止这些...，xml, html, script, json, text, _default 这种方式旨在快速的实现请求，当请求成功的时候可以调用回调函数，如果需要在出错的时候执行函数，还是需要使用 (二) $.post...，并且我们对 AJAX 有了一定的认识，但是 AJAX 的一些应用场景，以及AJAX 如何搭配常见的如 JSON 等数据格式，实现前后端的交互，并没有提到，我们就放到后面说，将全部的内容挤到一起，无论是从篇幅或者说内容的针对性都是不够强的

2.1K1 0

高级前端：详解手写原生Ajax的实现

Ajax开始讲起，然后最后会尽可能得模仿JQuery对其进行封装，让我刚才提到的两类人能对Ajax有进一步的了解。...）三、Ajax的使用 Ajax的基本流程：创建XHR对象 => 发送数据 => 接收数据（1）状态码既然Ajax涉及到前后端的数据交互，那么我们就先来简单的看一下几种类型的状态码，如下表：状态码...() 方法，但未发送 send() 方法 2：已调用 send() 方法，但未接收到响应 3：已接收到部分响应 4：已接收到全部的响应同时，xhr对象可以绑定一个 readystatechange...JSON.parse(xhr.responseText) : xhr.responseText // 调用回调函数，并把参数传进去 callback(res, xhr.status,...JSON.parse(xhr.responseText) : xhr.responseText // 调用回调函数，把对应参数传进去 callback(res, xhr.status

2K2 0

Axios 前后端交互工具学习

url中 then方法这个就相当于回调函数，在ajax中有一个success:function(data){},可以进行回调，而这里通过 then进行对请求返回的响应数据进行一个处理，内部是一个函数...，函数中的参数是返回的响应（包含响应头、响应数据、相应格式等，通过 response.data 能拿到返回数据） catch方法这个就像与异常返回的函数，在ajax中有一个 error:function...(){},，返回的服务器异常错误的响应数据 POST请求的方式 // axios发送各种方式的异步请求,post方法的第一个参数是 url，第二个参数是在body中的 json对象...// 对响应数据做点什么 if(response.status!==200){ alert("服务器出现错误!")...// 对响应错误做点什么 return Promise.reject(error); }); Vue 怎么和 Axios配合呢？

8212 0

搭建简易的物联网服务端和客户端-网络控制（二十）

网络控制，就是通过前端页面点击控制按钮，然后通过ajax来出发后端函数将命令存入数据库，然后后端TCP服务端将命令从数据库取出，发送给单片机。当然只是简单的一个命令实现。...(response){ return response.json(); } //开启按钮触发函数 function buttonclk1(){ fetch("http://127.0.0.1...(data){ console.log("请求成功，JSON解析后的响应数据为:",data); }) .catch(function(err){...console.log("Fetch错误:"+err); }); } //关闭按钮触发函数 function buttonclk0(){ fetch("http....then(function(data){ console.log("请求成功，JSON解析后的响应数据为:",data); }) .catch(function

1.2K3 0

AJAX使用说明书

当文件框发生了输入变化时，使用AJAX技术向服务器发送一个请求，然后服务器会把查询到的结果响应给浏览器，最后再把后端返回的结果展示出来。整个过程中页面没有刷新，只是刷新页面中的局部位置而已！...json：返回JSON数据。　　jsonp:JSON格式。使用JSONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”...该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象（可选）。...data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataTYpe参数。函数返回的值将由jQuery进一步处理。...表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件，ajaxStart和ajaxStop可用于控制各种ajax事件。

3.1K7 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭