如何使用 ajax 发布选定的选项？答案

【问题标题】：How do i POST selected option using ajax?如何使用 ajax 发布选定的选项？
【发布时间】：2021-10-05 14:37:36
【问题描述】：

我在 Laravel 中使用 Ajax 来存储数据，下面是我用来存储数据的表单，它有输入和选择的选项

  <form class="forms" method="get" action="">
                      {{ csrf_field() }}
          
                      <div class="form-group row">
                        <label for="exampleInputUsername2" class="col-sm-2 col-form-label">Estate Name</label>
                        <div class="col-sm-4">
                          <input type="text" class="form-control Estate_name" name="Estate_name" id="exampleInputUsername2" placeholder="Enter Estate Name" >
                        </div>
          
                        <label for="exampleInputEmail2" class="col-sm-1 col-form-label">Landlord</label>
                        <div class="col-sm-4">
                          <input type="text" class="form-control Landlord" name="Landlord" id="exampleInputEmail2" autocomplete="off" placeholder="Enter Landlord" >
                        </div>
                      </div>
          
                      <div class="form-group row">
                        <label for="exampleInputEmail2" class="col-sm-2 col-form-label">District</label>
                        <div class="col-sm-4">
                          <select class="js-example-basic-single w-200 District_id" name="District_id">
                            @foreach ($District as $districts)
                            <option value="{{$districts -> id}}">{{$districts -> DISTRICT}}</option>
                            @endforeach
                          </select>
                        </div>
    </div>
    </form>

以下是插入数据的脚本，但我不知道如何最好地编写存储所选选项的代码。我需要帮助！，选择选项应该将“District_id”插入数据库。

<script>
        $(document).ready(function (){
      
          $(document).on('click', '.add_estate', function(e){
            e.preventDefault();
            //console.log("Hello")
            var data = {
              'Estate_name': $('.Estate_name').val(),
              'Landlord': $('.Landlord').val(),
              'District_id': $('.District_id').val(),//this is where i fail to insert
            }
            //console.log(data);
            //Call Ajax Methoad
            $.ajaxSetup({
              headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              }
            });
    
            $.ajax({
              type: "POST",
              url:"/register/estate",
              data: data,
              dataType: "json",
              sucess: function (response) {
                  console.log(response); 
              }
            });
    
          });
        });
      </script>

【问题讨论】：

因为$('District_id') 正在寻找<District_id> 元素
@epascarello 我怎么写好？
那么您是如何编写其他有效的？ :) 你确实在它上面做了两次。
查看输入与选择有何不同
好吧，我猜你的选择没有价值

标签： javascript php ajax laravel

【解决方案1】：

其次，可以使用提交事件触发表单的事件然后你可以序列化信息，这样你的 ajax 请求应该是这样的

$(".forms").submit(function(e) {

    e.preventDefault();

    var form = $(this);
    var url = form.attr('action'); //you can paste your URL directly if you want /register/estate
    
    $.ajax({
           type: "POST",
           url: url,
           data: form.serialize(), // serializes the form's elements.
           success: function(data)
           {
               console.log(data); 
           }
         });

    
});

【讨论】：

你能完成吗？