使用Ajax接收不到返回值???

flask+layui使用Ajax请求数据不能返回数据(使用Ajax接收不到返回值)


在做一个flask的小项目时页面需要用button按钮请求后台返回数据,于是顺理成章的想到了用layui自带jquery的ajax请求,button代码如下:

<form>
	...
	<div><button class="layui-btn" id="loadData">加载数据</button></div>
	...
</form>

JS请求代码如下:

layui.use(['jquery'], function () {
        var $ = layui.jquery;
        $("#loadData").on('click', function (event) {
            $.ajax({
                type: "POST",
                url: '/getData',
                dataType: 'json',
                success: function (data) {
                    console.log(data);
                }
            });
        })
    })

好了,运行测试一下发现浏览器控制台什么都没有,但是后台控制台的状态码是200,说明请求是正常的,应该就是返回数据出了问题。
点击按钮请求数据
后来又百度了下感觉大家众说纷纭,大部分人都说返回的值进入error属性里面了,然后我又加了个error属性,如下。

layui.use(['jquery'], function () {
        var $ = layui.jquery;
        $("#loadData").on('click', function (event) {
            $.ajax({
                type: "POST",
                url: '/getData',
                dataType: 'json',
                success: function (data) {
                    console.log(data);
                },
                error:function (data) {
                    console.log(data);
                }
            });
        })
    })

后台代码为:

import json
@app.route('/getData', methods=['POST', 'GET'])
def getdata():
	return json.dumps({'msg': '这是一条测试信息', 'data': '这是一条有用的数据。'})

依然没有返回我想要的数据,倒是返回了一大堆没用的数据。后来又按照网上的将dataType类型改为text、去掉dataType等等各种操作都尝试了,还是接收不到数据,最后以为是layui的问题,又将layui去掉,引入jquery但还是不行。最后气的实在没办法了我把所有的跟button无关的标签都删除了,最后代码就剩这么点儿。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button class="layui-btn" id="loadData">加载数据</button>
</body>
<script type="text/javascript" src={{ url_for('static',filename='jquery-3.4.1.min.js') }}></script>
<script type="text/javascript">
    $(function () {
        $("#loadData").on('click',function (event) {
            $.ajax({
                type: "POST",
                url:'/getData',
                dataType:'json',
                success:function(data) {
                    console.log(data);
                }
            });
        })
    })

</script>
</html>

然后一测试居然成功了,居然成功了,居然成功了,有图有真相。
成功返回数据
其实明眼人应该看出来什么问题了,我在上面页面代码中除了有个button标签外我所有代码都省略了唯独外面放了个form标签,问题就出在这个form标签,button按钮放在form标签内就不能接收到数据,放到form标签外就没事,就这么隐蔽的一个错误啊,害得我找了好久!!!可是为什么会这样???后来又上网查了一下,才知道button按钮放在form内要是不写type属性则默认为submit类型但我想要的不是让它提交整个表单啊,因此只需设置属性type='button’即可

<form>
	...
	<div><button type="button" class="layui-btn" id="loadData">加载数据</button></div>
	...
</form>

至于为什么type为submit属性就不能接收数据这个问题我还在研究中(猜测可能原因是如果不设置这个属性点击button按钮则请求了两次后台,第一次应该是请求form中的action,第二次才会请求ajax中的url,然而form中action设置为空,因此页面接收到的数据也为空,可能ajax请求也是接收此次请求返回的数据,因此自然不会接收到第二次请求返回的数据啦)
       这次给了我很大教训,希望大家以后在写代码时一定要养成良好的习惯,在写input标签或者button标签时一定要写上其类型!!!

  • 12
    点赞
  • 6
    评论
  • 14
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值