Drupal：如何使用AJAX POST从REST服务提交webfrom [英] Drupal: How to submit the webfrom from REST services using AJAX POST

问题描述

我正在drupal使用Web表单模块。我想使用AJAX POST方法，通过REST服务从外部应用程序将表单提交到webform。我可以使用ajax检索Web表单（node / 1）。提交时不应该创建新的节点，而是添加到Web表单中。

提前感谢任何帮助.....

解决方案

为了能够从 Webform模块与外部应用程序我建议您使用 Webform Service

一旦您安装并配置了模块及其依赖项（如果有的话），您就可以检索调查序列数据。此外，您可以通过适当的HTTP请求方式（GET，POST等）向端点发送提交。请参阅 Webform Service 模块页面上的端点说明。

您需要知道要提交的数据的格式。 Hereby ，您会发现JSON对象的格式正确。 值的值键是一个数组，它有一个或多个值，所以大部分时间看起来像这样：

  {'values'：{0：把你的价值在这里}} 
  

如果有多个值（复选框，多选），可以使用值：

  {'values'：{
 0：把你的value1在这里，
 1：把你的value2在这里，
}} 
  

最后，这里是一个HTML和AngularJS的代码片段，用于准备和发布请求REST API。

HTML

 < form ng-submit =submit（'将调查的UUID放在这里）ng-controller =formCtrl> 
< label>您的姓名：< / label>< br /> 
< input type =textng-model =formData [1] ['values'] [0]/>< br /> 
< label>我喜欢茶< / label>< br /> 
< input type =checkboxng-model =formData [2] ['values'] [0]value =tea/>< br /> 
< label>我喜欢咖啡< / label>< br /> 
< input type =checkboxng-model =formData [2] ['values'] [1]value =coffee/>< br /> 
< input type =submitvalue =发送/> 
< / form> 
  

请注意，您不需要编写静态HTML表单，但您可以检索API的调查，并通过脚本构建表单。

JavaScript

  var app = angular.module（'webformApp'，[]）; 
 
 app.config（['$ httpProvider'，function（$ httpProvider）{
 $ httpProvider.defaults.useXDomain = true; 
 delete $ httpProvider.defaults.headers.common ['X-Requested-With']; 
} 
]）; 
 
 app.controller（'formCtrl'，function（$ scope，$ element，formService）{
 $ scope.submit = function（uuid）{
 formService.postForm（uuid ，this）; 
}; 
}）; 
 
 app.service（'formService'，function（$ http）{
 return {
 postForm：function（uuid，$ scope）{
 var toPost = { 
 webform：uuid，
提交：{
 data：$ scope.formData 
} 
}; 
 console.log（toPost）; 
 console.log（JSON.stringify（toPost））; 
 return $ http.post（'http://example.com/yourendpoint/submission'，toPost）; 
} 
} ; 
}）; 
  

要尝试/测试API本身，您可以使用Chrome浏览器的Postman扩展程序。这个JS会将JSON字符串记录到控制台以将其发送到API。

玩得开心！

I am having web form module in drupal. I want to submit a form into webform from external app with REST service using the AJAX POST method. I can able to retrieve the web form (node/1) using ajax. On submitting it should not create as new node, instead it will get add into web form.

Thanks in advance for any help.....

解决方案

To be able to retrieve data from and send data to Webform module with an external application I suggest you to use Webform Service module of Drupal that makes REST API available for your surveys.

Once you've installed and configured the modules and its dependencies (if any) you'll be able to retrieve the serialized data of a survey. Also you can send submission by an appropriate request to the endpoint with proper HTTP method (GET, POST etc..). See description of endpoints on the page of Webform Service module.

You need to know the format of the data you are going to submit. Hereby you will find the right format of JSON object. The value of the values key is an array either it has one or more values, so most of the time it looks like this:

{'values':{0:"put your value here"}}

In case of multiple values (checkbox, multi-select) it is possible to use values like this:

{'values':{
    0:"put your value1 here",
    1: "put your value2 here",
}}

Finally here is a snippet of HTML and AngularJS to prepare and post a request to the REST API.

HTML

<form ng-submit="submit('put the UUID of the survey here')" ng-controller="formCtrl">
  <label>Your name:</label><br/>
  <input type="text" ng-model="formData[1]['values'][0]" /><br/>
  <label>I like tea</label><br/>
  <input type="checkbox" ng-model="formData[2]['values'][0]" value="tea" /><br/>
  <label>I like coffee</label><br/>
  <input type="checkbox" ng-model="formData[2]['values'][1]" value="coffee" /><br/>
  <input type="submit" value="Send" />
</form>

Note that you don't need to write static HTML form, but you can retrieve the data of the survey from the API and build the form by a script.

JavaScript

var app = angular.module('webformApp', []);

app.config(['$httpProvider', function($httpProvider) {
        $httpProvider.defaults.useXDomain = true;
        delete $httpProvider.defaults.headers.common['X-Requested-With'];
    }
]);

app.controller('formCtrl', function($scope, $element, formService) {
    $scope.submit = function(uuid){
      formService.postForm(uuid, this);
    };
});

app.service('formService', function($http){
    return {
        postForm: function(uuid, $scope){
          var toPost = {
            webform: uuid,
            submission: {
                data: $scope.formData
            }
          };
          console.log(toPost);
          console.log(JSON.stringify(toPost));
          return $http.post('http://example.com/yourendpoint/submission', toPost);
        }
    };
});

To try/test the API itself you can use Postman extension of Chrome browser. This JS will log the JSON string to the console to send it to API.

Have fun!

这篇关于Drupal：如何使用AJAX POST从REST服务提交webfrom的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！