Question

我有一个小popbox窗口，用户应该使用它来向另一个用户发送消息。单击发送按钮后，我将数据发送到我的烧瓶应用程序中的views.py. 在那一点上，我希望popbox关闭，没有别的。相反，发生的事情是我在我的网站上打印

{ “data”：null }

我的ajax命令是

<script type='text/javascript'>
  $(".send_recommend").click(function() {
      var data = $("form").serialize(); 
      $.ajax({
          url: "/send_recommend",
          type: "GET",
          async: true,
          cache: false,
          contentType: "application/json; charset=utf-8",
          data: { send_dummy_id: document.getElementById("send_dummy_id").value, data: data }, 
      });
  });
</script>

并且烧瓶部分看起来像

@app.route('/send_recommend', methods=['GET', 'POST'])
def send_recommend():

    if request.method == 'GET':
        ret_data = {"data": request.args.get('data')}
        #do something here
        return jsonify(ret_data)

html看起来像

          <div class='popbox' style="display: inline">

              <button class="btn btn-primary open" href="#" data-id="{{ data['arxiv_id'] }}" role="button"><span class="glyphicon glyphicon-share"></span>Recommend this paper</button>

              <div class='collapse_popbox'>
                  <div class='box'>
                      <div class='arrow'></div>
                      <div class='arrow-border'></div>

                      <form action="/send_recommend" method="GET" style="padding:10px;" align="right">

                          <p>
                              {{ form.From(size=30, readonly=true) }}
                          </p>

                          <p>
                              {{ form.To(size=30, placeholder='To') }}
                          </p>
                          <p>
                              {{ form.message(rows=3, cols=29, placeholder='Message') }}
                          </p>

                          <button class="btn btn-primary send_recommend">Send</button>
                          <button class="btn btn-default close1">Dismiss</button>
                          <input id="send_dummy_id" name="send_dummy_id" value="" type=hidden>

                      </form>
                  </div>
              </div>
          </div>

基本上我的问题是如何防止ajax在网站上发布任何反馈？我使用了ajax，因为我不想在提交表单后重新加载网站。也许ajax是错误的工具？谢谢 FL

Answer 1

防止点击项目的默认行为，如下所示：

<script type='text/javascript'>
  $(".send_recommend").click(function(evt) {
      evt.stopPropagation();
      evt.preventDefault();
      var data = $("form").serialize(); 
      $.ajax({
          url: "/send_recommend",
          type: "GET",
          async: true,
          cache: false,
          contentType: "application/json; charset=utf-8",
          data: { send_dummy_id: document.getElementById("send_dummy_id").value, data: data }, 
      });
  });
</script>

Answer 2

$(".send_recommend").click(function(е) {

e.preventDefault(); 

...

});

或只是使用return false;

结束该功能

Answer 3

只需从return jsonify(ret_data)路线中删除send_recommend()行即可。

@app.route('/send_recommend', methods=['GET', 'POST'])
def send_recommend():

    if request.method == 'GET':
        ret_data = {"data": request.args.get('data')}
        #do something here

因为您要将JSON数据返回给模板。

提交ajax表格后留在页面上

3 个答案: