Fatal编程技术网
  • javascript/
  • Javascript 提交按钮在基于jquery ajax的网页上不起作用

Javascript 提交按钮在基于jquery ajax的网页上不起作用

javascript html jquery ajax flask

Javascript 提交按钮在基于jquery ajax的网页上不起作用,javascript,html,jquery,ajax,flask,Javascript,Html,Jquery,Ajax,Flask,我试图从我的搜索页面中获取所有插入的值，并将其提供给我正在构建的flask应用程序。虽然我的网页中的所有按钮和功能都像.add、.remove、.main\u search那样工作，但提交按钮不会执行任何操作。以下是代码的基础： {% extends "layout.html" %} {% block content %} <head> <script src="https://ajax.googleapis.com/ajax/libs/

我试图从我的搜索页面中获取所有插入的值，并将其提供给我正在构建的flask应用程序。虽然我的网页中的所有按钮和功能都像.add、.remove、.main\u search那样工作，但提交按钮不会执行任何操作。以下是代码的基础：

{% extends "layout.html" %}
{% block content %}
 <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body>
    <br />
    <div class="container">
      <h4 align="center">Select Main Category</h4>
      <br />
<!--        id="contact-form"-->
      <form method="POST" id="insert_form" action="/search2">
          <div class="about-center section-center">
          <div class="btn-container">
              <div class="col-sm-5">
              <button class="btn btn-info main_search" name="main_search" id = "s_r" data-id="s_r">S_R</button>
              <button class="btn btn-info main_search" name="main_search" id = "c_h" data-id="c_h">C_H</button>
               </div>
          </div>
          </div>
        <div class="table-repsonsive">
          <table class="table table-bordered" id="item_table">
            <thead>
              <tr>
                <th>Category</th>
                <th>Conjunction</th>
                <th>Enter Item Name</th>
                <th><button type="button" name="add" class="btn btn-success btn-xs add"><span class="glyphicon glyphicon-plus"></span></button></th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
          <div align="center">
<!--              <button class="btn btn-info" id="contact-form-button" type="submit">submit</button>-->
            <input type="submit" name="submit_all_form" id="contact-form-button" class="btn btn-info submit" value="Insert" />
          </div>
            <span id="error"></span>
        </div>
      </form>
    </div>
<!--    </section>-->
  </body>
<script>
$(document).ready(function()
{
    var main_search_type = '';
    var count = 0;
    $(document).on('click', '.main_search', function ()
    {
        if (count == 0)
        {
            main_search_type = $(this).data("id");
        }
        else
        {
            if ($(this).data("id") != main_search_type)
            {
                main_search_type = $(this).data("id");
                $('#item_table tbody').empty();
                count = 0;
            }
            else
            {
                main_search_type = $(this).data("id");
            }
        }
    });


    $(document).on('click', '.add', function () {
        var all = '';
        var conjArray = ["And", "Or"];
        count++;
        var html = '';
        html += '<tr>';
        if (main_search_type == "s_r") {
            html +=
                '<td><select name="search_option_summary"' + count + 'id="summary_option" class="form-control">' +
                '<option selected="selected" value="phylum">Phylum</option>' +
                '<option value="genus">Genus</option>' +
                '</select></td>'
        } else if (main_search_type == "c_h") {
            html +=
                '<td><select name="search_option_c"' + count + 'id="c_option" class="form-control">' +
                '<option selected="selected" value="c_type">c type</option>' +
                '<option value="genus">Genus</option>' +
                '</select></td>'
        } else {
            html += '<td><select name="item_category[]" class="form-control item_category" data-sub_category_id="' + count + '' +
                '"><option value="">Select Category</option><?php echo fill_select_box($connect, "0"); ?></select></td>';
        }
        html +=
            '<td><select name="conj_option"' + count + 'id="conj_option" class="form-control">' +
            '<option selected="selected" value="and">And</option>' +
            '<option value="or">Or</option>' +
            '</select></td>';

        html += '<td><input type="text" name="item_name[]" ' + count + 'class="form-control item_name"  placeholder=' + main_search_type + '  ></td>';

        html += '<td><button type="button" name="remove" class="btn btn-danger btn-xs remove"><span class="glyphicon glyphicon-minus"></span></button></td>';
        $('tbody').append(html);
    });

    $(document).on('click', '.remove', function () {
        $(this).closest('tr').remove();
        count--;
    });
  $('#insert_form').on('submit', function(event)
  {
    event.preventDefault();
    var form = $('#insert_form');
    var form_data = $(this).serialize();
             $.ajax
        ({
            url: form.prop('action'),
            type: form.prop('method'),
            data: form_data,
            success:function(data)
        {
         $('#error').html('<div class="alert alert-danger">'+url+'</div>');
        }
        })

     return true;
      });
});

