求助：利用ajax提交表单数据后响应OK，但就是不执行success函数

HelloFlask Flask Web 开发实战
1

利用ajax提交表单数据后响应OK，但就是不执行success函数，数据类型都是正确的，error也没有执行

  1. 想实现的功能是：通过表单在当前页面/index提交内容，不刷新页面，直接将文本显示在页面下方

2.利用ajax，点击表单提交，连接URL /commit_content，返回json格式数据。然后success中处理json数据，生成新元素添加到原页面/index上。

3.源代码

  • app.py
@app.route('/index')
def index():
    return render_template('index.html')

@app.route('/submit_content', methods=['POST'])
def commit():
    content =  request.form
    return jsonify(html=render_template('temp.html', content=content))
  • index.html
<form id="ajax-content" method="post" action="/submit_content">
    <div class="field">
        <label for="message">Message:</label>
        <textarea id="message" name="message" required></textarea>
    </div>

    <div class="field">
        <button type="submit">Send</button>
    </div>
</form>

<div id="form-messages">
<h3>内容在这里</h3>
</div>
  • temp.html
<table class="table">
    <tr>
        <th>内容</th>
        <td>{{ content.message}}</td>
    </tr>
</table>
  • scripts.js
$(document).ready(function() {
    $('button').click(function() {
        var messages = $('#form-messages');
        var form = $('#ajax-content');
        $.ajax({
            url: form.attr('action'),
            data: $('form').serialize(),
            type: 'POST',
            dataType: 'json',
            success: function(data) {
                messages.append(data.html);
            },
            error: function(error) {
                console.log(error);
            }
        });
})
  1. 运行时，点击提交，浏览器的URL总是从当前/index直接变成另一个路由对应的/submit_content，直接显示返回的json数据，ajax的success和error方法都没有执行
2

从你第四点的描述来看，submit有两个click函数，一个是表单提交post到/submit_content，第二个是你定义的ajax函数。如果你在浏览器上查看submit元素的绑定函数的话，应该可以看得到，而且aja函数顺序一定在后。
因此你点击submit时，先触发post表单，再触发ajax，但是post触发后，直接响应到commit视图函数，直接返回了json数据了，这应该就是为什么只返回给你json数据，却不经过ajax函数。
我的设想是，表单和ajax二者留其一。我的话会删除表单，只留下div，在ajax中手动定义data的内容，以json格式发送到/submit_content内，用原生request接受数据，返回json数据给ajax。
小白轻喷，错了请轻喷。。。:rofl: