前后端交互实现(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天,加油肝!(最近的梗:说到前端我就佛了,说到佛我就不得不想起当年孙悟空大闹天空,提到佛我就不得不提起明年年初的中美合拍,文体两开花。)

 

猜你喜欢

转载自www.cnblogs.com/qq946487854/p/10163372.html