javascript - 将对象转换为 URL 编码字符串时无法将对象转换为原始值

Question

我正在尝试使用以下函数将对象转换为 URL 编码字符串:

console.log(jQuery.param($scope.employee));

console.log($.param($scope.employee));

但是他们给了我一个错误:

TypeError: Cannot convert object to primitive value at encodeURIComponent () at e (jquery-3.2.1.min.js:4) at Ab (jquery-3.2.1.min.js:4) at Function.r.param (jquery-3.2.1.min.js:4) at m.$scope.save (employees.js:49) at fn (eval at compile (angular.min.js:241), :4:388) at e (angular.min.js:286) at m.$eval (angular.min.js:149) at m.$apply (angular.min.js:150) at HTMLButtonElement. (angular.min.js:286)

$scope.employee的值

Data: Object
contact_number:"112"
created_at:"2017-08-08 05:27:03"
email:"<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="74150710344545455a171b19" rel="noreferrer noopener nofollow">[email protected]</a>"
id:9
name:"re"
position:"a"
updated_at:"2017-08-08 05:27:03"

这是使用 HomeStead 上托管的 Laravel 和 AngularJS 开发的。 Jquery 已安装。

更新仅用于验证目的:

模态 HTML 代码:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">{{form_title}}</h4>
</div>
<div class="modal-body">
<form name="frmEmployees" class="form-horizontal" novalidate="">
<div class="form-group error">
<label for="inputEmail3" class="col-sm-3 control-label">Name</label>
<div class="col-sm-9">
    <input type="text" class="form-control has-error" id="name" name="name" placeholder="Fullname" value="{{employee.data.name}}" 
    ng-model="employee.data.name" ng-required="true">
    <span class="help-inline" 
    ng-show="frmEmployees.name.$invalid && frmEmployees.name.$touched">Name field is required</span>
</div>
</div>

<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Email</label>
<div class="col-sm-9">
    <input type="email" class="form-control" id="email" name="email" placeholder="Email Address" value="{{employee.data.email}}" 
    ng-model="employee.data.email" ng-required="true">
    <span class="help-inline" 
    ng-show="frmEmployees.email.$invalid && frmEmployees.email.$touched">Valid Email field is required</span>
</div>
</div>

<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Contact Number</label>
<div class="col-sm-9">
    <input type="text" class="form-control" id="contact_number" name="contact_number" placeholder="Contact Number" value="{{employee.data.contact_number}}" 
    ng-model="employee.data.contact_number" ng-required="true">
<span class="help-inline" 
    ng-show="frmEmployees.contact_number.$invalid && frmEmployees.contact_number.$touched">Contact number field is required</span>
</div>
</div>

<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Position</label>
<div class="col-sm-9">
    <input type="text" class="form-control" id="position" name="position" placeholder="Position" value="{{employee.data.position}}" 
    ng-model="employee.data.position" ng-required="true">
<span class="help-inline" 
    ng-show="frmEmployees.position.$invalid && frmEmployees.position.$touched">Position field is required</span>
</div>
</div>

</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="btn-save" ng-click="save(modalstate, employee.data.id)" ng-disabled="frmEmployees.$invalid">Save changes</button>
</div>
</div>
</div>
</div>

注意:在本教程中，我遵循的 ng-model 值是:employee.position，但我将其更改为 employee.data。位置，因为当我更新记录时，值不会填充到字段中，但在添加数据后，值现在已填充。

我刚刚开始学习 Laravel 和 AngularJS。

Answer 1

如果您使用 Angular，则可以使用 $httpParamSerializerJQLike，示例代码:

.controller(function($http, $httpParamSerializerJQLike) {
  //...

  $http({
    url: myUrl,
    method: 'POST',
    data: $httpParamSerializerJQLike(myData),
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  });

});

Angular documentation here