如何在 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

对于submit 类型的input，重新加载页面是正常行为。如果您不希望这种默认行为，您可以将输入类型更改为 button，如下所示：<input type="button"/>，或者只使用 button 元素，如下所示：<button type="button"></button>。

Answer 2

如果我理解正确，那么你想要达到的目标是不可能的。 PHP 是在服务器端呈现的，这意味着如果您通过 AJAX 获取变量，则不能“将其放入 PHP 变量中”，因为该 PHP 变量只能在服务器上填充。

因此，一旦您使用 AJAX 获取了值，那么您将不得不使用 JavaScript/jQuery 完成剩下的工作，或者必须重新加载页面。

您似乎正在尝试制作页面语言选择器。尽管能够在不重新加载页面的情况下更改页面的语言是一个很好的功能，但我不建议您这样做。原因是，这会显着减慢您的页面速度，因为必须在所有页面上加载所有语言。 ... 并且;作为开发人员，语言切换器是可以切换和播放的东西，因为我们（开发人员）必须检查页面上的所有语言和功能。但普通用户甚至从未接触过它。他们仅在您的网站错误地识别访问者喜欢的语言时才使用它（如果您愿意的话，是故障）。理想情况下，您的网站应该显示相同的language that the visitors browser uses 或基于geo-location。 所以听起来你正在花时间在一个功能上，如果我是你，我不会。

如果你坚持要继续你已经开始的事情，那么我会修改我的 jQuery 代码，这样它不仅会在成功时做一些事情，而且还会在命中和错误时做一些事情，所以你可以看看你是否真的从您的 AJAX 请求中接收一个值。 This answer 做得很好。

请记住，您无需按“提交”即可获得 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 3

尝试将请求参数从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（因为你发了帖子，不是get）：

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