Как получить опцию выбора HTML в AJAX и перейти на PHP

Question

В раскрывающемся списке я хотел бы прослушать и получить значение параметра, выбранного пользователем.

Затем я хотел бы передать это значение в переменную PHP для использования в более поздней части.PHP-сценария просмотра лезвия.

Я не хочу перезагружать страницу, поэтому из онлайн-поиска я нашел, что ajax - единственный возможный способ.

Я попытался реализовать, как показано нижено попадаешь в ловушку, когда страница загружается при отправке.

Еще лучше, если есть возможность выбрать опцию выбора, чтобы получить выбранное значение без отправки?

Мой HTML-код:

<form id="myForm">
    <div class="button dropdown">
      <select name="languageSelected" required="required" id="languageselector">
        <option value="">Select the language</option>
        @foreach($reviewForm_language as $lang)
         <option value="{{$lang->id}}">{{$lang->name}}</option>
        @endforeach
      </select>

    </div>
    <input id="ajaxSubmit" type="submit" value="Select"/>
  </form>

Код JavaScript:

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<script>    
jQuery('#languageselector').on('change', function(){      

    jQuery.ajax({
      url: "{{ url('/selected/id') }}",
      method: 'post',
      data: {
         id: $(this).val(),
      },
      success: function(result){
         jQuery('.alert').show();
         jQuery('.alert').html(result.success);
      }
    });

});

Код PHP для выбора идентификатора выбранного языка

<?php
  $langId = request()->get('languageSelected');
?>

Код моего маршрута;

Route::post('/selected/languageId', 'ProfileController@selectedLangId');

Код моего контроллера;

public function selectedLangId(Request $request)
{
    return response()->json(['success'=> $request->id]);
}

Я изучаю AJAX, и по некоторым причинам страница загружается.Кто-нибудь, пожалуйста, направьте меня?

Answer 1

Если я правильно понимаю, то невозможно, чего вы пытаетесь достичь.PHP отображается на стороне сервера, что означает, что если вы выбираете переменную через AJAX, вы не можете «поместить это в PHP-переменную», поскольку эта PHP-переменная может быть заполнена только на сервере.

Так что, как только вы получили значение с помощью AJAX, вам придется делать все остальное с помощью JavaScript / jQuery - или необходимости перезагрузить страницу.

Похоже, вы пытаетесь выбрать язык на странице.Несмотря на то, что было бы неплохо иметь возможность изменять язык страницы без перезагрузки страницы, я бы не советовал вам делать это.Причина в том, что это значительно замедлит вашу страницу, поскольку все языки должны быть загружены на всех страницах.... А также;как разработчик, переключатель языка - это то, с чем переключаются и играют, так как мы (разработчики) должны проверять все языки и функции на странице.Но обычные пользователи никогда даже не трогают это.Они используют его, только если ваш сайт неправильно определяет, какой язык предпочитает посетитель (неисправность, если вы захотите).В идеале ваш сайт должен отображать тот же язык , который браузер посетителей использует или основан на географическом местоположении .Похоже, вы тратите время на какую-то функцию, чего бы я не сделал на вашем месте.

Если вы настаиваете на продолжении того, что начали, то я бы изменил свой jQuery-код, чтобы он не только делал что-то в случае успеха, но и в случае попадания и ошибки, чтобы вы могли видетьесли вы действительно получаете значение из вашего AJAX-запроса. Этот ответ делает это хорошо.

Помните, что вам не нужно нажимать кнопку «Отправить», чтобы получить AJAX-ответ.Нажатие «Отправить» всегда будет отправлять форму (и перезагружать страницу), если вы не отменили регистрацию / отмену привязки этой функции;и в этом случае вы могли бы вообще не использовать форму.

Если вы замените кнопку подтверждения обычной кнопкой и свяжете ее с функцией jQuery, это было бы хорошим способом.делать это:

<form id="myForm">
 <div class="button dropdown">
  <select name="languageSelected" required="required" id="languageselector">
    <option value="">Select the language</option>
    @foreach($reviewForm_language as $lang)
     <option value="{{$lang->id}}">{{$lang->name}}</option>
    @endforeach
  </select>
 </div>
<buttom id="ajaxSubmit" type="submit" value="Select" />
</form>


$(function(){
  $('#ajaxSubmit').click(function() {    

    jQuery.ajax({
      url: "{{ url('/selected/id') }}",
      method: 'post',
      data: {
        id: $(this).val(),
      },
      success: function(result){
        jQuery('.alert').show();
        jQuery('.alert').html(result.success);
      }
    });
  });
});

Answer 2

Попробуйте изменить параметр запроса с id на languageSelected:

<script>    
jQuery('#languageselector').on('change', function(){

    jQuery.ajax({
    url: "{{ url('/selected/languageId') }}",
    method: 'post',
    data: {
        languageSelected: $(this).val(),
    },
    success: function(result){
        jQuery('.alert').show();
        jQuery('.alert').html(result.success);
    }
    });

});

</script>

и get на input (поскольку вы отправили сообщение, а не получение):

<?php
    $langId = request()->input('languageSelected');
?>

Answer 3

Перезагрузка страницы - нормальное поведение для input типа submit.Если вам не нужно это поведение по умолчанию, вы можете изменить тип ввода на button, например, так: <input type="button"/>, или просто использовать элемент button, например: <button type="button"></button>.

.