时间戳

首页 > 解决方案 > 如何使用 Ajax 从烧瓶中检索数据而不刷新页面

javascript - 如何使用 Ajax 从烧瓶中检索数据而不刷新页面

问题描述

在我的 html 中，我想向服务器端提交一个表单。但是，服务器端（flask）接收到这个数据后，我想让html页面取回数据，并通过没有JQuery的Ajax显示出来

我花了一整天的时间请帮助我。这是我的数据：

  <div class="login-container">
    <form action="/" method="POST" name='form1'>
      <table class="form-table">
          <tr>
            <td><span class="title-name">name:<span id="start">*</span>:&nbsp;</span>
              <input id="name" type="text" name="name" required></td>
          </tr>

          <tr>
            <td>
              <button class="button" type="reset" name="clear" for="form1">Clear</button>
              <button class="button" type="submit" name="submit" for="form1" onclick="submitForm()">Search</button>
            </td>               
          </tr>  
  </form>
  </div>
  </div>

我的js：

function submitForm(){
    //checkInput(); 
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        console.log(this.status);
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("bottom").innerHTML=xmlhttp.responseText;
      }
    };
    xhttp.open("POST", "/res", true);
    xhttp.send();   
}

我的烧瓶

from flask import Flask,send_file
from flask import request,jsonify

app = Flask(__name__)
req_dict=None
req_json=None

@app.route('/',methods=['GET','POST'])
def index():
    return send_file('index.html')



@app.route('/res',methods=['GET','POST'])
def success():
    if(request.method=='POST'):
        req_dict=dict(request.form)
        req_json=jsonify(req_dict)

    return req_json

数据流为：前端 > 服务器端 > ajax > 前端。

标签： javascripthtmlajaxflask

解决方案

要防止事件（例如submit）使用其默认行为，请使用：Event.preventDefault()。这允许您在提交表单时创建自己的行为。

此外，不是click在提交按钮上监听 a，而是submit在表单元素上监听。那是您要控制的元素。

尝试使用addEventListener而不是内联属性来监听事件。它将使您的代码更清洁，更易于维护和使用内联属性，例如onclick被认为是过时的做法。

<form id="form-one" action="/" method="POST" name='form1'>
  <table class="form-table">
    <tr>
      <td>
        <label for="name" class="title-name">name:<span id="start">*</span>:&nbsp;</label>
        <input id="name" type="text" name="name" required></td>
    </tr>
    <tr>
      <td>
        <button class="button" type="reset" name="clear" for="form1">Clear</button>
        <button class="button" type="submit" name="submit" for="form1">Search</button>
      </td>
    </tr>
  </table>
</form>

我注意到回调中的xhttp变量中有错字。onreadystatechange而不是xhttp，您使用xmlhttp. 纠正它。

var formOne = document.getElementById('form-one');

function submitForm(event){
    event.preventDefault(); // Prevent default submit behavior.
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        console.log(this.status);
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("bottom").innerHTML = xhttp.responseText;
      }
    };
    xhttp.open("POST", "/res", true);
    xhttp.send();   
}

formOne.addEventListener('submit', submitForm);

推荐阅读