Javascript Ajax调用以从HTML选择选项中选择值

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

然后我想把这个值传递给一个PHP变量，以便在blade view 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');
  ?>`

有人吗？

试试这个-

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

输入id=ajaxSubmit类型=按钮值=选择

2.不需要$.ajaxSetup。复制$.ajaxSetup中的标题，并将其移到jQuery.ajax{

您正在正确地执行其他操作。现在只需在控制器中使用var_dump$request->all检查您是否正在post参数中获取id

---

将其更改为按钮，而不是键入submit

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

在php文件中，您应该获得id not languageSelected，因为您已经在ajax调用中将id传递到数据中

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

---

听起来您希望直接侦听select元素上的更改事件

<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>

---

您不能直接将JavaScript值传递给PHP，尤其是在不重新加载页面的情况下。PHP是一个服务器端脚本。一旦加载页面，将不再执行任何代码。首先，您必须更改jQuery函数，以侦听“提交”，而不是“单击”。您想对该值做什么，或者为什么要将其传递给用户r到PHP？@Chris我想根据控制器中选定的值显示数据，您将获得如下id:request->get'id'；更改为此输入id=ajaxSubmit type=button value=Select，但表单似乎未提交。请在控制台中检查。如果您使用google chrome，您可以在网络选项卡中看到Ajax请求。正在取消捕获t ReferenceError:showSelected未在脚本中的ConsoleEMS客户端问题上定义。请修复该问题，它应该可以工作。