时间戳

首页 > 解决方案 > 根据烧瓶动态显示甜蜜警报

javascript - 根据烧瓶动态显示甜蜜警报

问题描述

所以我有一个表格，我可以从中检查数据是否存在于 mysql 表中。如果是这样，并且用户已选中该复选框，则相同表单的数据将用于数据库中的另一个表。这是相关的烧瓶代码：

@app.route('/result', methods=['GET', 'POST'])
def my_index():
    if request.method == 'POST':
        forms = vendorForm()
        vN = history.query.filter_by(id=forms.vendorName.data).first()
        vC = history.query.filter_by(id=forms.vendorCompany.data).first()
        sN = history.query.filter_by(id=forms.sopName.data).first()
        sV = history.query.filter_by(id=forms.sopVer.data).first()

        sopVer = sV.sopVer
        sopName = sN.sopName
        vendorCompany = vC.vendorCompany
        venActivity = request.form.get('venActivity')
        vendorName = vN.vendorName
        cursor = mysql.connection.cursor()
        print(venActivity, vendorCompany, vendorName, )
        cursor.execute("select sopVer,sopName,vendorName,vendorCompany from history where sopVer='"+str(sopVer)+"' and sopName='"+sopName+"' and vendorName='"+vendorName+"' and vendorCompany='"+vendorCompany+"'")
        r = cursor.fetchone()
        mysql.connection.commit()
        if r== None:
            print("There are no results to this query!")
        else:
            print(r)
            if venActivity == "Yes":
                print("yes")
                sql = "INSERT INTO activity (vendorCompany, vendorName, assocName, activityDate) VALUES (%s, %s, %s, %s)"
                val = (vendorCompany, vendorName, user, "2008-7-04")
                cursor.execute(sql, val)
                mysql.connection.commit()
                cursor.close()
        
        return ('', 204)

还有我的html文件：

<!doctype html>  
<html>
<head>
    <title>Vendor Details</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/new.css">
  
</head>
<body>
<section class="check_vendor">
    <h1 class="title">Check Vendor Details</h1>

    <div class="container">
        <form action="/result" method="POST" class="vendorForm row">
           {{ form.csrf_token }}
           <div class="form-field col-lg-6">
           <label htmlFor="vendorCompany", class="label">Vendor Company</label>
           {{ form.vendorCompany(class="input-text") }}
            </div>

            <div class="form-field col-lg-6">
           <label htmlFor="vendorName", class="label">Vendor Name</label>
           {{ form.vendorName(placeholder='Vendor Name', class="input-text") }}
           </div>

           <div class="form-field col-lg-6">
           <label htmlFor="sopName", class="label">SOP Number</label>
           {{ form.sopName(placeholder='Enter SOP Number', class="input-text") }}
           </div>

           <div class="form-field col-lg-6">
           <label htmlFor="sopVer", class="label">SOP Version</label>
           {{ form.sopVer(placeholder='Enter SOP Version', class="input-text") }}
           </div>

           <div class="box">
           <input type="checkbox" id="venActivity" name="venActivity" value="Yes">
            <span class="check"></span>
            <label for="venActivity"> Do you want to capture the activity with this vendor?</label>
            </div>

            <div class="form-field col-lg-12">
              <button type="submit" class="submit-btn" id="submit" onclick="validation()">Check Details</button>
              </div>
            </form>
        </div>
        </section>
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10.12.5/dist/sweetalert2.all.min.js"></script>
        <script>

        function validation()
        {
            swal.fire({
            title:"Vendor Training Valid",
            text:"The Vendor activity has been recorded!",
            icon:"success",
            closeOnConfirm: false
            });
        }

        </script>

    </body>
</html>

一切正常，除了我想根据各种情况显示来自甜蜜警报的消息。

标签： javascriptpythonhtmlflasksweetalert

解决方案

您正在将表单发布到返回 ('', 204) 的 Flask 端点。给这只猫剥皮的方法有很多，但你可以...

  • 使用 Axios 之类的库向端点发出 POST http 请求，然后根据 Flask 结果返回一些 JSON onject。这个 JSON 可以与“消息”一起保存操作是否成功完成。在 HTML 中的 javascript 代码中，您将有一个 if else 取决于返回的内容并相应地发出警报。

或者

  • 您返回类似 render_template(myhtmlfile.html, sweetalert=true, message="my message") 的内容，并且在 myhtmlfile.html 中有一个类似这样的块：
等等等等………… 
{% if sweetalert=true %}
 <body onload="doMyAlerts('{{message}}');">
{% else %}
 <body>
{% endif %}

等等等等…………

...下面的功能...

与 JavaScript 函数一起使用，例如：

   function doMyAlerts(message)
        {
            swal.fire({
            title: message,
            text: message,
            icon:"error",
            closeOnConfirm: false
            });
        }

未经测试，但这将是我的想法，我自己会选择选项一。

推荐阅读