Question

我在Flask工作并且已经使用javascript阻止了默认设置，以便通过AJAX请求发送我需要的所有数据。现在的问题是我的视图包含所有数据（我已通过控制台输出确认）但前端不会使用传递的数据进行更新。它之前工作，但添加这个JavaScript函数打破了应用程序。它也不允许警报闪烁消息像在无效表单上一样显示。有什么想法吗？

$(document).ready(function(){
  // get old values
  var old_num_components = $("input[name='number_components']:checked").val();
  var old_method = $("#method_select").val();
  // get new values
  var new_num_components;
  var new_method;
  var data = {'new_num_components':'none','old_num_components':'none', 'new_method':'none','old_method':'none'};
  // var data = {};

  $("#submit_form_button").click(function(e){
    e.preventDefault();
    new_num_components= $("input[name='number_components']:checked").val();
    data.new_num_components = new_num_components;
    data.old_num_components = old_num_components;
    old_num_components=new_num_components;

    new_method= $("#method_select").val();
    //alert(old_method + " : " + new_method);
    data.new_method = new_method;
    data.old_method = old_method;
    old_method=new_method;

    console.log(data);
    $.ajax({
      type:"POST",
      url:"{{url_for('similar')}}",
      data:$("#main_form").serialize()+"&"+$.param(data)
    });
  });
});

编辑：我已经尝试在ajax调用本身中重新加载窗口

success: function(msg){window.location.reload(true);}

Answer 1

将额外信息添加为隐藏输入并正常提交表单：

e.preventDefault();

var form = document.querySelector('#main-form');

Object.entries(data).forEach(function(key, value) {
  let input = document.createElement('input');
  input.name = key;
  input.value = value;
  input.type = 'hidden';
  form.append(input);
});

form.submit();

防止默认发送AJAX表单数据不更新前端？

1 个答案: