我創建了一個提要頁面，其中應該創建一個新帖子并在用戶的提要中顯示。假設 div 看起來像這樣
在 textarea 中輸入資料，然后單擊 post 按鈕創建下部 div 我已經在 javascript 中完成了此操作，但名稱、影像、所有資料都是由我簡單輸入的，但它應該來自控制器我不能使用我在 HTML 頁面中所做的簡單方法，如何在 javascript 中完成？
<body>
<textarea class="form-control border-0 p-0 fs-xl" rows="4" id="input" placeholder="What's on your mind Codex?..."></textarea>
<button class="btn btn-info shadow-0 ml-auto " id="submit" onclick="addCode()">Post</button>
<div id="add_after_me">
<div class="test " >
</div>
</div>
<script>
$('#submit').click(function () {
var text = $('#input').val();
$('#newDivs').append('<div class="test">' text '</div>');
});
function addCode() {
document.getElementById("add_after_me").insertAdjacentHTML("afterend",
'<div class="card mb-g"> < div class= "card-body pb-0 px-4" ><div class="d-flex flex-row pb-3 pt-2 border-top-0 border-left-0 border-right-0"><div class="d-inline-block align-middle status status-success mr-3"> <span class="profile-image rounded-circle d-block" style="background-image:url(); background-size: cover;"></span> </div> <h5 class="mb-0 flex-1 text-dark fw-500"> Dr. John Cook PhD <small class="m-0 l-h-n">Human Resources & Psychiatry Division</small></h5><span class="text-muted fs-xs opacity-70"> 3 hours </span> </div> <div class="pb-3 pt-2 border-top-0 border-left-0 border-right-0 text-muted " id="newDivs"> </div> </div ></div > ');
}
</script>
</body>
這是我的代碼
uj5u.com熱心網友回復：
我假設您有一個可以接收 POST 資料的控制器，將處理它，然后將使用您希望 Javascript 顯示的所有已處理資料回應 JSON。
我們將在這里使用簡單的 Ajax 和 jQuery。當您提交表單時，我們將首先通過 post 將表單發送到您的控制器，然后我們將假設您的控制器在完成后使用相同的資料回應 json。然后 javascript 會讀取回應的 Json，并更新 DOM。
這是您的代碼：
<body>
<textarea class="form-control border-0 p-0 fs-xl" rows="4" id="input" placeholder="What's on your mind Codex?..."></textarea>
<button class="btn btn-info shadow-0 ml-auto " id="submit" onclick="addCode()">Post</button>
<div id="add_after_me"></div>
<script>
$('#submit').click(function () {
$.post('/your-controller', {
text: $('#input').val()
}, function(data) {
const json = jQuery.parseJSON(data)
addCode(json)
})
});
function addCode(data) {
const addAfterMe = $("#add_after_me")
const template = `
<div class="card mb-g">
<div class= "card-body pb-0 px-4">
<div class="d-flex flex-row pb-3 pt-2 border-top-0 border-left-0 border-right-0">
<div class="d-inline-block align-middle status status-success mr-3">
<span class="profile-image rounded-circle d-block" style="background-image:url('${data.image}'); background-size: cover;"></span>
</div>
<h5 class="mb-0 flex-1 text-dark fw-500">
${data.fullname}
<small class="m-0 l-h-n">${data.department}</small>
</h5>
<span class="text-muted fs-xs opacity-70">
${data.time}
</span>
</div>
<div class="pb-3 pt-2 border-top-0 border-left-0 border-right-0 text-muted" id="newDivs">${data.text}</div>
</div>
</div>`
addAfterMe.append(template)
}
</script>
</body>
為了創建您的“卡片”，我使用“模板文字”javascript 標準。但是請隨意使用您想要的任何策略。
因此，每次您提交表單時，文本都會發送到控制器。假設您的控制器將回應此 JSON：
{
'text': "Lorem Ipsum",
'image': "https://url-to-your-profile-image.com/image.png",
'fullname': 'Dr. John Cook PhD',
'department': 'Human Resources & Psychiatry Division',
'time': '3 hours'
}
瞧 :)
我希望它有幫助！
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/523675.html
上一篇：哪種方法更好地獲取物體的編號？