Question

[我输入图片你可以查看演示]我正在开发一个模式对话框，让用户可以添加技能。模态包含三个字段：两个输入字段和一个输出字段。当用户添加技能时，我想更新输出字段（并更新数据库）而不重新加载模态。

到目前为止，我可以在数据库中添加技能，但是输出字段不会更新。

将显示多个记录的模态字段

<form id="skill" method="post" action="{{Route('addSkills')}}" >
    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <div class="mj_createaccount_form">
        <div id="myview" class="form-control" rows="3" placeholder="" type="static">
            @foreach($user->Skills as $skill)
                <a href="{{Route('deleteSkill',array($skill->id))}}" class="mj_btn mj_greenbtn"id="myskill"><i class="fa fa-times" >&nbsp&nbsp&nbsp;{{$skill->name}}</i></a>
            @endforeach
        </div>
        <br>
        <br>
        <div class="form-group">
            <select class="form-control" name="jobSkillId" required>
                <option value=>Select Skill</option>
                {{--@foreach($skills as $skill)--}}
                    <option value="1">php{{--{{$skill->id}}">{{$skill->job_skill_name}}--}}</option>
                    <option value="2">laravel</option>
                    <option value="3">c#</option>
                    <option value="4">C++</option>
                {{--@endforeach--}}
            </select>
        </div>
        <div class="form-group">
            <select name="experience"  class="form-control" style="width: 100%;">
                <option>Select one</option>
                <option value=">1">less than 1 Year</option>
                <option value="1">1 Year</option>
                <option value="2">2 Year</option>
                <option value="3">3 Year</option>
                <option value="4">4 Year</option>
                <option value="5">5+ Year</option>
            </select>
        </div>
    </div>
    <div class="mj_pricing_footer">
        <button  class="mj_mainbtn mj_btnyellow" data-text="Add Skill" type="submit" id="submit">Add Skill</button>
    </div>
</form>

用于提交数据的Javascript

$(document).ready(function() {
    $('#skill').on('submit', function (e) {
        e.preventDefault();
        $.ajax({
            url: 'addSkills',
            data: $('form').serialize(),
            type: 'POST',
            dataType: "json",
            success: function() {
                $('form').reset();
            },
            complete: function() {
                $('#skill').each(function(){
                this.reset();//Here form fields will be cleared.
            });
        }
    });
    return false;
});

round trip Swift number types to/from Data

Answer 1

如果我能理解他的问题，@穆迪西尔想要同时提交和获取记录。

您需要编写一个ajax，它将在提交时触发，并在同一函数调用上获取数据。我宁愿说更少的数据去ajax，如果你想在数千时间内提取所有数据，那么ajax不是很好的sol。一点都不。

节点或其他一些服务器脚本是最好的。我正在展示要实现的示例代码。

$("button").on('submit',function(){
 $.ajax({
   url: someurl,
   _token : $("input[name='_token']").val(),//this requires in laravel for security
   type: post,
   dataType: 'json',
   data: {
        'skill_id' : $("select[name='jobSkillId']").val(),
        'experience' : $("select[name='experience']").val()
    },
   success: function(json) {
     $.each(json, function(key, value) {
            $('.your_view_to_show ul').append($("<option</option>").attr("value", value.id).text(value.name));
        });
   }
});

我觉得，能够回答你的需要。感谢。

Answer 2

routes.php

中的

//skill
Route::get('/skill','SkillController@viewskill');
Route::post('/addSkills','SkillController@addskill');

SkillController.php中的

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests;
use App\Skill;

class SkillController extends Controller
{
    //

    public function viewskill(){

        return view('skill');
    }

    public function addskill(Request $request)
    {
        if($request->ajax()){

        $skill=Skill::create($request->all());
        $data=Skill::all();
        return response()->json($data);


        }
    }
}

skill.blade.php

中的

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Customer Info</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  {!!Html::script('../resources/assets/js/jquery.min.js')!!}
  {!!Html::script('../resources/assets/js/bootstrap.min.js')!!}
</head>
<body>

<div class="container">
    <div class="panel panel-default">



        <div class="panel-body">

            @include('modalshow')

            <button type="button" class="btn btn-success btn-modaldata">

                Add Skill

            </button>   

        </div>

    </div>
</div>
<script type="text/javascript">

        //-----------------------------------


        $('.btn-modaldata').on('click',function(){


            $('#modalshow').modal('show');
        });

        //------------------------------

        //after submit modal form
        $('#frmskill').on('submit',function(event){
            console.log('hello');
            event.preventDefault();
            var form=$('#frmskill');

            var formData=form.serialize();
            console.log(formData);
            var url=form.attr('action');



            var type='post';


            $.ajax({
                type:type,
                url:url,
                data:formData,
                success:function(data)
                {
                    console.log("success");
                    console.log(data);
                    console.log(data.length);

                    var output=" ";
                    output+="<h3><strong>Outputs</strong></h3>";

                     for(var i=0;i<data.length;i++){
                        output+="skill Name: "+data[i]['jobSkillId']+" , ";
                        output+="Experience "+data[i]['experience']+"<br/>";
                    }

                    $('.viewdata').html(output);

                },
                error:function(data){
                    console.log("fail");
                }
            }); 
        });
</script>
</body>

</html>

在 modalshow.blade.php（模态）

<!-- Modal -->
  <div class="modal fade" id="modalshow" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Skills Info</h4>
        </div>
        <div class="modal-body">
          <form action="addSkills" method="post" id="frmskill">

              <div class="row">



                  <!-- skill-->
                    <div class="col-lg-6 col-sm-6">
                    <div class="form-group">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">


                        <select class="form-control" name="jobSkillId" id="jobSkillId" required>
                                <option value=>Select Skill</option>
                                <option value="1">php</option>
                                <option value="2">laravel</option>
                                <option value="3">c#</option>
                                <option value="4">C++</option>

                        </select>

                    </div>
                  </div>

                   <!-- experienced-->
                    <div class="col-lg-6 col-sm-6">
                    <div class="form-group">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">


                        <select name="experience"  id="experience" class="form-control">
                            <option>Select one</option>
                                <option value="0">less than 1 Year</option>
                                <option value="1">1 Year</option>
                                <option value="2">2 Year</option>
                                 <option value="3">3 Year</option>
                            <option value="4">4 Year</option>
                            <option value="5">5+ Year</option>
                        </select>

                    </div>
                  </div>


              {{-- output will be print here --}}
              </div>
              <!-- end row clss -->

               <div class="row">
                  <!-- first name -->
                <div class="col-lg-12 col-md-12 col-sm-13">

                    <div class="viewdata">

                    </div>

                </div>
              </div>

        </div>

        <div class="modal-footer">
          <input type="submit"  class="btn btn-primary customclose">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
        </form>

      </div>

    </div>
  </div>

Skill.php（模特）

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Skill extends Model
{



   protected $table = 'skills';
   protected $fillable =  ['jobSkillId', 'experience'];
}

数据库表中的

模态视图中的

只需单击一下，即可通过模式提交和获取数据库中的数据，而无需使用ajax重新加载页面

2 个答案: