前后端交互实现(nginx,json,以及datatable的问题相关)
1.同源问题解决
首先,在同一个域下搭建网络域名访问,需要nginx软件,下载之后修改部分配置


然后再终端下cmd nginx.exe命令,或者打开nginx.exe文件,会运行nginx一闪而过,在后台运行而且一次是打开两个的,可以在任务管理器控制结束进程,
接下来,你就可以打开8080接口给同域下其他主机访问你的端口。
2.关于ajax使用json进行前后端的post问题
刚开始,因为后端和数据库的交互,传回的data默认写出fields,然后前端我写的ajax格式里的data也想写成fields,结果发现失败,好像不太行,还有一开始以为键值对失效,以为一定要一一对应,后面改了差不多一天,跑了很久,然后问师兄,才知道是json数据格式错误,因为我们一开始以为传递的json数据是列表格式,列表里放字典,结果并不是!!!,json里应该放的是字典!!!
格式大概如下:
{
url: "/staff/add/",
status: 200,
responseText: {
'code': 'ok',
'message': 'sfasdfasdfasd',
'data': [{
'submit_status': 1,
'name': 'five',
'pk': 'icon five'
},
{
'submit_status': 2,
'name': 'six',
'pk': 'real six'
},
{
'submit_status': 1,
'name': 'two',
'pk': 'two B'
}
],
'errorMsg': '彩笔'
}
}
所以非常的苦逼,因为中间出现的是什么jquery的length未定义问题和crsf的跨域问题,纠结半天都发现改的不是真正的问题,后面结合师兄和网上的解决办法,才知道要把后端的json数据格式确定成字典格式。
3.还有就是datatable的问题,我又很傻逼的把同一个table给datatable了两遍,结果会发现程序并没有出错,但是会datatable格式后面那个table程序,导致前面的datatable格式失效掉,很TM难受,然后,我想再重新普及一下datatable的格式
l - Length changing 改变每页显示多少条数据的控件
f - Filtering input 即时搜索框控件
t - The Table 表格本身
i - Information 表格相关信息控件
p - Pagination 分页控件
r - pRocessing 加载等待显示信息
比如说
"dom": '<"top"i>rt<"bottom"flp><"clear">'
表示,上方有表格信息显示,然后中间是表格,下面是搜索框,条数控制框,和分页控件,
然后,你也可以通过
'info':'true', 信息控件
"paging": 'true', 分页控件
"lengthChange": 'true', 每页显示多少条信息
来改变datatable显示格式
4.还有一个是上传文件时出现的错误,由于前后端对于文件名没有同步的错误,导致了后端把数据传过来,但是前端接受了但是没有接受想要的东西的错误,

