JS的Ajax与后端交互数据的实例
JS中很多地方会使用Ajax与后台进行数据交互。
Ajax是通过http,使得JS与后端进行数据通信,由于Ajax的异步特性,可以使多个Ajax请求同时访问后端,对页面的局部数据进行逻辑处理,并渲染。
ajax中前端和后端的交互图:
代码实现:
$.ajax({ type: "post", url: "http://localhost:8080/ccnb/user/login", data: { "telephone": login_name, "password": login_password }, dataType: "json", // contentType:'application/json', success: function (data) { alert(data.Flag); alert(data.Msg); } }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(XMLHttpRequest.status); alert(XMLHttpRequest.readyState); alert(textStatus); }, });
以上这篇JS的Ajax与后端交互数据的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
jquery的ajax异步请求接收返回json数据实例
jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以. 代码示例如下: 复制代码 代码如下: $('#send').click(function () { $.ajax({ type : "GET", url : "a.php", dataType : "json
-
ajax前台后台跨域请求处理方式
最近一直在搞公众号前台开发,遇到了ajax跨域请求的问题,像地区的省-市-县三级联动.汽车品牌-车系-车款的三级联动查询等都需要调用外部接口(其他工程项目的接口)完成.下面就分享一下个人解决跨域请求的方案,当然是在后台程序猿大哥的帮助下,我才弄明白了其中的渊源,赶紧记录下来慢慢积累,也希望对大家能有所帮助,还请积极提出意见或建议. 跨域请求需要借助后台代码接收callback回调函数,对json数据进行进一步处理:前台再用ajax请求向服务器发送callback参数,并指定数据格式为jsonp.
-
Ajax上传实现根据服务器端返回数据进行js处理的方法
本文实例讲述了Ajax上传实现根据服务器端返回数据进行js处理的方法.分享给大家供大家参考.具体如下: Ajax上传说白了还是使用form表单提交,在当前页面加一个iframe,将提交的内容跳转到iframe中,造成一种页面无刷新的错觉. 以前也做过上传,基本是是使用commons-fileupload组件,基本的步骤是使用servlet处理完上传之后,使用PrintWrite的对象实例输出显示内容,可以是直接输出内容,也可以是输出script进行操作如 复制代码 代码如下: response.
-
ajax请求后台接口数据与返回值处理js的实例讲解
ajax的代码,用的是jquery的 ajax: $.ajax({ url: "/test.php",//后台提供的接口 type: "post", //请求方式是post data:{"type":"1", //这是你要传给后台的data值 "t":"c4552111" }, dataType: "json", //数据类型是json型 success: funct
-
JS的Ajax与后端交互数据的实例
JS中很多地方会使用Ajax与后台进行数据交互. Ajax是通过http,使得JS与后端进行数据通信,由于Ajax的异步特性,可以使多个Ajax请求同时访问后端,对页面的局部数据进行逻辑处理,并渲染. ajax中前端和后端的交互图: 代码实现: $.ajax({ type: "post", url: "http://localhost:8080/ccnb/user/login", data: { "telephone": login_name,
-
前端实现滑动按钮AJAX与后端交互的示例代码
目录 html代码 css代码 效果图 JS事件触发 flask后端接口 参考链接 html代码 <div class="switch-box"> <input id="switchButton" type="checkbox" class="switch" /> <label for="switchButton"></label> </div>
-
vuejs前后端数据交互之从后端请求数据的实例
本文将向大家介绍一种用vue-resource从后端请求数据的方法. 比如说从后端请求一张表过来, (1)首先,在data中return一个msg:[]数组来接收表的数据: (2)在方法中定义一个请求函数,比如我们这里函数名定义为showDetails: methods:{ showDetails:function(){ this.$http.get(baseURL+"api/条件").then(function(res){ this.msg = res.body; }); } } 这
-
原生ajax处理json格式数据的实例代码
原生ajax处理json格式数据代码实例: 由于jQuery的出现,原生ajax使用频率也越来越少,这当然是因为jQuery的便利性多导致的. 但是对于原生ajax实现原理的知晓也是非常重要的,下面就改造本板块的一个使用jquery ajax实现的代码. 代码实例如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&quo
-
php基于jquery的ajax技术传递json数据简单实例
本文实例讲述了php基于jquery的ajax技术传递json数据简单实现方法.分享给大家供大家参考,具体如下: html页面: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="text/javascript" src="jquery-1.8.2.mi
-
Springmvc和ajax如何实现前后端交互
springmvc使用@RequestBody来获取前端的json字符串并转化为java对象 使用@ReponseBody来将返回的java对象转换为json形式返回前端 下面是几个使用springmvc和ajax进行前后端交互的简单实例 1.传递简单对象: 前端: $(function(){ $("#btn3").click(function(){ //准备好要发的数组 var array=[16,18,56]; var jsonArray=JSON.stringify(array)
-
Vue生命周期与后端交互实现流程详解
目录 表单控制 购物车案例 v-model进阶(了解) vue生命周期 与后端交互 电影案例 表单控制 1.input:checkbox(单选,多选),radio(单选) 2.代码展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="j
-
PHP+ajax实现获取新闻数据简单示例
本文实例讲述了PHP+ajax实现获取新闻数据的方法.分享给大家供大家参考,具体如下: Get方式获取到的信息是字符串(responseText) ① 可以借助JSON对象的方法:stringify()和parse()方法,进行字符串和对象之间的转换 var arr=[1,2,3]; var a={left:100}; //alert(JSON.stringify(a));//typeof JSON.stringify(arr)是string //JSON对象的输出有严格格式:'{"left&q
-
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
本文实例讲述了vue.js过滤器+ajax实现事件监听及后台php数据交互.分享给大家供大家参考,具体如下: 在vue.js开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. index.html: <!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title> v
-
详解Vue.js基于$.ajax获取数据并与组件的data绑定
Vue.js与jQuery不冲突??? 在实际的应用中,几乎90%的数据是来源于服务端的,前端和服务端之间的数据交互一般是通过ajax请求来完成的. 说到ajax请求,第一反应肯定想到了jQuery,项目中如果引入jQuery会帮助我们简化很多操作,简化DOM操作,ajax方法获取后端数据等. 然而,Vue.js和jQuery冲突吗??? 答案显然是不冲突!!! 接下来会实现Vue.js组件中使用jQuery的ajax方法获取服务器端数据并绑定至组件的data中. 创建Vue.js单文件组件 <
随机推荐
- 复制数据库表中两个字段数据的SQL语句
- VUE长按事件需求详解
- IOS实现上滑隐藏NvaigtionBar而下拉则显示效果
- JavaScript中闭包的写法和作用详解
- asp.net 实现静态页面累加访问量的三种方式
- python计算书页码的统计数字问题实例
- Python的一些用法分享
- Linux Shell脚本系列教程(四):使用函数添加环境变量
- Java运行时多态性的实现
- 你应该知道PHP浮点数知识
- 表单类各种类型(文本框)失去焦点效果jquery代码
- 超赞的动手创建JavaScript框架的详细教程
- 金山反病毒20050105_日报
- Apache SSL服务器配置SSL详解
- 详解java的四舍五入与保留位示例
- PHP使用feof()函数读文件的方法
- 解析C#设计模式编程中外观模式Facade Pattern的应用
- 基于C++的拼多多算法在线笔试题示例
- 在vscode中配置python环境过程解析
- 浅谈Laravel模板实体转义带来的坑