使用Ajax/jQuery渲染带空格字符串时仅显示首个单词的问题

核心问题是拼接HTML字符串时，所有<input>的value属性值没有用双引号包裹。按照HTML解析规则，未加引号的属性值遇到空格就会判定为结束，剩余内容会被识别为元素的无关自定义属性。
比如你的title值是Wedding Shoot，原代码拼接后生成的标签为：

<input readOnly name = "service" id="service" type="text" value= Wedding Shoot readonly>

浏览器会把Wedding识别为value的属性值，Shoot识别为input的独立布尔属性，最终输入框只显示第一个单词。

除此之外原代码还有4处会导致功能异常的错误：

• form标签的action属性拼接时引号闭合位置错误，提交地址会异常
• a标签的href属性拼接时引号位置错误，跳转链接会失效
• 直接在JS拼接的字符串里写@csrf无法被Blade模板引擎解析，POST请求会报419跨站请求伪造错误
• form标签直接嵌套在tr标签下不符合HTML DOM规范，浏览器会自动重构DOM结构导致表单提交失效

1. 所有动态绑定的属性值，统一用双引号包裹，从根源避免空格截断内容
2. 修正action、href属性的引号拼接位置
3. 提前在页面meta标签中存储CSRF令牌，JS中读取后拼接隐藏域传参，不要直接在JS字符串中写@csrf
4. 调整form标签嵌套位置，避免不符合DOM规范的写法
5. 推荐用ES6模板字符串（反引号包裹）替代原有的单引号加反斜杠换行的写法，降低引号拼接出错的概率

首先在Blade模板的head区域添加CSRF meta标签：

<meta name="csrf-token" content="{{ csrf_token() }}">

然后替换Ajax中的HTML拼接逻辑，修正后的完整JS代码如下：

$(document).ready(function(){
    fetchtask();
    function fetchtask() {
        const csrfToken = $('meta[name="csrf-token"]').attr('content');
        $.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>
                        <td>
                            <form action="/admin/services/${service.id}" method="POST">
                                <input type="hidden" name="_token" value="${csrfToken}">
                                <label for="service"></label>
                                <input readOnly name="service" id="service" type="text" value="${service.title}" readonly>
                            </form>
                        </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" 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>
                    </tr>`);
                });
            },
            error: function(error) {
                alert('No Bookings Found')
            }
        });
    }
});

如果需要兼容不支持ES6模板字符串的极低版本浏览器，可以换回单引号拼接，只要保证所有动态插入的属性值都被双引号包裹即可。

内容的提问来源于stack exchange，提问作者Faaiz Aslam