Laravel 5.3 Ajax show vew

Question

У меня проблема с Ajax, и я не знаю, как с этим бороться. У меня есть контроллер, который получает ответ от внешнего API. В этом контроллере передаются переменные в запрос API. Результат переходит к представлению. В этом представлении у меня есть выпадающий список с валютой. Я хочу, когда пользователь выбирает другую валюту, новый запрос будет отправляться в API и генерировать новое представление.

Ниже приводится файл и код.

web.php

Route::get('/home', 'HomeController@nbp'); 
Route::post('/home','HomeController@nbp'); 

HomeController.php

public function nbp(Request $request) 
     { 
       $data = $request->all(); 


      if($request->ajax() && $request->isMethod('post')){ 

       $data = response()->json($data); 
       $data = $data->getContent(); 
       $data = json_decode($data, true); 
       $currency = $data['currency']; 
       Debugbar::info($currency); 

      }else{ 
       $currency = 'EUR'; 
      } 

      $tabeA = 'a'; 

// Create a client with a base URI 
       $client = new GuzzleHttpClient(['base_uri' => 'http://api.nbp.pl/api/'],['headers'=>['content-type'=> 'application/json']]); 



       // Send a request 
       $response = $client->request('GET', 'exchangerates/rates/'.$tableA.'/'.$currency); 

       $response->getStatusCode(); 
       // 200 
       //$contentType = $response->getReasonPhrase(); 
       // 'application/json; charset=utf8' 
       $currency = json_decode($response->getBody()); 

       $data = $currency->rates; 
       $data2 = $data[0]->mid; 

     if($request->ajax() && $request->isMethod('post')){ 
      return view('home',compact('currency'))->render(); 
      }else{ 
    return view('home',compact('currency')); 
      } 

       } 

script.js

$('#currencyNameA').change(function() { 
    $.ajax({ 
    type:'post', 
    dataType: 'json', 
    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}, 
    url: '/home', 
     data: { currency : $('#currencyNameA').val()}, 
    success: function(data){ 


    }, 
    complete: function(data){ 


    } 
    }); 
}); 

Запрос на API должен быть http://api.nbp.pl/api/ $ стол/$ валюта

Пример: http://api.nbp.pl/api/a/USD

Answer 1

Выполните следующие действия:

Возвращение JSON из контроллера, если вы делаете AJAX вызов:

$currency = json_decode($response->getBody()); 

       $data = $currency->rates; 
       $data2 = $data[0]->mid; 

     if($request->ajax() && $request->isMethod('post')){ 
      return response()->json(["currency"=>$currency]); 
      }else{ 
    return view('home',compact('currency')); 
      } 

на выходе функции успеха данных на странице

success: function(data){ 
    $('body').append(data.currency.rates[0].mid);//change the body element with your element 
    }, 

Answer 2

VIEW

@extends('layouts.app') @section('content') 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-8 col-md-offset-2"> 
       <div class="panel panel-default"> 
        <div class="panel-heading">Currency</div> 
        <div class="panel-body"> 
        {!! Form::open(array('url' => '/currency','method' =>'post')) !!} 
         {!! csrf_field() !!} 
         <select name="currency" id="currencyNameA"> 
          @foreach($currency_table_A->rates as $rows) 
           <option value="{{ $rows->code }}">{{ $rows->currency }}</option> 
          @endforeach 
         </select> 
        {!! Form::close() !!} 
        <br /> 
        <h2> 
         <div class="currency" id="ajax_currency">currency {{$currency->currency}} {{ $currency->rates[0]->mid}} last update was {{ $currency->rates[0]->effectiveDate }}</div> 
        </h2> 
       </div> 
       </div> 
      </div> 
     </div> 
    </div> 
@endsection 

Контроллер

