Python 使用AJAX将信息发布到Flask

我目前正试图将下拉选择中的值发送到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>

---

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

如果有输入错误，

sit1

应该是jsonify函数中的

site1

。图像也是如此，

img1

应该是

image1

---

jsonified dictionary中的键必须与js中使用的键匹配。

表单上的submit方法不会触发submit处理程序，解决此问题的方法是将ajax请求绑定到select的更改事件

$(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);
        });
      });
});

在此处选择新闻网站
有线电视新闻网
全国广播公司
福克斯

检查开发人员工具中的“网络”选项卡，查看您得到的响应。AJAX似乎没有发布到烧瓶中。我修复了输入错误，但仍然没有收到响应。服务器收到请求了吗？没有。服务器似乎没有收到post请求。也许它没有提交值？是的，它不是。您正在发送另一个GET请求。这与flask无关，而是一个jquery/js问题。表单未提交，因为它在

标记中没有

method=“POST”

。在表单上，我是否应该将帖子指向“#”，这样可以解决问题

$(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>