单击按钮后为 html 页面动态生成的内容

Question

我有一个 html 页面，我想通过单击按钮打开对话框，并且应该动态生成对话框的内容。

思路如下：

1. 我点击按钮
2. JS(ajax)运行我的flask route，执行对其他站点的http请求，然后返回json
3. 返回的json传递给js（或html），然后解析这个json，根据找到的信息，在打开的对话框中显示元素（以图片为例）

Python：

@app.route('/sales_inventory', methods=['POST'])
def tm_inventory(user):
    response = some_function("authKey")
return make_response(jsonify(response)))

HTML：

<button class="inventory">Inventory</button>
<div class="modal">
    <div class="modal-content">
       <span class="close">&times;</span>
    </div>
</div>

元素应该在 div .modal-content 中生成

JS：

$(."inventory").click(function () {
    $.ajax({data: {
        user: $(this).next().text()
    },
    type: 'POST',
    url: '/sales_inventory'
 })

js没有完成，因为不知道应该怎么写

Answer 1

类名和. 应该用字符串引号括起来。在您的代码中，类指示符 . 在字符串引号之外。

根据您的问题，您的服务器正在响应 JSON 数据，因此您应该将 dataType 添加为 AJAX 的 JSON。还添加了一个成功回调函数，当服务器响应时自动调用该函数。成功函数有一个参数data，其中包含作为对象（JSON）的响应数据，现在使用此数据您可以准备HTML并设置在模态的某个位置。

JS：

$(".inventory").click(function () {
    // ^^^^^^^^^^^^
    $.ajax({
        data: {
            user: $(this).next().text()
        },
        dataType: 'JSON',
        type: 'POST',
        url: '/sales_inventory',
        success: function(data) {
            // var prepared_html = using `data`
            // $('.modal-body').html(prepared_html);
        }
    })
})

HTML：

<div class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>

        <div class="modal-body">
            <p>Modal body text goes here.</p>
        </div>
    </div>
</div>