在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() !!}

I am trying to submit this form through AJAX, but I don't know how to define myurl . The following source code may contain other errors, too. Please help me.

$('.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);
   });

});

This are my route and controller functions:

Route:

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

and 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));
     }

 }

I am really stuck at here; thank you all in advance!

Answer 1

First put an id to your form , thas better than try to catch the event from the submit button, remember, press enter on any field will gonna submit your form without press the submit button.

view

 {!! 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() !!}

After here the script i often use to send an ajax request:

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
    });;
});

Edit:

i se you have a var date = new Date(); and you want to put it on your vars, first, the url even if is a get request dont contain your data info. You need to pass it into your data var.

lets learn a default get url:

myurl.com?var=value&var2=value2

When you do an ajax request this url is divided in two pieces the url and the data

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

the jquery will gonna merge that two variables after.

So, lets learn how .serialize() works, when you call this method, the result will be in the data format.

so if you want to add another variable its simple:

data+="&newvar="+var;

now data contain:

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

so your code will be like:

$("#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
    });;
});

Another recomendation if you work with route names , the correct form to put it is separating words with . not in camelcase format, and build with a subject after and action (if its necesary) like:

user.show
user.update
agency.create.platform

In the controller , I know maybe its too late to make big changes on your application, but in another projects why you dont try to use eloquent and orm relationships instead of fluent DB , this will gonna make your code more flexible, and your controller logic maybe will not take more than 10 lines.

Answer 2

I may have not fully understood your question so please make a comment if I didn't address something properly.

As a side note, formatting your code (indentation) and using consistency throughout your code (such as declaring an array, ie use array() or [] not both) will go a long way in making your code readable when you or someone else returns to it, see the changes I made in terms of formatting.

view

I have added an id myForm to the form here, see second argument of form open() function. Your route is get so I changed the form method to get also. Default for forms is post you can of course change that depending on your needs.

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

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

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

    <!-- this looks much easier to read on three lines -->
    <p style="padding-top:25px;padding-bottom:5px">
        <button type="submit" class="btn btn-success plat_add">Save</button>
    </p>

{!! Form::close() !!}

javascript

This listens for the form submit event and then you can get the url from the form action attribute

$('#myForm').submit(function(event) {
  event.preventDefault();

  var $myForm = $(this);

  $.get($myForm.attr('action'),
    $myForm.serialize,
    function(data) {
      // your success code
    }
  ).fail(function(data) {
    var errors = data.responseJSON;
    // show the errors to user
  });

});

routes.php

This looks much easier to read on four lines, with indentation. See controller function is getPlatform I changed that because route type is get - it doesn't HAVE to be but you should make them the same so your code is easy to understand.

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

controller

public function getPlatform(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([
            '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
        ]);
    }

}