之前是formFile.append('excel',fileObj)导致传给后端的是fileFile对象里的excel对象,但是我们后端写接受的时候写的是data,所以出现了错误,不过修改了之后,再在下面加多一句var result=JSON.parse(result)解析result之后,前后端交互成功!!!
前端实习第8天,加油肝!(最近的梗:说到前端我就佛了,说到佛我就不得不想起当年孙悟空大闹天空,提到佛我就不得不提起明年年初的中美合拍,文体两开花。)
前后端交互实现(nginx,json,以及datatable的问题相关)的更多相关文章
- ajax学习----json,前后端交互,ajax
json <script> var obj = {"name": "xiaopo","age": 18,"gender ...
- Node之简单的前后端交互
node是前端必学的一门技能,我们都知道node是用的js做后端,在学习node之前我们有必要明白node是如何实现前后端交互的. 这里写了一个简单的通过原生ajax与node实现的一个交互,刚刚学n ...
- Django之META与前后端交互
Django之META与前后端交互 1 提交表单之GET 前端提交数据与发送 1)提交表单数据 2)提交JSON数据 后端的数据接收与响应 1)接收GET请求数据 2)接收POST请求数据 3)响应请 ...
- 百度ueditor的图片上传,前后端交互使用
百度ueditor的使用 一个文本编辑器,看了网上很多文档写的很乱,这里拾人牙慧,整理下怎么使用. 这个东西如果不涉及到图片附件上传,其实很简单,就是几个前端文件,直接引用,然后配置下ueditor. ...
- 【开源.NET】 轻量级内容管理框架Grissom.CMS(第二篇前后端交互数据结构分析)
这是 CMS 框架系列文章的第二篇,第一篇开源了该框架的代码和简要介绍了框架的目的.作用和思想,这篇主要解析如何把sql 转成标准 xml 配置文件和把前端post的增删改数据规范成方便后台解析的结构 ...
- thinkphp+jquery+ajax前后端交互注册验证
thinkphp+jquery+ajax前后端交互注册验证,界面如下 register.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
- 微信小程序 + thinkjs + mongoDB 实现简单的前后端交互
说明:这段时间跟老师学习了一下mongodb数据库,这次也是第一次搭建后台服务,出了不少差错,特此来复盘一下,非常感谢对我提供帮助的同学~ 一.使用 thinkjs + mongodb 创建后台服务 ...
- content-type常见类型辨析(以ajax与springmvc前后端交互为例)
博客搬家: content-type常见类型辨析(以ajax与springmvc前后端交互为例) 在http报文的首部中,有一个字段Content-type,表示请求体(entity body)中的数 ...
- web前后端交互,nodejs
手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元 web前后端交互 前后端交互可以采用混合 ...
随机推荐
- 一个简单IP防刷工具类, x秒内最多允许y次单ip操作
IP防刷,也就是在短时间内有大量相同ip的请求,可能是恶意的,也可能是超出业务范围的.总之,我们需要杜绝短时间内大量请求的问题,怎么处理? 其实这个问题,真的是太常见和太简单了,但是真正来做的时候,可 ...
- 《关于长沙.NET技术社区未来发展规划》问卷调查结果公布
那些开发者们对于社区的美好期待 2月,长沙.net 技术社区自从把群拉起来开始,做了一次比较正式.题目为<关于长沙.NET技术社区未来发展规划>的问卷调查,在问卷调查中,溪源写道: 随着互 ...
- HTTP请求定义不同Content-Type及在SpringMVC如何接收(必看!!!)
前言最近在和三方对接的时候发现了一些问题,这也是我写这篇文章的原因.我大概花了三天时间把这些内容了解,实践,整理,然后分享给大家,希望对大家会有所帮助.废话不多说,在和三方对接的时候我们规定使用jso ...
- Http协议状态码总结
一.http方法 方法名 说明 get 发送一个获取请求,服务器的响应会包含head与body部分 post 发送一个输入数据的请求,服务器的响应会包含head与body部分 head 服务器响应的只 ...
- HTML基础知识点
HTML 1.一套规则,浏览器认识的规则. 2.开发者: 学习Html规则 开发后台程序: - 写Html文件(充当模板的作用) **** ...
- 《深入理解Java虚拟机》-----第2章 Java内存区域与内存溢出异常
2.1 概述 对于从事C.C++程序开发的开发人员来说,在内存管理领域,他们即是拥有最高权力的皇帝又是执行最基础工作的劳动人民——拥有每一个对象的“所有权”,又担负着每一个对象生命开始到终结的维护责任 ...
- WebAssembly完全入门——了解wasm的前世今身
前言 接触WebAssembly之后,在google上看了很多资料.感觉对WebAssembly的使用.介绍.意义都说的比较模糊和笼统.感觉看了之后收获没有达到预期,要么是文章中的例子自己去实操不能成 ...
- Chapter 5 Blood Type——16
"Okay, guys, I want you all to take one piece from each box," he said as he produced a pai ...
- .Net Core扩展 SharpPlugs简单上手
SharpPlugs .Net Core 鋒利扩展,这是本人的开源项目 地址是 GitHub地址 大家喜欢 的话可以加个星哦 当前功能 DI AutoMapper ElasticSearch WebA ...
- 探索Windows命令行系列(4):通过命令操作文件和文件夹
1.文件夹操作 1.1.DIR(directory)命令 1.2.TREE 命令 1.3.CD(change directory)命令 1.4.MD(make directory)命令 1.5.RD( ...