Question

当我单击编辑按钮时，我想用数据库值填充表单字段。我要填充的表单负责更新日记条目的属性（包括标题和正文）。

当前，当我单击“编辑”按钮时，我得到一个空的编辑表单。因此，如果我想保留条目上的某些现有信息（例如，条目的主体），则在更新条目之前，必须将条目的主体复制到编辑表单中。

我该如何实施呢？

用于更新日记条目的功能

getSocialDataTwitter() {
    return this.http.post<LeftOperatorPaneltwitter>(this.baseUrl + 'api/OperationData/GetAllTweetsByName', searchQuery );

HTML表单

function edit_entry(entry_id){
    // open modal to edit diary entry
    var modal = document.getElementById('edit_modal');

    modal.style.display = "block";

    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    };
    document.getElementById('edit_modal').addEventListener('submit', updateDetail);

    function updateDetail(e){
        e.preventDefault();
        let title = document.getElementById('title').value;
        let body = document.getElementById('body').value;

        var statusCode;

        fetch('http://localhost:5000/api/v1/entries/'+parseInt(entry_id),{
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer ' + window.localStorage.getItem('token')
            },
            body: JSON.stringify({
                "title": title,
                "body": body,
            })    
        })
        .then((result) => {    
            statusCode = result.status;
            return result.json();
        })
        .then((data) =>{    
            window.alert(data.message);
            modal.style.display = "none";
            redirect: window.location.replace('./viewAllEntries.html');    
        });    
    }    
}

Answer 1

打开模式时，只需从API中获取条目的数据即可。尝试类似下面的代码。

$ yourUrlToFetchTheData应该是用于获取所需数据的api路由的网址。

fetch($yourUrlToFetchTheData, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ' + window.localStorage.getItem('token')
        }
    })
    .then((result) => {
        // TODO FILL THE TEXTAREAS WITH THE VALUES OF THE RESULT.
        $("title").text(result.json.title);
        $("body").text(result.json.body);

    })
    .then((data) => {
        // TODO DO SOMETHING WITH THE ERROR.
    });

将此代码放在 modal.style.display =“ block”; 之后，并对其进行一些修改！

单击“编辑”按钮时，如何用数据库值填充HTML表单？

1 个答案: