我正在嘗試使用 ajax 從資料庫中獲取資料。它作業正常。但是,我無法列印帶空格的完整字串。只有第一個單詞被列印出來。
下面是示例 JSON 回應的樣子
0:
description: "photographs of the couple before marriage as well as coverage of the wedding and reception"
id: 8
price: 6000
title: "Wedding Shoot"
這是ajax的樣子
$(document).ready(function(){
fetchtask();
function fetchtask() {
$.ajax({
type: "GET",
url: "/admin/home/services",
dataType: 'json',
success: function(response) {
console.log(response.service)
$.each(response.service, function(key, service) {
$('tbody').append('<tr>\
<form action="/admin/services/ ' service.id ' method="POST">\
@csrf\
<td><label for="service"></label><input readOnly name = "service" id="service" type="text" value= ' service.title ' readonly></td>\
<td><label for="price"></label><input readOnly name="price" id="price" type="number" value=' service.price ' readonly></td>\
<td><label for="description"></label><input readOnly type="text" name="description" id="" value=' service.description '></td>\
<td><button class="btn btn-warning" onclick="edit()">Edit</button></td>\
<td><button class="btn btn-info" onclick="save()">Save</button></td>\
<td><a href="/admin/services/"' service.id '><button class="btn btn-success" name="action"value="Update">Update</button></a></td>\
</form>\
</tr>'
);
});
},
error: function(error) {
alert('No Bookings Found')
}
});
}
});
uj5u.com熱心網友回復:
這不是一個好方法。您應該按節點而不是字串創建表,然后應用這些值。或者甚至在某個隱藏的地方預渲染它并在 ajax 請求之后顯示它。
但是如果你想要那樣的話,你會缺少引號,例如:
<td><label for="description"></label><input readOnly type="text" name="description" id="" value=' service.description '></td>
應該:
<td><label for="description"></label><input readOnly type="text" name="description" id="" value="' service.description '"></td>
ETC...
請注意,如果您的回復包含引號,您將收到語法錯誤。
uj5u.com熱心網友回復:
問題是因為您需要將屬性值括在引號中,以便空格包含在值中,并且不分隔每個屬性:
$('tbody').append('<tr>\
<form action="/admin/services/ ' service.id ' method="POST">\
@csrf\
<td><label for="service"></label><input readOnly name="service" id="service" type="text" value="' service.title '" readonly></td>\
<td><label for="price"></label><input readOnly name="price" id="price" type="number" value="' service.price '" readonly></td>\
<td><label for="description"></label><input readOnly type="text" name="description" id="" value="' service.description '"></td>\
<td><button onclick="edit()">Edit</button></td>\
<td><button onclick="save()">Save</button></td>\
<td><a href="/admin/services/' service.id '"><button name="action"value="Update">Update</button></a></td>\
</form>\
</tr>');
或者,您可以使用模板文字而不是字串來格式化您附加的 HTML。這是您可以避免\在每個換行符之前放置并洗掉連接運算子的需要:
$('tbody').append(`<tr>
<form action="/admin/services/${service.id}" method="POST">
@csrf
<td><label for="service"></label><input readOnly name="service" id="service" type="text" value="${service.title}" readonly></td>
<td><label for="price"></label><input readOnly name="price" id="price" type="number" value="${service.price}" readonly></td>
<td><label for="description"></label><input readOnly type="text" name="description" id="" value="${service.description}"></td>
<td><button onclick="edit()">Edit</button></td>
<td><button onclick="save()">Save</button></td>
<td><a href="/admin/services/${service.id}"><button name="action"value="Update">Update</button></a></td>
</form>
</tr>`);
最后,請注意您在此處創建的 HTML 無效 - 您不能將form元素 a 放置為 a 的子元素tr。此外,onclick應該洗掉屬性,而是在動態內容上使用委托的事件處理程式。
轉載請註明出處,本文鏈接:https://www.uj5u.com/qukuanlian/495399.html
標籤:jQuery 阿贾克斯 拉拉维尔 laravel-刀片
上一篇:c 如何在執行緒終止后洗掉執行緒
