如何使用清除表单字段重新加载 ajax 调用页面？答案

【问题标题】：How to reload a page on ajax call with clearing form fields?如何使用清除表单字段重新加载 ajax 调用页面？
【发布时间】：2017-11-17 12:18:16
【问题描述】：

每当调用 ajax 时，页面应该被重新加载，但表单的所有字段都不应该在页面加载时被清除

我的表单

<form method='post'>
 <input type='text' placeholder='product'/>
 <input type='number' placeholder='cost'/>
 <input type='number' placeholder='tax'/>
 <button type='button' id="cust_tax"  data-toggle="collapse" data-target="#cust_tax">Custom tax</button>
<input type='number' placeholder='new tax' id="cust_tax" class="collapse"/>
<input type='button' class='apply_tax'>New tax add</button>
<input type='submit'/>
</form>

当用户点击自定义税时，会有一个 ajax 调用将 new_tax 保存在数据库中，并自动添加到列表中。

我的 ajax

$(".tax_apply").click(function() {
 var tax_name = document.getElementById("tax_name").value;
 var tax_value = document.getElementById("tax_value").value;
 ajaxPost('/myurl',{'user':user,'tax_name':tax_name,'tax_value':tax_value},function(result){
                    alert('new tax added');
                //reload page
                    });
});

现在每当调用 ajax 并且用户添加新税时，它应该重新加载页面，但他输入的表单字段不应该被清除

【问题讨论】：

为什么应该重新加载页面？
由于一些无法解决的支持问题
我认为您应该发布/询问/解决该问题，而不是询问此补丁！
没有官方文档也不支持这种问题
好吧，我非常不同意你关于重新加载页面的看法，但为了解决当前的问题，如果你的应用程序有登录/身份验证，请使用select query 和用户 ID 来访问用户最后插入的记录。 ...

标签： javascript jquery ajax django forms

【解决方案1】：

因此，您可以将事件侦听器附加到表单字段，将键入的内容保存到 localStorage 中的对象，然后在页面加载时检索该内容并将其放回相应的字段中。

这是一个你可以做的例子。

$(myCollectionOfFields).keyup(function(){
    $(myFormFields).each(function(){    
        var id = $(this).attr('id');
        var value = $(this).val();
       localStorage.setItem(id, value);

    });   
});

$( document ).ready(function() {
    $(myFormFields).each(function(){    
        var id = $(this).attr('id');
        var value = localStorage.getItem(id);

        $(this).val(value);

    }); 
});

我觉得我必须指出，这感觉像是一个容易出错的解决方案（例如，并非每个用户都会允许 localStorage），我会解决你提到的后端问题，而不是使用这种方法。

但理论上它可以完成这项工作。

【讨论】：