如何在将表单数据POST到API后更改用户所见的内容

9 浏览
0 Comments

如何在将表单数据POST到API后更改用户所见的内容

在构建一个用于学习API工作原理的应用程序时，我在使用HTML表单向底层数据库添加数据的端点时遇到了问题。

以下是表单的HTML代码：

            

                添加手机
                    
    
                        
  1. 
                        
                            
                        
    2. 
                        
  2. 
                            
                            
                        
    3. 
                        
  3. 
                            
                            
                        
    4.

注意 action="mobile/add"

这个表单可以在以下URL上看到：

enter image description here

以下是在单击提交按钮之前，填充了示例数据的表单：

enter image description here

单击提交按钮后，数据将被添加到数据库中，可以从列出手机数据的端点http://localhost:8080/miscellaneous/APIexamples/CRUD/mobile/list中看到：

enter image description here

然而，在提交表单后，用户会看到以下内容：

enter image description here

我认为重定向发生在表单中的action="mobile/add"导致的，这是将数据添加到数据库中所必需的，但不是我希望用户看到的。

有没有一种方法可以将表单中的数据添加到数据库中，但重新显示http://localhost:8080/miscellaneous/APIexamples/CRUD/时，“添加手机”表单字段被清空？或者上述使用方式是否不标准（即可能通常使用AJAX来处理，而不是使用表单提交）？

结果：

感谢 @VoiceOfUnreason 的答案，将HTTP状态码更改为205解决了这个问题。数据仍然被提交，但页面没有重定向。然而，表单字段并没有被清空。为了实现清空，修改了表单标签如下：

。这个方法来自于 @atesin 在2019年8月17日发表的这个讨论中。

0

1 答案

0 Comments

当用户通过表单提交数据到API后，希望在将数据添加到数据库的同时，重新显示原始的表单页面并清空表单字段。这个问题的出现原因是用户希望在提交数据后，重新开始填写新的数据，而不是保留之前的数据。

解决方法是使用HTTP状态码205 Reset Content。根据RFC 7231中的描述，205状态码表示服务器已经成功处理了请求，并希望用户代理将"文档视图"重置为从源服务器接收到的原始状态。

这个响应状态码旨在支持一个常见的数据输入场景，即用户接收到支持数据输入的内容。

通过在API的POST请求处理程序中返回205状态码，可以实现在将数据添加到数据库后，重新显示原始表单页面并清空表单字段。这样，用户就可以立即开始填写新的数据，而不需要手动清空表单字段。

以下是在常见的Web开发框架中实现这个解决方法的示例代码：

# Python and Flask example code
from flask import Flask, render_template, request, redirect, url_for
app = Flask(__name__)
@app.route('/form', methods=['GET', 'POST'])
def form():
    if request.method == 'POST':
        # Process the form data and add it to the database
        # ...
        
        # Redirect to the same form page with 205 status code
        return redirect(url_for('form'), code=205)
    else:
        # Render the form template
        return render_template('form.html')
if __name__ == '__main__':
    app.run()

上述示例代码中，当用户提交表单时，服务器会处理表单数据并将其添加到数据库。然后，服务器会以205状态码重定向到相同的表单页面。这将导致用户代理（浏览器）重置表单字段，并显示一个空的表单，以便用户可以立即开始填写新的数据。

这样，用户就可以在每次提交后都看到一个空表单，而不需要手动清空表单字段，提高了用户体验和操作效率。

0