求助:利用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方法都没有执行

#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: