jquery - 使用ajax从表单提交laravel上的数据库获取值

Question

我的表单中有一个选择列表，例如

 <form class="form-horizontal form-bordered" method="post" action="formaction">
  <div class="form-group">
    <label class="col-md-3 control-label" for="inputSuccess">Amount</label>
        <div class="col-md-6">
           <select class="form-control mb-md" name="amount" id="amount">
                    <option value="10"> 10</option>
                    <option value="20">20</option>
                    <option value="30">30</option>
                    <option value="40">40</option>
                    <option value="50">50</option>
            </select>
        </div>

      <div class="input-group mb-md">
           <button type="submit" class="btn btn-warning btn-sm">Submit</button>
      </div>
</form>

<script>
        $("#sub").click(function(){
            $.ajaxSetup({
                headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content') }
            });


            var selectedVal= $("select option:selected").val();
            return $.ajax({
                type: 'GET',
                url: 'getdollarvalue',
                dataType: 'json',
                contentType: "application/json; charset=utf-8",
                data: {
                    "value": selectedVal
                },
                success: function(response){

                   return alert(response);
                }
            });
        });
    </script>

我在数据库中有一个表，用于存储所选下拉值的相应值，例如

id      value         conversion
1         10            0.2
2         20            0.32
3         30            0.43
4         40            0.77

等等

我的routes.php

 Route::get('getdollarvalue/{value}', [
        'as' => 'getdollarvalue', 'uses' => 'dashboardController@getResult'
    ]);

和我的 Controller

public function getResult(){
        $result = Input::get('value');

        return $result;
    }

现在，当我提交表单时，我想在 alert 中向用户显示所选表单的相应值。例如，如果用户从下拉列表中选择 20，那么在提交表单时，用户应该会看到 20 的相应转换，即0.32 在这种情况下处于警报状态。我知道我必须为此实现ajax，我只是不明白如何实现它。请引导我完成这一过程。

Answer 1

HTML:

<form class="form-horizontal form-bordered" method="post" action="formaction">
<div class="form-group">
<label class="col-md-3 control-label" for="inputSuccess">Amount</label>
    <div class="col-md-6">
       <select class="form-control mb-md" name="amount" id="amount">
                <option value="10"> 10</option>
                <option value="20">20</option>
                <option value="30">30</option>
                <option value="40">40</option>
                <option value="50">50</option>
        </select>
    </div>

  <div class="input-group mb-md">
       <button type="submit" id="sub" class="btn btn-warning btn-sm">Submit</button>
  </div>
</form>

脚本:

<script>
$("#sub").click(function(){
var selectedVal= $("select option:selected").val();

   $.ajax({
       type:"GET",
       url: "api/URL",//put y
       data:{ val:selectedVal},
       contentType: "application/json; charset=utf-8",
       dataType: "Json",
       success: function(result){
          alert(result.conversion); // Note Send the Json Object from the server side
       }

      });
});
</script>