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

表单

#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方法都没有执行