如何在 AJAX 中獲取 HTML 選擇選項並傳遞給 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);
      }
    });

});

用於選擇所選語言 ID 的 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

嘗試將請求參數從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 2

對於類型為submit的input ，重新加載頁面是正常行為。 如果您不想要這種默認行為，您可以像這樣將輸入類型更改為button ： <input type="button"/> ，或者只使用像這樣的button元素： <button type="button"></button> .

Answer 3

如果我理解正確，那么您想要實現的目標是不可能的。 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);
      }
    });
  });
});