时间戳

首页 > 解决方案 > Ajax 调用以获取从 HTML 选择选项中选择的值

javascript - Ajax 调用以获取从 HTML 选择选项中选择的值

问题描述

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

然后我想将此值传递给 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');
  ?>`

任何人？

标签： javascriptphpjqueryajaxlaravel

解决方案

尝试这个 -

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

    输入 id="ajaxSubmit" type="button" value="Select"

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

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

推荐阅读