Ajax 调用以获取从 HTML 选择选项中选择的值答案

【问题标题】：Ajax call to get the value selected from a HTML Select OptionAjax 调用以获取从 HTML 选择选项中选择的值
【发布时间】：2019-02-08 13:31:19
【问题描述】：

在下拉选项中，我想监听并获取用户选择的选项的值。

然后我想将此值传递给一个 PHP 变量，以便在刀片视图 PHP 脚本的后面部分中使用。

我不想重新加载页面，因此从网上看，我发现 ajax 是唯一可能的方法。

我尝试实现如下所示，但在提交页面加载时遇到了问题。

更好的是有一个选择选项下拉列表，您可以在不提交的情况下获得选定的值？

我的选择选项代码：

<form id="myForm">
    <div class="button dropdown">
      <select name="languageSelected" required="required" id="languageselector" onChange='showSelected(this.value)'>
        <option value="">Pick A 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>

我的 JS 代码：

<script>
     jQuery(document).ready(function(){
        jQuery('#ajaxSubmit').click(function(e){
           e.preventDefault();
           $.ajaxSetup({
              headers: {
                  'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
              }
          });
           jQuery.ajax({
              url: "{{ url('#') }}",
              method: 'post',
              data: {
                 id: jQuery('#languageSelected').val(),

              },
              success: function(result){
                 jQuery('.alert').show();
                 jQuery('.alert').html(result.success);
              }});
           });
        });
  </script>

在重新加载时，我可以将值作为 GET 请求获取，如下所示；但是，我不想重新加载页面，但由于某些原因它会重新加载。

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

有人吗？

【问题讨论】：

您不能将 JavaScript 值直接传递给 PHP，尤其是在不重新加载页面的情况下更是如此。 PHP 是一个服务器端脚本。页面加载后，将不再执行任何代码。首先，你必须改变你的 jQuery 函数来听“提交”而不是“点击”。你想用这个值做什么，或者你为什么要把它交给 PHP？
@Chris 我想根据所选值显示数据

标签： javascript php jquery ajax laravel

【解决方案1】：

试试这个 -

更改 type="button" 而不是提交

input id="ajaxSubmit" type="button" value="Select"

2.不需要$.ajaxSetup。从$.ajaxSetup 复制标题并移到 url 上方（在jQuery.ajax({ 内）

您正在正确地做其他事情。现在只需检查控制器是否使用 var_dump($request->all()) 在 post 参数中获取 id

【讨论】：

在你的控制器中你会得到这样的id：request()->get('id');
已更改为input id="ajaxSubmit" type="button" value="Select"，但似乎没有提交表单。
请登录控制台。如果您使用的是 google chrome，您可以在 Networks 选项卡中看到 Ajax 请求。
在控制台上获取Uncaught ReferenceError: showSelected is not defined
脚本中似乎存在客户端问题。修复它，它应该可以工作。

【解决方案2】：

而不是类型提交更改为按钮

<input id="ajaxSubmit" type="button" value="Select"/>

在 php 文件中，您应该获取 id 而不是 languageSelected，因为您已将 id 传递到 ajax 调用中的数据中。

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

【讨论】：

【解决方案3】：

听起来你想直接监听 select 元素上的 change 事件。

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

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

    });
</script>

【讨论】：