jQuery Ajax 前端和后端数据交互的问题
原理:前端与后端的数据交互,最常用的就是GET、POST,比较常用的用法是:提交表单数据到后端,后端返回json
- 前端的数据发送与接收
1)提交表单数据
2)提交JSON数据 - 后端的数据接收与响应
1)接收GET请求数据
2)接收POST请求数据
3)响应请求
1、提交表单数据
1)GET请求
1 var data = { 2 "name": "test", 3 "age": 1 4 }; 5 $.ajax({ 6 type: 'GET', 7 url: /your/url/, 8 data: data, // 最终会被转化为查询字符串跟在url后面: /your/url/?name=test&age=1 9 dataType: 'json', // 注意:这里是指希望服务端返回json格式的数据 10 success: function(data) { // 这里的data就是json格式的数据 11 }, 12 error: function(xhr, type) { 13 } 14 });
2)POST请求
1 var data = {} 2 // 如果页面并没有表单,只是input框,请求也只是发送这些值,那么可以直接获取放到data中 3 data['name'] = $('#name').val() 4 5 // 如果页面有表单,那么可以利用jquery的serialize()方法获取表单的全部数据 6 data = $('#form1').serialize(); 7 8 $.ajax({ 9 type: 'POST', 10 url: /your/url/, 11 data: data, 12 dataType: 'json', // 注意:这里是指希望服务端返回json格式的数据 13 success: function(data) { // 这里的data就是json格式的数据 14 }, 15 error: function(xhr, type) { 16 } 17 });
A)参数dataType:期望的服务器响应的数据类型,可以是null, xml, script, json
B)请求头中的Content-Tpye默认是
Content-Type:application/x-www-form-urlencoded
,所以参数会被编码为 name=xx&age=1 这种格式,提交到后端,后端会当作表单数据处理
另外,不转为字符串,即使加了content-type的参数,也默认会转成 name=xx&age=1,使后端无法获取正确的json
1 // POST一个json数据 2 3 var data = { 4 “name”: "test", 5 "age", 1 6 } 7 $.ajax({ 8 type: 'POST', 9 url: /your/url/, 10 data: JSON.stringify(data), // 转化为字符串 11 contentType: 'application/json; charset=UTF-8', 12 dataType: 'json', // 注意:这里是指希望服务端返回json格式的数据 13 success: function(data) { // 这里的data就是json格式的数据 14 }, 15 error: function(xhr, type) { 16 } 17 });
3、前端向后端传数据的方法
1)通过url路径传递参数
1 var id = 5; 2 boolean flag = false; 3 4 /**重点:ajax只需要type和url属性*/ 5 $.ajax({ 6 async: false, 7 cache: false, 8 type: 'POST', 9 url: 'area/delete/' + flag + '/' + id, //(1)请求的action路径,可以传递参数到后台 10 error: function() { 11 alert('请求失败 '); 12 }, 13 success: function(data) { 14 alert(data); 15 } 16 });
2)通过Ajax.data属性
1 var postData = { //(2)传递参数到后台,注意后台接收方式 2 "param1": "param1", 3 "areaId": 2, 4 "deleteId": 3, 5 "ids": "254,249,248" 6 /**重点:ajax的type,url,dataType,data属性*/ 7 $.ajax({ 8 async: false, 9 cache: false, 10 type: 'POST', 11 url: 'area/delete', 12 dataType: "json", 13 data: postData, 14 error: function() { 15 alert('请求失败 '); 16 }, 17 success: function(data) { 18 alert(data); 19 } 20 21 });
3)通过Ajax.data属性传递多个参数
1 //第一步:定义json格式数据 2 var postData = { 3 "param1": "param1", 4 "areaId": 2, 5 "deleteId": 3 6 }; 7 /**ajax的type,url,dataType,contentType,data属性*/ 8 $.ajax({ 9 async: false, 10 cache: false, 11 type: 'POST', 12 url: 'area/delete', 13 dataType: "json", 14 contentType: 'application/json', //第二步:定义格式 15 data: JSON.stringify(postData), //第二步;把json转为String传递给后台 16 error: function() { 17 alert('请求失败 '); 18 }, 19 success: function(data) { 20 alert(data); 21 } 22 });
转载于:https://www.cnblogs.com/miny-simp/p/9554612.html
jQuery Ajax 前端和后端数据交互的问题相关推荐
- ajax实现前后端数据交互
ajax实现前后端数据交互 1.在做项目的时候,或多或少都会用到ajax来实现前后端数据的交互,接下来我们就看一个简单的实例吧. 实例效果: 点击按钮,发送异步请求,请求后端的数据,显示在网页上. 接 ...
- python的前端和后端_python前端和后端数据交互,tornado框架入门,初学小试牛刀!...
Python前端和后端是如何交互的,怎么用tornado框架快速搭建前端和后端数据交互? 前端与后端的数据交互,最常用的就是GET.POST,比较常用的用法是:提交表单数据到后端,后端返回json 前 ...
- java后端与前端的交互_前端和后端数据交互的基本知识和常见方式
一.首先了解前端,后端,数据三者的关系. 1.前端常常是是html,css,js三者的构成的页面的总称.运行在客户端.以浏览器为例. 2.后端常常是后端语言.比如php,java等写的一些脚本.来操作 ...
- 前端和后端 数据交互的基本知识
一.首先了解前端.后端.数据三者的关系 1) 前端通常是html,css,js三者构成的页面的总称.运行在客户端.以浏览器为例. 2) 后端是指后端程序.比如java,php等编写的一些服务.用来操作 ...
- 前后端分离模式下前端与后端数据交互
下面举的例子就是使用jQuery Ajax和Python Flask进行前后端交互时,前端提交表单数据到后端,后端返回JSON数据给前端. 前端GET提交表单数据: # GET请求var data = ...
- ajax请求php保存数据格式,jQuery ajax与php进行数据交互(数据格式问题)
近期涉及到 jquery 开发,因此对jQuery做了一些初步的学习,jquery功能相对比较强大些,尤其是对ajax支持,jquery ajax与服务器交互,这种搭配使得"局部刷新,异步更 ...
- 前后端数据交互——ajax(原生及jquery)
目录 前后端数据交互--ajax 1. 介绍 2.原生ajax用法 3.jquery的ajax 4.ajax原理说明 前后端数据交互--ajax 1. 介绍 1.1 定义 Ajax(Asynchron ...
- Ajax 前端后端数据交互
Ajax 前端/后端数据交互 一 概述 同步: 一请求一响应,全局刷新 异步: 多请求多响应,局部刷新 (默认为异步,效率高) 场景: 浏览网页时,未全局刷新,能更新数据的页面基本都使用了 ...
- 前后端数据交互——ajax技术
在实际开发过程中,前端页面通常需要根据后台数据实现动态生成和实时更新,因此如何实现前后端数据交互成了开发过程中的难题. 现将使用ajax技术解决前后端数据的交互: (1)ajax技术介绍: ajax一 ...
- ajax连接前后端原理,前后端数据交互方法和原理
前后端数据交互方法和原理 发布时间:2018-10-28 11:25, 浏览次数:742 对于想要搞web的新手而言,会用html+css+javascript实现一个页面没什么太大的困难,但是想要前 ...
最新文章
- str.split() 与 str.split(‘ ‘)区别
- 世界最大的多语言语音数据集现已开源!超40万小时,共23种语言
- Django系列教程:三、动态视图和动态Url
- 如何理解java反射_怎么理解java反射
- IPSEC的NAT兼容性
- php error docref,PHP错误报告级别
- 安装telnet_Flask干货:Memcached缓存系统——Memcached的安装
- 计算机基础,你知道蓝屏的原因吗
- main的方法是Java_Java中的main()方法
- 如何把密度函数化为标准正态二维分布_概率微课:第三章(22) 二维随机变量及分布函数定义...
- UVA583 UVALive5406 Prime Factors【素数因子+筛选法】
- 可用子网数要不要减2_子网数、主机数与子网掩码的关系
- windows server 2016 DC重置用户密码报错
- 晶晨线刷工具_Amlogic_USB_Burning_Tool _刷机工具分享
- 启动不了 驱动程序签字功能,bios关闭驱动数字签名 如何在bios禁用驱动程序签名,装系统,启动行为那个无效?...
- 50年的追踪拍摄:社会阶级能被逾越吗?
- springCloud报错No instances available
- 项目管理练习1577628224
- C#爬虫爬取京东自营笔记本
- AI产业快速落地难?破局人来了