Question

我有一个表格

<form method="post" action="https://example.info/">
<input type="Hidden" name="id" readonly="" value="2">
<input type="Hidden" name="first_name" readonly="" value="V">
<input type="Hidden" name="last_name" readonly="" value="V">
<input type="Hidden" name="phone_number" readonly="" value="+123">
<input type="Hidden" name="city" readonly="" value="Istanbul">
<input type="Hidden" name="birth_date" readonly="" value="03.08.1993">
<input type="Hidden" name="email" readonly="" value="example@gmail.com">
<input type="Hidden" name="ref_phone_number" readonly="" value="+123">
<input type="Hidden" name="signature" readonly="" value="qqqeee">
<button class="btn btn-dark">
<span>Navigate to</span>
</button>
</form>

使用提供给资源的正确数据将用户重定向到外部资源。另外，我有一个React应用，我想在其中启动对相同URL的类比请求，但不呈现表单（在axios登录请求回调的回调中）。我应该使用哪几行线才能获得所需的效果？

export const signIn = (userName, password) => dispatch => {
    APIClient.post('/api/accounts/token/obtain/',
        {
            'username': userName,
            'password': password
        }).then(response => {
        if (response.status !== 200) {
            throw new Error('invalid credentials');
        }
        return response.data; // contains all the keys that I send with form described above.
    }).then(dataToSendWithForm => {
        cookies.set('accessToken', token, {path: '/'});
        // Want to initiate POST request here and redirect user to the external resource

    }).catch(err => {
        dispatch({
            type: INVALID_LOGIN_CREDENTIALS,
            payload: {}
        });
    });
};

Answer 1

这是我插入到函数主体中的代码，作为.then()的参数传递：

let form = document.createElement('form');
form.action = 'https://example.net/';
form.method = 'POST';

form.innerHTML = `<div><input name="id" type="hidden"  value="${dataToSendWithForm.id}"/>
<input name="first_name" type="hidden" value="${dataToSendWithForm.first_name}"/>
<input name="last_name" type="hidden" value="${dataToSendWithForm.last_name}"/>
<input name="phone_number" type="hidden" value="${dataToSendWithForm.phone_number || ''}"/>
<input name="city" type="hidden" value="${dataToSendWithForm.city || ''}"/>
<input name="birth_date" type="hidden" value="${dataToSendWithForm.birth_date}"/>
<input name="email" type="hidden" value="${dataToSendWithForm.email || ''}"/>
<input name="ref_phone_number" type="hidden" value="${dataToSendWithForm.ref_phone_number || ''}"/>
<input name="signature" type="hidden" value="${dataToSendWithForm.getx_signature}"/></div>`;

document.body.append(form);

form.submit();

如何在不安装表单的情况下在React中发起发布请求？

1 个答案: