javascript - 没有刷新的模态表单提交

Question

当我想将新项目添加到仪表板时，会弹出一个模态窗口。我已经让它与 jquery post 一起工作，但是我无法阻止它刷新。我想要做的是在将项目添加到数据库后，显示一条成功消息并在几秒钟后关闭模态窗口并且不刷新页面(模态的父页面)。

这是我的模态

<div class="modal fade" id="add-project-dialog" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&amp;times;</button>
        <h4 class="modal-title" id="myModalLabel">Add a new Project</h4>
        </div>
        <div class="modal-body">
            <h3>New Project:</h3>
            <form class="form-horizontal" id="add-project-form" action="/projects/add" method="POST">
        <fieldset>
        <!-- Text input-->
        <div class="form-group">
          <label class="col-md-4 control-label" for="name">Project Name</label>
          <div class="col-md-4">
          <input id="name" name="name" type="text" placeholder="" class="form-control input-md">

          </div>
        </div>

        <!-- Text input-->
        <div class="form-group">
          <label class="col-md-4 control-label" for="description">Project Description</label>
          <div class="col-md-4">
          <input id="description" name="description" type="text" placeholder="" class="form-control input-md">

          </div>
        </div>

        <!-- Text input-->
        <div class="form-group">
          <label class="col-md-4 control-label" for="project_state">Project State</label>
          <div class="col-md-4">
          <input id="project_state" name="project_state" type="text" placeholder="" class="form-control input-md">

          </div>
        </div>

        </fieldset>
                            <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                <button id="add-btn" class="btn" type="submit">Add</button>
                     </div>

            </form>
        </div>


</div>

这是我的project-dashboard.js

AddProject = function(){
  $(document).ready(function() {
   $("#submit").submit(function(event){
       event.preventDefault();
       $.ajax({
           url: "/projects/add",
           type:"POST",
           data:
           {
            'name': $('#name').val(),
            'description': $('#description').val(),
            'project_state': $('#project_state').val()
           }
           });
        });
   });
 }

我的views.py

class AddProject(webapp2.RedirectHandler):
    def get(self):
    template_values = {
        #'greetings': greetings,
        #'url_linktext': url_linktext,
        }
    path = os.path.join(os.path.dirname(__file__), '../templates/project-add.html')
    self.response.write(template.render(path, template_values))

def post(self):
    project = Project()
    project.name = self.request.get('name')
    project.description = self.request.get('description')
    project.project_state = self.request.get('project_state')
    time.sleep(2)
    project.put()
    self.redirect('/projects')

我曾尝试删除 self.redirect('/projects') 但是这只会将我带到一个空白页面，即 /projects/add(即表单中的操作)。

Answer 1

问题是您在 AddProject 函数中添加了 .ready(foo) 处理程序。我想该文档是在调用 AddProject 时加载的。

另一个问题是，在您的 HTML 中，表单的 ID 为 add-project-form，因此您应该执行 $("#add-project-form")而不是 $("#submit")。

$(document).ready(function () {
   $("#add-project-form").submit(function(event){
       event.preventDefault();
       $.ajax({
           url: "/projects/add",
           type:"POST",
           data:
           {
            'name': $('#name').val(),
            'description': $('#description').val(),
            'project_state': $('#project_state').val()
           }
           });
        });
   });
});

在 AddProject 函数之外使用 ready 处理程序，它应该可以工作(添加了 submit 处理程序)。