通过 
搜索
搜索wjd / wjd-json-form-builder
加载外部JSON以渲染表单
v1.0.11
2024-09-17 12:41 UTC
Requires
- php: ^8.0
README
介绍
wjd-json-form-builder 是一个PHP库，用于根据JSON模式生成HTML表单。它通过从API端点获取JSON数据或处理提供的JSON字符串来动态创建表单标记。
安装
您可以通过Composer安装此库
composer require wjd/wjd-json-form-builder
使用方法
函数
这两个函数都基于提供的JSON模式返回标记。`getFromApi` 函数在内部使用 `getFromSchema` 函数来处理数据。当前端点必须是公开可访问的。
getFromApi
getFromApi(string $getApiEndpoint)
获取返回有效JSON格式的URL。下面将解释JSON结构。
getFromSchema
getFromSchema(string $json)
接受一个JSON字符串并生成相应的表单标记。
JSON模式
{
"$id": "http://mac-gyver.de/json/form.json",
"$schema": "https://json-schema.fullstack.org.cn/draft-07/schema#",
"title": "Form",
"type": "object",
"properties": {
"firstName": {
"type": "string",
"minLength": 1,
"description": "First Name",
"default": "Max"
},
"email": {
"type": "string",
"minLength": 1,
"format": "email",
"description": "Email"
},
"website": {
"type": "string",
"minLength": 1,
"format": "uri",
"description": "Website"
},
"birthdate": {
"type": "string",
"minLength": 1,
"format": "date",
"description": "Birthdate"
},
"age": {
"type": "integer",
"description": "Age",
"minimum": 18,
"maximum": 120
},
"gdpr": {
"type": "boolean",
"description": "Agreed to GDPR"
},
"selection": {
"type": "object",
"description": "Selection",
"default": "2",
"properties": {
"1": {
"type": "string",
"description": "Option 1"
},
"2": {
"type": "string",
"description": "Option 2"
},
"3": {
"type": "string",
"description": "Option 3"
}
}
},
"password": {
"type": "string",
"description": "Password",
"pattern": "(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,}",
"additionalProperties": {
"hint": {
"type": "string",
"description": "The password must contain at least one uppercase letter, one lowercase letter, one number, and be at least 8 characters long."
},
"confirm": {
"type": "boolean",
"default": true
},
"show": {
"type": "boolean",
"default": true
}
}
},
"honeypot": {
"type": "string",
"description": "obvious_honeypot"
},
"hidden": {
"type": "string",
"default": "2"
}
},
"additionalProperties": {
"action": {
"type": "string",
"default": "http://wjdjson.localdev/receiver.php"
}
},
"required": [
"email",
"age",
"gdpr"
]
}
示例实现
以下是如何在您的项目中使用 wjd-json-form-builder 的示例
<?php
namespace WjdDesignStudio\Helpers;
defined('ABSPATH') or die();
use WjdJsonFormBuilder\Form\Creator;
class CreateGeneratorForm {
public function createFromSchema($endpoint, $schema) {
$creator = new Creator();
$form = $creator->getFromApi($schema, [
'action' => '/',
'method' => 'POST',
'submit' => 'Generate PDF'
]);
ob_start(); ?>
<div id="loader-<?= $form['id'] ?>" style="display:none;">
<img src="<?= WJD_DESIGN_STUDIO_PLUGIN_URL ?>/img/generate.svg" />
</div>
<a id="generation-<?= $form['id'] ?>" style="display:none;"></a>
<script>
window.addEventListener('wjdJsonFormBuilderScriptsLoaded', () => {
const form = document.querySelector('.form-' + '<?= $form['id'] ?>');
const loader = document.getElementById("loader-<?= $form['id'] ?>");
const generation = document.getElementById("generation-<?= $form['id'] ?>");
generation.style.display = "none";
loader.style.display = "none";
form.addEventListener('submit', (e) => {
e.preventDefault();
let data = wjdJsonFormToJson('<?= $form['id'] ?>');
console.log(data);
generation.style.display = "none";
loader.style.display = "block";
fetch('<?= $endpoint ?>', {
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(data),
method: "POST"
})
.then(response => response.json())
.then(json => {
loader.style.display = "none";
generation.style.display = "block";
console.log(json);
generation.innerHTML = `The print file has been generated and can be downloaded <a href="${json.result}" target="_blank">here</a>.`;
})
.catch(error => console.log(error))
});
})
</script>
<?php
$extension = ob_get_clean();
return $form['markup'].$extension;
}
}