Javascript 在Laravel 5中用AJAX提交表单

这是我的

路线

和

控制器

功能：

路线：

$('.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::get('influencer/update/{user_type_id}/add_plat/{platform_id}', ['as'=>'agencyNewPlatform','uses'=>'AgentController@postPlatform']);

---

我真的被困在这里了；提前谢谢大家

我可能还没有完全理解你的问题，所以如果我没有正确地回答一些问题，请发表评论

作为旁注，格式化代码（缩进）并在整个代码中使用一致性（例如声明数组，即使用

array（）

或

[]

而不是两者都使用）将在您或其他人返回代码时大大提高代码的可读性，请参阅我在格式化方面所做的更改

查看

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

}

我在这里的表单中添加了一个id

myForm

，请参见form open（）函数的第二个参数。你的路线是get，所以我将表单方法更改为get。表单的默认设置是post。当然，您可以根据需要更改它

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

 }

routes.php

四行缩进看起来更容易阅读。请参阅控制器函数是getPlatform，我更改了它，因为路由类型是get-它不必是get，但您应该使它们相同，以便代码易于理解

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

});

控制器

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

---

首先将

id

放入您的

表单

，这比尝试从提交按钮捕获事件要好，记住，在任何字段上按

enter

，您将在不按提交按钮的情况下提交表单

查看

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

}

当您执行ajax请求时，此url被分为两部分

url

和

数据

myurl.com?var=value&var2=value2

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

因此，让我们了解

.serialize（）

是如何工作的，当您调用此方法时，结果将是数据格式

因此，如果要添加另一个变量，它很简单：

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

现在数据包括：

data+="&newvar="+var;

因此，您的代码如下所示：

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

---

在控制器中，我知道对您的应用程序进行重大更改可能为时已晚，但在另一个项目中，为什么您不尝试使用雄辩的orm关系而不是流畅的

DB

，这将使您的代码更加灵活，您的控制器逻辑可能不会超过10行。

您是否尝试侦听表单提交事件，然后使用form.action作为url？您可能还希望通过ajax请求传递数据，而不是将其作为表单操作的路由参数。一个侧点——你的方法叫做后平台，你的路线是get？也许你需要把它贴出来？没有问题，我想你会说西班牙语，因为你的var“noche”

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

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

user.show
user.update
agency.create.platform