Flask 的 Ajax 问题

Question

在过去的几天里，我一直在尝试通过 ajax 调用来使用 Flask。无论我尝试什么都不起作用。所以我将直接进入我的代码：

Python 代码：

 @app.route("/num")
 def num():
     return render_template('num.html')

 @app.route('/add_num', methods=['POST'])
 def add_num():
    a = request.form['a']
    b = request.form['b']
    a = int(a)
    b = int(b)
    print(a)
    if a and b:
      c = a + b 
      return jsonify(result = c)
    return jsonify({'error' : 'Missing Data'})

HTML 代码

  <form>
     <input id='a' type="text" size="5" name="a"/> +
     <input id='b' type="text" size="5" name="b"/> =
     <br>
     <br>
     <button>Add It!</button>
  </form>

  <h1 id='result'>Result</h1>

Ajax 代码：

     <script type="text/javascript">
       $(document).ready(function(){
          $('form').bind('submit', function(event){
            $.ajax({
               data: {
                  a: $('#a').val(),
                  b: $('#b').val()
               },
               type: 'POST',
               url: '/add_num',
               dataType: 'json',
               data: JSON.stringify(json),
               contentType: 'application/json;charset=UTF-8'
           })
            .done(function(data){
              if (data.error){
                $('#result').text(data.error).show();
              }else{
                $('#result').text(data.result).show();
              }
           });
        event.preventDefault();
        });
       });
      </script>

当我点击提交按钮时，没有任何反应。我会在 URL 中看到这个： http://127.0.0.1:5000/num?a=2&b=3 此外，有一次我添加了数字，但被带到了显示 JSON 信息的单独页面。为了实现这一点，我的表单的第一行是这样的：

    <form action='add_num' method="post" role='form'>

现在我尝试使用不同格式的 ajax，它在我的代码中运行良好。但是，我想尝试这种方法，因为我更喜欢它。我相当确定解决方案很简单，但我无法找到它。任何帮助都会很棒！

这就是它最终为我工作的原因：

`  $(document).ready(function(){
     $('form').bind('submit', function(event){
        event.preventDefault();
           $.ajax({
               data: {
                  a: $('#a').val(),
                  b: $('#b').val()
           },
            type: 'POST',
            url: '/add_num',
            success: function(data){
            $('#result').text(data.result).show();
        }
     });
   });
  });`

Answer 1

将 event.preventDefault() 移到您的 ajax 调用上方。如果您在参数字符串中看到a 和b，则表示表单正在执行其默认操作。

编辑：可能是您传递给$.ajax 的对象中有两个data 键，而在第二个data 键上您调用JSON.stringify 的变量似乎不存在作为参数存在。