</script>

{% endblock content %}

{%extends“layout.html”%}
{%block content%}


选择主要类别


苏尔
C_H
类别
结合
输入项目名称
$（文档）.ready（函数（）
{
var main_search_type=''；
var计数=0；
$（文档）。在（'单击'，'上。主搜索'，函数（）
{
如果（计数=0）
{
main_search_type=$（this）.data（“id”）；
}
其他的
{
if（$（this）.data（“id”）！=主搜索类型）
{
main_search_type=$（this）.data（“id”）；
$（'#item_table tbody'）。空（）；
计数=0；
}
其他的
{
main_search_type=$（this）.data（“id”）；
}
}
});
$（文档）.on（'click'，'add'，函数（）{
var all=''；
变量数组=[“和”，“或”]；
计数++；
var html=''；
html+=''；
如果（主搜索类型==“s\U r”）{
html+=
'' +
“门”+
“属”+
''
}else if（主搜索类型==“c\U h”）{
html+=
'' +
‘c型’+
“属”+
''
}否则{
html+=“选择类别”；
}
html+=
'' +
“还有”+
“或者”+
'';
html+=''；
html+=''；
$（'tbody'）.append（html）；
});
$（文档）.on（'单击'，'.remove'，函数（）{
$（this）.closest（'tr'）.remove（）；
计数--；
});
$（“#插入表格”）。在（'submit'，函数（事件）
{
event.preventDefault（）；
变量形式=$（'插入形式'）；
var form_data=$（this）.serialize（）；
$.ajax
({
url:form.prop（'action'），
类型：form.prop（'method'），
数据：表格数据，
成功：功能（数据）
{
$（'#error'）.html（''+url+''）；
}
})
返回true；
});
});
{%endblock内容%}
我正在尝试使用add按钮将输入框添加到html中，以构建带有连接词的查询，然后将所有表单数据提供给sqlalchemy db以实现高效查询。

未定义变量
form
（如
form.prop（'action'）
）。您可以使用
访问表单元素。此
将序列化表单数据存储在
表单数据中，但在
$.ajax（）中使用
表单.data
。而且
表单
本身似乎没有在任何地方定义，因此您试图使用一个不存在的变量谢谢您的帮助。我修复了前面提到的变量问题，但当按下按钮时，flask应用程序仍然不接受任何内容。我正在通过request.form检查请求方法是否为POST。到目前为止，这个主要问题还没有解决。谢谢你的帮助。我修复了前面提到的变量问题，但当按下按钮时，flask应用程序仍然不接受任何内容。我正在通过request.form检查请求方法是否为POST。到目前为止，这个主要问题还没有解决。它对我来说似乎很好。检查浏览器开发工具（F12）的
网络
-选项卡，查看url和标题是否正确。当我检查控制台时，它会显示“UncaughtTypeError:$。ajax不是一个函数”。也许是我的jquery脚本出了什么问题？是的，在我的布局模板中，我使用了一个不包含ajax的精简版jquery。打扰了我好几天。。。