如果添加ajax，Laravel Blade 不会加载

Question

当我将以下 ajax 添加到我的 laravel Blade 文件中时，页面停止渲染。 如果删除 ajax 部分，页面渲染效果非常好

<input type="text" name="voucher_no" id="voucher_no" class="form-control">
<input type="text" name="year" id="year" value="{{ date('Y') }}">
<button type="button" id="convertFinal" class="btn btn-success me-1">Convert</button>


<script>
$("#convertFinal").on('click', function() {
    let voucherNo = $("#voucher_no").val();
    let year = $("#year").val();
    checkInvoiceNo(voucherNo, year);
});
function checkInvoiceNo(voucherNo, year) {
    alert("in");
    console.log(voucherNo, year);
    $.ajax({
       type: 'POST',
       url: "{{ vouchername') }}",
       data: {
       '_token': '{{ csrf_token() }}',
       'voucher_no': voucherNo,
       'year': year,
    },
    success: function(data) {
       if (data) {
          $("#form").submit();
       } else {
          validationForm.valid();
          $("#invoiceError").text('Voucher no. Must be unique.');
       }
    }
});
</script>

如果我删除 ajax 部分，则页面呈现、警报和日志都可以正常工作。 如果添加了ajax，则页面不会呈现，也不会在控制台中显示任何错误。

另外，我在这个项目中有多个ajax调用，它们在其他页面上工作正常，但仅在这个页面上引起问题。

Answer 1

问题来了。您的代码当前如下所示：

<script>
$("#convertFinal").on('click', function() {
    let voucherNo = $("#voucher_no").val();
    let year = $("#year").val();
    checkInvoiceNo(voucherNo, year);
});
function checkInvoiceNo(voucherNo, year) {
    alert("in");
    console.log(voucherNo, year);
    $.ajax({
       type: 'POST',
       url: "{{ vouchername') }}",
       data: {
       '_token': '{{ csrf_token() }}',
       'voucher_no': voucherNo,
       'year': year,
    },
    success: function(data) {
       if (data) {
          $("#form").submit();
       } else {
          validationForm.valid();
          $("#invoiceError").text('Voucher no. Must be unique.');
       }
    }
});
</script>

但它需要看起来像这样：

<script>
$("#convertFinal").on('click', function() {
    let voucherNo = $("#voucher_no").val();
    let year = $("#year").val();
    checkInvoiceNo(voucherNo, year);
});

function checkInvoiceNo(voucherNo, year) {
    alert("in");
    console.log(voucherNo, year);
    $.ajax(
        {
           type: 'POST',
           url: "{{ vouchername') }}",
           data: {
           '_token': '{{ csrf_token() }}',
           'voucher_no': voucherNo,
           'year': year,
        },
        success: function(data) {
            if (data) {
                $("#form").submit();
            } else {
                validationForm.valid();
                $("#invoiceError").text('Voucher no. Must be unique.');
            }
        }
    ); // <- remove the extra brace here
} // <- you are missing this final closing brace
</script>

我的猜测是，当你删除

$.ajax

的东西时，你并没有删除最后的

});

，这会正确终止你的函数并默默地丢弃多余的

)

。

但是在当前的形状中，它不会工作，因为你的

checkInvoiceNo

函数没有正确终止。

Answer 2

您的

checkInvoiceNo

函数中存在语法错误。

$.ajax({
   type: 'POST',
   url: "{{ vouchername') }}",
   data: {
   '_token': '{{ csrf_token() }}',
   'voucher_no': voucherNo,
   'year': year,
},

在函数的这一部分中，语法错误位于为 ajax 函数调用提供的参数中的

url

属性处。请注意，在

vouchername

之后有 ')，这可能是复制粘贴错误。删除它 (

')

)，你就可以开始了。