How to render html that nodejs res.send to me?

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&timestamp=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="{&quot;out_trade_no&quot;:&quot;2019-10-18T13:28:41.053Z&quot;,&quot;total_amount&quot;:&quot;0.02&quot;,&quot;product_code&quot;:&quot;FAST_INSTANT_TRADE_PAY&quot;,&quot;subject&quot;:&quot;捐赠&quot;,&quot;body&quot;:&quot;无偿捐赠&quot;}" />
        </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.

@shastox @wouterb
can you answer my problem?

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. :point_up_2:

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.