使用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标签时一定要写上其类型！！！

更多推荐

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