Question

我目前正在尝试将下拉选项中的值发送到Flask以更新html，但Flask似乎没有发送有效的json响应。这是html和ajax的部分

$(function() {
      $("form").on("submit", function(event){
        event.preventDefault()
        $.ajax({
          data: {
            box1 : $("#box1").val()
          },
          type:"POST",
          url : "/process"
        })
        .done(function(data){
          $("#site1").attr("href",data.site1);
          $("#image1").attr("src", data.image1);
        });
      });
    });

<form >
      <div class="control">
        <div class="select">
          <select class="is-hovered" id="box1" onchange="this.form.submit()">
            <option>Select News Sites here</option>
            <option value="cnn">CNN</option>
            <option value="nbc">NBC</option>
            <option value="fox">Fox</option>
          </select>
        </div></div></form>

这就是我在Flask上的内容

@app.route("/process", methods=['POST'])
def homepage_process():
    box1 = request.form['box1']
    cnnimg1 = "static/screenshot/{}".format(cnn_screenshot[-1])
    nbcimg1 = "static/screenshot/{}".format(nbc_screenshot[-1])
    foximg1 = "static/screenshot/{}".format(fox_screenshot[-1])
    cnnimg2 = "static/screenshot/{}".format(cnn_screenshot[-4])
    nbcimg2 = "static/screenshot/{}".format(nbc_screenshot[-4])
    foximg2 = "static/screenshot/{}".format(fox_screenshot[-4])
    if str(box1) == 'cnn':
        img1=cnnimg1
        site1= "http://cnn.com/"
    elif str(box1) == 'nbc':
        img1=nbcimg1
        site1= "http://nbcnews.com/"
    elif str(box1) == 'fox':
        img1=foximg1
        site1= "http://foxnews.com/"
    return jsonify({'img1':img1,'sit1':site1})

如果有人能指出我正确的方向来解决这个问题，我将不胜感激。

Answer 1

您的jsonify函数中输入错误sit1应为site1。同样适用于图片，img1应为image1。

jsonified dictionairy中的键必须与你在js中使用的键匹配。

Answer 2

表单上的submit方法不会触发提交处理程序，解决这个问题的方法是将ajax请求绑定到select的change事件。

$(function() {
      $("#box1").on("change", function(event){
        $.ajax({
          data: {
            box1 : $("#box1").val()
          },
          type:"POST",
          url : "/process"
        })
        .done(function(data){
          $("#site1").attr("href",data.site1);
          $("#image1").attr("src", data.image1);
        });
      });
});

<form >
      <div class="control">
        <div class="select">
          <select class="is-hovered" id="box1">
            <option>Select News Sites here</option>
            <option value="cnn">CNN</option>
            <option value="nbc">NBC</option>
            <option value="fox">Fox</option>
          </select>
        </div>
      </div>
</form>

使用AJAX将信息发布到Flask

2 个答案: