javascript - 在 Laravel 5 中以 AJAX 提交表单

Question

 <p style="padding:10px">Add your Facebook Account</p>

    {!! Form::open(['route'=>array('agencyNewPlatform',$influencer->getUser()->user_type_id, '1')]) !!}                        
      <input type="text" name="handle" placeholder="Profile Name" />
      <p style="padding-top:25px;padding-bottom:5px">
        <button type="submit" class="btn btn-success plat_add">Save</button>
      </p>
    {!! Form::close() !!}

我正在尝试通过 AJAX 提交此表单，但我不知道如何定义 myurl。以下源代码也可能包含其他错误。请帮我。

$('.plat_add').click(function(event) {
   event.preventDefault();

   var myurl = ?????????????;

   var date = new Date();
   myurl = myurl+"?noche="+date.getTime();
   mydata = $(this).closest('form').serialize();
   var jqxhr = $.ajax({
     url: myurl,
     type:'GET',
     dataType:'json',
     data: mydata,
   }).done(function() {
     var response = JSON.parse(jqxhr.responseText);
     $("#table3").append("<tr id=" + response.platform_id + "plat><td>" + response.plat_name + "</td><td>" + response.handle + "</td><td><a class='plat_remove' href=" + response.link + ">Remove</a></td></tr>");
   }).fail(function() {
     alert("Add platform fail!" + jqxhr.responseText);
   });

});

这是我的route 和controller 函数:

路线:

Route::get('influencer/update/{user_type_id}/add_plat/{platform_id}', ['as'=>'agencyNewPlatform','uses'=>'AgentController@postPlatform']);

和 Controller :

  public function postPlatform(InfluencerAddPlatformRequest $request, $user_type_id, $platform_id)
  {
      $user = Auth::user();
      $agent = $user->getTypeModel();
      $influencer = $this->influencer->findById($user_type_id);
      $handle = $request->input('handle');
      $result = DB::table('influencers_platforms')->insert(['influencer_id'=>$user_type_id, 'platform_id'=>$platform_id, 'platform_handle'=>$handle]);

      $plat_name = DB::table('platforms')->where('id', $platform_id)->first()->name;



     if($request->ajax()) 
     {   
        return response()->json(array('responsecode'=>'1','action'=>'add', 'plat_name'=>$plat_name, 'handle'=>$handle, 'link'=>route('agencyDeletePlatform',[$influencer->getUser()->user_type_id, $platform->id]), 'result'=>$result,'platform_id'=>$platform_id));
     }

 }

我真的卡在这里了；提前谢谢大家!

Answer 1

首先将 id 放入您的 form，这比尝试从提交按钮捕获事件要好，记住，按 enter任何字段都将提交您的表单，而无需按提交按钮。

查看

 {!! Form::open(['route'=>array('agencyNewPlatform',$influencer->getUser()->user_type_id, '1'), 'method' => 'get' 'id' => 'form']) !!}

       <input type="text" name="handle" placeholder="Profile Name" />

        <p style="padding-top:25px;padding-bottom:5px">
            <button type="submit" class="btn btn-success plat_add">Save</button>
        </p>
{!! Form::close() !!}

这里是我经常用来发送 ajax 请求的脚本:

javascript

$("#form").submit( function (event) {
    event.preventdefault();

    var url = $(this).attr('action'); //here you have to options
    //get the url from the action on the form
    //or declare an <a href="{{route(your.route)}}"> and get it from the href
    var data = $(this).serialize();

    $.get(url, data, function(result) {
         //do if result is ok
    }).fail(function (){
         //do if fails
    });;
});

编辑:

如果你有一个 var date = new Date(); 并且你想把它放在你的 vars 上，首先，url 即使是一个获取请求也不包含你的数据信息。您需要将其传递到您的数据变量中。

让我们学习默认获取 url:

myurl.com?var=value&var2=value2

当你做一个 ajax 请求时，这个 url 被分成两部分url 和 data

var url = "myurl.com";
var data = "var=value&var2=value2";

之后 jquery 将合并这两个变量。

那么，让我们了解一下.serialize()是如何工作的，当你调用这个方法时，结果将是数据格式。

所以如果你想添加另一个变量很简单:

data+="&newvar="+var;

现在数据包含:

data = "var=value&var2=value2&newvar=valuefromvar"

所以你的代码会是这样的:

$("#form").submit( function (event) {
    event.preventdefault();
    var date = new Date();

    var url = $(this).attr('action'); //here you have to options
    //get the url from the action on the form
    //or declare an <a href="{{route(your.route)}}"> and get it from the href
    var data = $(this).serialize();
    data+="&noche="+date.getTime(); //here the change

    $.get(url, data, function(result) {
         //do if result is ok
    }).fail(function (){
         //do if fails
    });;
});

如果你使用route names，另一个建议，正确的形式是用分隔单词。不是驼峰格式，并在主题和 Action 之后构建(如果需要的话)像:

user.show
user.update
agency.create.platform

在 controller 中，我知道对您的应用程序进行重大更改可能为时已晚，但在另一个项目中，为什么您不尝试使用 eloquent 和 orm 关系而不是流利的 DB，这将使您的代码更加灵活，并且您的 Controller 逻辑可能不会超过 10 行。