什么's在javascript回调函数中使用blade的解决方案

what's the solution for using blade in javascript callback functions?

本文关键字：blade 解决方案 函数 回调 javascript 什么      更新时间：2023-09-26

我有一个AJAX查询到服务器，服务器会返回一些数据，然后在回调函数中，我将有一个resultStr放在目标<div>中。resultStr将针对对象的长度进行迭代，并对我需要显示的所有数据进行迭代。关键是，如果将JavaScript移动到资产中的一个单独文件中，则Blade不会解析语法，因此数据不会显示。有人说：把变量放在PHP视图中，然后在JavaScript中设置它们。这并不好，因为例如CSRF令牌在源的视图中变得可见。此外，它根本不适用于对数据进行迭代。假设在我看来，我传递了一些数据，比如：

'items' => $items

然后我需要在AJAX调用之后用所有的$items填充页面。回调函数中的resultStr类似于：

"foreach ($items as $i)" +
"<option value='"{{ $item->id }}'">{{ ($item->name) }}</option>"

由于Blade没有解析结果字符串，它根本不起作用，而且我不能在PHP部分声明这些变量（$items和$i）。这毫无意义，如果我努力做到，我得到的只是undefined variable。

那么，让Blade解析resultStr并将JavaScript放在单独的文件中的解决方案是什么呢？

在回复后更新，在这里我试图将脚本与从外部文件加载的结果字符串分离，但结果不好。

jQuery(function ($) {
    $(document).ready(function () {
        var form = $('form');
        form.submit(function (e) {
            e.preventDefault();
            $.ajax({
                url: form.prop('action'),
                type: 'post',
                dataType: 'json',
                data: form.serialize(),
                success: function (data) {
                    var obj = (data);
                    var results = "";
                    var filler;
                    $.ajax('js/blade/filler.blade.php', {
                        dataType: 'text',
                        success: function (data) {
                            filler = data;
                            for (var i = 0; i < obj.length; i++) {
                                results = results + filler;
                                $("#results").html(results);
                            }
                        }
                    });
                }
            })
        });
    });
});

正如@MartinBean所说，你不能在Javascript上解析blade，因为它是php，你不能直接通过Javascript执行php，它是一种服务器端语言。

一种方法可以是对具有以下内容的视图执行ajax请求：

<?php
echo json_encode($items);

然后，在ajax函数中，您可以使用以下内容：

var form = $('form');
var display_div = $('#display_div');
form.submit(function (e) {
    e.preventDefault();
    $.ajax({
        url: form.attr( 'action' ), // <form action="site.com/some-view">
        data: form.serialize(),
        type: 'post'
    }).done(function (data) {
        var parsed_data = $.parseJSON(data);
        $.each(parsed_data,function(key,value)
        {
           display_div.append('<option value="'+key+'">'+value+'</option>');
        });
    });
});

如果可能的话，我建议您执行ajax请求中的所有逻辑，以便在一个请求中获得所有内容。

添加到问题中：我将所有变量的生成和内容移到了控制器中。现在，当我提交表单时，所有需要的数据都会传递给对象中的jquery，然后用于生成resultStr。错误是将一些变量传递到表单页面，然后在提交后尝试使用这些变量。

相关文章：