将多个参数作为post请求以角度js发送到laravel后端

时间:2017-06-20 19:37:50

标签: javascript angularjs ajax laravel-5 http-post

您好我正在尝试使用角度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

我尝试了stackoverflow或任何其他网站上提供的每个解决方案,但我无法正确设置,每次我获得与上面相同的输出。我知道我在某处遗漏了某些东西,现在我对如何正确设置它没有任何想法。请帮我解决一下。

1 个答案:

答案 0 :(得分:0)

$ http返回一个承诺。如果成功或错误,将解析或拒绝包含数据,状态,配置,statusText和标题属性的对象(如控制台日志中所示)。

因此,请将您的代码更改为:

Set-Cookie:XSRF-TOKEN=...