通过提交不包含当前页面 refreshing/redirecting 的表单 python 来保存数据

Question

有人能帮帮我吗？？我想使用 Python 和 jQuery 找到一种无需刷新当前页面即可提交表单的方法。在同一页面中，我有两个 forms.I 使用 WTForms 创建了一个表单。问题是如何在不刷新页面的情况下将数据保存在第一个表单上，这意味着字段不应为空。我尝试使用下面的代码，但它保存了第一个表单中的数据，但它 returns 为空字段。

$('#target').click(function() {
    $('#return').html("Patient is registered")

 });

  $('#target').click(function(){                      
      $('#forma_patient').submit();
  });

第一种形式是这样的：

<form action=" {{ url_for('malingnant_disease.save_patient') }}" method="post" id="patient_form" class="form-horizontal patient">
        <div>
          <div>
            <div class="form-group">
                {{ form.name.label(class_="control-label col-xs-4") }}
                <div class="col-xs-4">
                  {{ form.name(class_="form-control") }}
                </div>
              </div>
             <div class="form-group">
                {{form.surname.label(class_="control-label col-xs-4") }}
                <div class="col-xs-4">
                  {{ form.surname(class_="form-control") }}
                </div>
              </div>
              <div class="form-group">
                {{ form.id.label(class_="control-label col-xs-4") }}
                <div class="col-xs-4">
                  {{ form.id(class_="form-control") }}
                </div>
              </div>
              </div>
              <br />
              <div id="return_answer" \>
              <br/>
              <div align="center">
                <button type="submit" id="target" class="btn btn-primary">Save Patient</button>

第二个定义了一些字段...

<form action=" {{ url_for('malingnant_disease.save_diagnosis') }}" method="post" id="diagnosis_form" class="form-horizontal diagnosis">
            <div>
              <div>
                  <!-- some fields  ....-->
               </div> 
                  <div align="center">
                    <button type="submit" class="btn btn-primary">Save diagnosis</button>

在视图页面上，我有定义保存这些数据的路径：

@mod_malignant_disease.route('/save', methods=['POST','GET'])
def save_patient():
    malignant_disease = MalignantDiseaseForm(request.form)
    malingnant_disease_data = malignant_disease.data
    doc_id = utils.get_doc_id() 

    json_obj = {}
    json_obj = {
        'patient': {
            'name': malingnant_disease_data['name'],
            'surname': malingnant_disease_data['surname'],
            'id': malingnant_disease_data['id'] 
            }
            };
    mongo.db.malignantdisease.update(
        {'_id': doc_id},
        {'$set': json_obj},
        True
    )
    return redirect(url_for('malingnant_disease.malingnant_disease_page'))

Answer 1

您需要使用 ajax 发送 post 而无需重新加载页面。您可以为此使用 jquery 的 post and serialize 助手。而不是 $('#forma_patient').submit(); 使用类似的东西：

$.post( "/save", $('#patient_form').serialize(), function() {
    alert( "success" );
});

Answer 2

你需要使用 Ajax。例如简单的代码。检查用户名和密码不刷新页面并获得 backbone 结果并查看当前页面。

javascriptt

var EXAMPLES = {};

EXAMPLES.checkUsernamePasswordAjax = function (usernameid, passwordid, idresultlabel) {

    var xhr = new XMLHttpRequest();
    var username = document.getElementById(usernameid);
    var password = document.getElementById(passwordid);
    var result_label = document.getElementById(idresultlabel);
    if (username && password) {
        xhr.open('get', '/checker?username=' + username.value + "&password=" + password.value, true);
        xhr.send(null);
        xhr.onreadystatechange = function () {
            if ((xhr.readyState == 4) && (xhr.status == 200)) {
                var result = JSON.parse(xhr.responseText);
                result_label.innerHTML = result.answer;
            }
        };
    }
};

index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="{{ url_for('static', filename="js/exampleJS.js") }}" type="text/javascript"></script>
</head>
<body>
<form method="post" action="#" onchange="EXAMPLES.checkUsernamePasswordAjax('iduser', 'idpass');">
    Username: {{ form.username(id="iduser") }} <br/>
    Password: {{ form.password(id="idpass") }}
    <hr/>
    <strong>Result validation: </strong> <label id="idresult"></label>
{#    <input type="submit" value="Check"/>#}
</form>

python/flask

@app.route('/checker/', methods=['get'])
@app.route('/checker/<username>', methods=['get'])
def login(username=None):    
    username, password = request.args['username'], request.args['password']    
    if username == "hacker" and password == "hacked":        
        return redirect(url_for('.hacker_page'))
    return jsonify({'answer': 'False'})


@app.route('/hacked')
def hacker_page():
    return jsonify({"answer": "<strong> <h2> hacked page </h2> </strong>"})


@app.route('/')
def root(api=None):
    form = SimpleForm(request.form)
    return render_template('index.html', form=form)

好好享受吧，伙计:)

通过提交不包含当前页面 refreshing/redirecting 的表单 python 来保存数据

Save data by submiting a form without refreshing/redirecting of the current page python

javascript

python

forms

jquery

wtforms