发送多个参数作为发送请求在角js到laravel后端

Question

您好我试图提交表单数据使用角度js中的发布请求。下面是代码：

contact.html

<form class="acodehub-form" ng-submit="submit()" method="post" novalidate> 
     <div class="form-group first_name"> 
      <label for="first_name">First Name</label><br> 
      <input type="text" id="first_name" ng-model="fname" name="fname" class="acodehub-input form-control " required tabindex="10" maxlength="40" value="" placeholder="First Name" /> 
      <div class="errorMessage" ng-show="errorFN">First name cannot be empty</div> 
     </div> 
     <div class="form-group last_name"> 
      <label for="last_name">Last Name</label><br> 
      <input type="text" id="last_name" ng-model="lname" name="lname" class="acodehub-input form-control " required tabindex="11" maxlength="40" value="" placeholder="Last Name" /> 
      <div class="errorMessage" ng-show="errorLN">Last name cannot be empty</div> 
     </div> 
     <div class="form-group inputEmail"> 
      <label for="email">Email</label><br> 
      <input type="email" id="inputEmail" ng-pattern = "regexemail" ng-model="email" name="email" class="acodehub-input form-control" required tabindex="12" value="" maxlength="40" placeholder="Email" /> 
      <div class="errorMessage" ng-show="errorE">Please enter a valid email address</div> 
     </div> 
     <div class="form-group reason"> 
      <label for="reason">Subject</label> 
      <select name="reason" ng-model="reason" id="reason" class="typeselects acodehub-input acodehub-select form-control" placeholder="What can we help you with?" tabIndex="13" required> 

       <option selected value="">What can we help you with?</option> 
       <option value="Marketing">Marketing</option> 
       <option value="Advertise" >Advertise</option> 
       <option value="Product Review">Product Review</option> 
       <option value="Tutorial Request">Tutorial Request</option> 
       <option value="Freebie Request">Freebie Request</option> 
       <option value="Write for us" >Write for us</option> 
       <option value="Sticker Request">Ask a question?</option> 
       <option value="Privacy Policy" >Privacy Policy</option> 
       <option value="Other">Other</option> 
      </select> 
      <div class="errorMessage" ng-show="errorR">Select a valid subject</div> 
     </div> 
     <div class="form-group inputDescription"> 
      <label for="inputDescription">Tell Us More</label><br> 
      <textarea name="description" ng-model="description" value="" id="inputDescription" required class="form-control acodehub-input acodehub-textarea" tabindex="14"></textarea> 
      <div class="errorMessage" ng-show="errorD">Please tell us something about your query. Minimum 50 letters.</div> 
     </div> 
     <div> 
      <button type="submit" class="acodehub-btn acodehub-btn-dark" 
      data-ga-track="true" data-ga-group="Contact Us" 
      data-ga-event="Contact Us - Click to Submit Form" 
      data-ga-val="Submit"> 
      Submit 
     </button> 
    </div> 
</form> 

controller.js

angular.module('app.controllers',[ 
     'app.directives', 
     'app.factories' 
     ]).controller('ContactController',['$scope','$http','$httpParamSerializer',function($scope,$http,$httpParamSerializer){ 
      $scope.submit = function() { 
var text = {"first_name":$scope.fname,"last_name":$scope.lname,"email":$scope.email,"reason":$scope.reason,"description":$scope.description}; 
       $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded"; 
       $http.post('/api/contact',$httpParamSerializer(text)).then(function (data, status, headers, config) { 
        alert("success"); 
        console.log(data); 
        console.log(status); 
        console.log(headers); 
        console.log(config); 
       },function (data, status, headers, config) { 
        alert("error"); 
        console.log(data); 
        console.log(status); 
        console.log(headers); 
        console.log(config); 
       }); 
      } 
     }]); 

web.php（在laravel）

Route::post('/api/contact','ContactController@submit'); 

的ContactController

public function submit(Request $request) { 
     $this->validate($request,array(
      'first_name'=>'required', 
      'last_name'=>'required',    
      'email'=>'required|email', 
      'reason'=>'required', 
      'description'=>'required|min:20' 
     )); 

     $data = array(
      'first_name'=>$request->first_name, 
      'last_name'=>$request->last_name,   
      'email'=>$request->email, 
      'reason'=>$request->reason, 
      'description'=>$request->description 
     ); 
     Mail::queue('emails.contact',$data,function($message) use($data) { 
      $message->from($data['email']); 
      $message->to('gaurav.roy142@gmail.com'); 
      $message->subject($data['reason']); 
     }); 


     //dd($request); 

     //echo 'hello '.$submit; 
     if(count(Mail::failures())>0) { 
      return $request; 
     }else { 
      return $request; 
     } 
     //return $data; 
    } 

我得到的输出在控制台为：

Object {data: "<!DOCTYPE html> 
↵<html ng-app="app"> 
↵<head> 
↵ <b…rc="/app/services.js"></script> 
↵</body> 
↵</html>", status: 200, config: Object, statusText: "OK", headers: function} 
undefined 
undefined 
undefined 

我试图提供计算器或任何其他网站每一个解决方案，但我不能正确设置它，每次我收到输出相同以上。我知道我错过了某个地方，现在我没有任何想法如何正确设置它。请帮我修理它。

Answer 1

$ http返回承诺。在成功或错误的情况下，包含数据，状态，配置，状态文本和标题属性的对象（如您在控制台日志中看到的）被解析或拒绝。

因此，改变你的代码：

$http.post('/api/contact',$httpParamSerializer(text)).then(function (response) { 
     alert("success"); 
     console.log(response.data); 
     console.log(response.status); 
     console.log(response.headers); 
     console.log(response.config); 
    },function (error) { 
     alert("error"); 
     console.log(error.data); 
     console.log(error.status); 
     console.log(error.headers); 
     console.log(config); 
    });