将多个参数作为 Angular js 中的发布请求发送到 laravel 后端

Question

您好，我正在尝试使用 Angular 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');

联系人控制器

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

我尝试了 stackoverflow 或任何其他网站上提供的所有解决方案，但每次我得到与上述相同的输出时，我都无法正确设置它。我知道我在某处遗漏了一些东西，现在我不知道如何正确设置它。请帮我解决它。

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