public function nbp(Request $request){ 
    if($request->ajax() && $request->isMethod('post')){ 
     $cur = $request->input('currency'); //get currency from post 
     //Debugbar::info($cur); 
    }else{ 
     $cur = 'EUR'; 
    } 
    $tabeA = 'a'; 

    // Create a client with a base URI 
    $client = new GuzzleHttpClient(['base_uri' => 'http://api.nbp.pl/api/'],['headers'=>['content-type'=> 'application/json']]); 
    // Send a request 
    $response = $client->request('GET', 'exchangerates/rates/'.$tableA.'/'.$cur); 

    $response->getStatusCode(); 
    // 200 
    //$contentType = $response->getReasonPhrase(); 
    // 'application/json; charset=utf8' 
    $currency = json_decode($response->getBody()); 

    $data = $currency->rates; 
    $data2 = $data[0]->mid; 

    if($request->ajax() && $request->isMethod('post')){ 
     return response()->json(['currency' => $data, 'mid' => $data2, 'updated' => $currency->rates[0]->effectiveDate]); 
    }else{ 
     return view('home', compact('currency')); 
    } 
} 

JS

$('#currencyNameA').change(function() { 
    $.ajax({ 
    type:'post', 
    dataType: 'json', 
    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}, 
    url: '/home', 
    data: { currency : $('#currencyNameA').val()}, 
    success: function(data){ 
     $('#ajax_currency').html('currency '+data.currency+' '+data.mid+' last update was '+data.updated); 
    }, 
    complete: function(data){ 
     //ajax complete 
    } 
    }); 
}); 

Когда пользователь загружает страницу (не Ajax) вид будет оказывать все Уру данных, что и compact

Когда пользователь запускает выберите изменить будет сделан ajax-вызов, и вы получите данные json (array), и эти данные вы заполните внутри div под названием ajax_currency (где вы эхо y наши данные с обычного посещения страницы) надеюсь, что теперь он чист.

Таким образом, вы не пересматриваете представление, которое вы просто изменяете его частью через JS.

Answer 3

ОК, возможно, еще раз, потому что мы, вероятно, неправильно понимаем.

У меня есть мнение:

@extends('layouts.app') @section('content') 
<div class="container"> 
    <div class="row"> 
     <div class="col-md-8 col-md-offset-2"> 
      <div class="panel panel-default"> 
       <div class="panel-heading">Currency</div> 

       <div class="panel-body"> 

       {!! Form::open(array('url' => '/currency','method' =>'post')) !!} 
       {!! csrf_field() !!} 
       <select name="currency" id="currencyNameA"> 
       @foreach($currency_table_A->rates as $rows) 

       <option value="{{ $rows->code }}">{{ $rows->currency }}</option> 

       @endforeach 
       </select> 
       {!! Form::close() !!} 

        <br /> 

       <h2><div class="currency"> 
       currency {{$currency->currency}} {{ $currency->rates[0]->mid}} last update was {{ $currency->rates[0]->effectiveDate }} 
       </div> 
       </h2> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
@endsection 

и контроллер:

public function getCurrency(Request $request) 
    {  

      $client = new GuzzleHttpClient(['base_uri' => 'http://api.nbp.pl/api/'],['headers'=>['content-type'=> 
'application/json']]); 

      //Table for dropdown list Begin 
      $table_response = $client->request('GET','exchangerates/tables/a'); 
      $currency_table_A = json_decode($table_response->getBody()); 
      $currency_table_A = $currency_table_A[0]; 
      //Table for dropdown list End 

     if($request->ajax() && $request->isMethod('post')){ 
      $cur = $request->input('currency'); //get currency from post 
     }else{ 
      $cur = 'EUR'; 
     } 

    // Send a request to External API 
    $response = $client->request('GET', 'exchangerates/rates/a/'.$cur); 

    //Antwser from External API 
    $currency = json_decode($response->getBody()); 


    if($request->ajax() && $request->isMethod('post')){ 
     //In Debug bar i get reply form API but my View is not change 
     Debugbar::info($currency); 
     return response()->json(view('curentCurrency', compact('currency','currency_table_A'))->render()); 
    }else{ 
     return view('curentCurrency', compact('currency','currency_table_A')); 
    } 
    } 

script.js

$('#currencyNameA').change(function() { 
    $.ajax({ 
    type:'post', 
    dataType: 'json', 
    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}, 
    url: '/currency', 
     data: { currency : $('#currencyNameA').val()}, 
    success: function(data){ 
    } 
    }); 
}); 

Мне нужно передать новый ответ на View, когда было выбрать новая валюта в списке.Когда страница загружается в первый раз, мне нужно получить базовое значение в долларах США, когда кто-то меняет из выпадающего списка, результат валюты должен измениться для этого пользователя.