如何在 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);
      }
    });
  });
});