framework7 form ajax data to my nodejs server, after that, nodejs server return me some html, but how to render those html with framework7? i use framework7 core.
Provide the full code on how and where you receive the data and where do you want to insert it
frontend runnning on http://localhost:8080
<template>
<div class="page" data-name="about">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner sliding">
<div class="left">
<a href="#" class="link back">
<i class="icon icon-back"></i>
<span class="if-not-md">Back</span>
</a>
</div>
<div class="title">关于</div>
</div>
</div>
<div class="page-content">
<div class="block-title">生活是一场梦</div>
<div class="block block-strong">
<p>世上没有失败的路,只有不成功的我。我一直不放弃寻找成功的路,能力不够也好,怀才不遇也罢,谁知道呢?通过学习,运动,旅游,画画,看电影,写诗作词,我相信总有一天会找到的......</p>
<div class="display-flex justify-content-center">
<!-- <button class="button button-raised button-fill auto-width">赞助我</button> -->
<form action="http://localhost:3000/alipay" method="POST" class="fit-content-width form-ajax-submit list" id="donate-form">
<ul>
<li>
<div class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">金额</div>
<div class="item-input-wrap">
<input required validate type="number" pattern="^\d+(\.\d{1,2})?$" min="0.01" step="0.01" name="totalAmount" placeholder="我会珍惜你的鼓励" >
</div>
</div>
</div>
</li>
<li>
<div class="item-content item-input">
<div class="item-inner">
<div class="item-input-wrap">
<input type="submit" class="button button-raised button-fill" value="捐赠">
</div>
</div>
</div>
</li>
</ul>
</form>
</div>
</div>
</div>
</div>
</template>
<script>
export default {};
</script>
backend running on http://localhost:3000
var express = require('express');
var AlipaySdk = require('alipay-sdk').default;
var AlipayForm = require('alipay-sdk/lib/form').default;
var fs = require('fs');
var path = require('path');
require('dotenv').config();
var appId, alipayPublicKey, gateway;
if (process.env.NODE_ENV === "production") {
appId = process.env.ALIPAY_APPID;
alipayPublicKey = fs.readFileSync(path.join(__dirname, '../alipay_public.pem'), 'ascii');
gateway = process.env.ALIPAY_GATEWAY;
} else {
appId = process.env.SANDBOX_ALIPAY_APPID;
alipayPublicKey = fs.readFileSync(path.join(__dirname, '../sandbox_alipay_public.pem'), 'ascii');
gateway = process.env.SANDBOX_ALIPAY_GATEWAY;
}
var formData = new AlipayForm();
// formData.setMethod('get');
formData.addField('returnUrl', 'http://localhost:8080');
var alipaySdk = new AlipaySdk({
appId,
privateKey: fs.readFileSync(path.join(__dirname, '../private.pem'), 'ascii'),
alipayPublicKey,
gateway
});
var router = express.Router();
router.post('/', function (req, res, next) {
var outTradeNo = (new Date()).toISOString();
var totalAmount = req.body.totalAmount;
console.log(`totalAmount ${totalAmount}`);
console.log(typeof totalAmount);
// console.log(req);
if ((/^\d+(\.\d{1,2})?$/g).test(totalAmount)) {
formData.addField('bizContent', {
outTradeNo,
totalAmount,
productCode: 'FAST_INSTANT_TRADE_PAY',
subject: '捐赠',
body: '无偿捐赠'
});
alipaySdk.exec(
'alipay.trade.page.pay',
{},
{ formData },
).then(result => {
//result is some html...
return res.send(result);
}).catch((err) => {
// ...
console.log(err);
})
} else {
return res.end();
}
});
module.exports = router;
returned html is like below:
<form
action="https://openapi.alipaydev.com/gateway.do?method=alipay.trade.page.pay&app_id=2016092000557520&charset=utf-8&version=1.0&sign_type=RSA2×tamp=2019-10-18%2021%3A28%3A41&return_url=http%3A%2F%2Flocalhost%3A3000&sign=LYOw2Ttbo6dnmoTjOuVPe72pEgtctZAOpkxWxfptJOOwuUlPZYtzvUevRDJe0qqjZOwM20Mtkn3I5%2F7VQnonzSq%2F2%2BMZ8rsiLbpbuNLpalBjB%2B2Nvp3QRtnpfkEHXXOZZTvgWKY%2Ftb41ADBWPdag55p%2Bhec8vRpXXMpoxMI8NDykKjKn7rBJVvn6ynVv7DL3ImzsMvrXm7SRaFsKxUa1AvQ5O20%2FoDjwWg2KG6cjHQpXT0FT5hBjEyqwADtQ05JLD3kWtIgqqGaqQrxnC7lcvgy1ySPWHvKK0J129oDCnk%2FWjfI6fm9RFlpzDYQdDLp6%2BREbikVkTEckDe4dG6q8bg%3D%3D"
method="post" name="alipaySDKSubmit1571405321068" id="alipaySDKSubmit1571405321068">
<input type="hidden" name="alipay_sdk" value="alipay-sdk-nodejs-3.0.8" /><input type="hidden" name="biz_content" value="{"out_trade_no":"2019-10-18T13:28:41.053Z","total_amount":"0.02","product_code":"FAST_INSTANT_TRADE_PAY","subject":"捐赠","body":"无偿捐赠"}" />
</form>
<script>
document.forms["alipaySDKSubmit1571405321068"].submit();
</script>
i don’t know how to render my server returned html and insert it where.please help me.
Do you know what is XHR/Ajax/Fetch? In F7 you need to submit forms dynamically, e.g. send required data to required endpoint with Ajax.
i have done it but i dont’t know how to render returned html directly in f7-core
Where and how in your code you are doing ajax request?
please look at top frontend snippet.
Add this listener for getting the data on ajax request success:
$$(’#donate-form’).on(‘formajax:success’, function (e) {
var xhr = e.detail.xhr; // actual XHR object
var data = e.detail.data; // Ajax response from action file
// do something with response data
});
Read the docs here: https://framework7.io/docs/form.html#ajax-form-submit-events
i know this. but my response data is form html snippets, how can i render returned form in f7-core ?
В чем именно ваша проблема? Вы не знаете как вставит HTML-код с сервера в текущую страницу? Куча сообщений, но вы так не смогли сформулировать вопрос.
I don’t know how to insert the HTML code from the server into the current page? please teach me.