如何在Laravel上使用Ajax？

问题描述：

I made a JavaScript code to process my request search request using Ajax. So thus, my code is defined as the following:

if(document.getElementById('category')){
    document.getElementById('category').addEventListener('click', () => {
        var query = document.getElementById('category').value;
        if(query !== ''){
            var httpRequest = new XMLHttpRequest();
            httpRequest.open('GET', "http://127.0.0.1:8000/category/fetch");
            httpRequest.send();
            console.log(httpRequest);
        }
    });
}

where my category is from my form:

<div class="col s12 m8 l8">
    <input type="text" name="category" value="{{old('category') ?? $book->category ? $book->category->name : ''}}" class="input-field validate" id="category">
    <input type="hidden" name="category_id" value="{{ $book->category ? $book->category->id : ''}}">
</div>

and my get request refers to my function:

public function fetch(Request $request){
    dd("You hit me: ".$request);
    $category = Category::where('name', 'like', $request['category'])->first();
    return response()->json($category);
}

but back to my JavaScript, Why my get request is not hitting my fetch function? while doing it manually on browser it gives me the result and also my console is giving me this kind of result:

response: "<script> Sfdump = window.Sfdump || (function (doc)"

like the image below.

我编写了JavaScript代码来使用Ajax处理我的请求搜索请求。因此，我的代码定义如下： p>

  if（document.getElementById（'category'））{
     document.getElementById（'category'）。addEventListener（'click'，（）=> {
         var query = document.getElementById（'category'）。value;
         if（query！==''）{
             var httpRequest = new XMLHttpRequest（）;
             httpRequest.open（'GET'，“ http://127.0.0.1:8000/category/fetch”）;
             httpRequest.send（）;
             console.log（httpRequest）;
         }
     }）;
 }
  code>  pre>

 我的类别 code>来自我的表单： p>

 
  
      category？$ book-> category-> name：``}}” class =“ input- 字段验证” id =“ category”>
      category？$ book-> category-> id：``}}”>
  div>
  code>  pre>

 我的get请求引用了我的函数： p>

 
 公共函数fetch（Request $ request）{
     dd（“ You hit me：”。$ request）;
     $ category = Category :: where（'name'，'like'，$ request ['category']）-> first（）;
     返回response（）-> json（$ category）;
 }
  code>  pre>

 但是回到我的JavaScript，为什么我的get请求没有命中获取函数？ 在浏览器上手动进行操作时，它会给我结果 strong>，而且我的控制台也给我这样的结果： p>

 
 响应：“

答

Great question!

To provide a little bit of context, Laravel is built in part off of Symfony, another PHP framework, and shares a lot of packages. One such package is called var-dumper, and it's what enables the dd helper function in Laravel.

Take a look at this sample, taken straight from the dd helper package:

//...
<script>
Sfdump = window.Sfdump || (function (doc) {
//...

Source

Look familiar? If you viewed the source of the page that you're saying works manually in the browser, you'll see the exact same code. Turns out what you're seeing in your AJAX request is correct after all -- it's just raw HTML content that hasn't been transformed by the browser.

If you want to output non-dd content (as in, not marked up with script tags and other fancy-ness), try using PHP's built-in die('Your message') method (only for debugging!) or just stick to Laravel's built in response()->json methods.

Hope that helps!

如何在Laravel上使用Ajax？

相关推荐