javascript - $ ('#textboxId' ).val() 返回旧值(浏览器缓存问题)

Question

尽管花了几个小时我还是弄不明白。我有一个带有两个文本框的简单动态创建页面(使用 Controller 加载的 vbhtml)。

页面上有一个保存按钮。此按钮调用页内 Javascript 函数。在函数中我有这些行:

function saveData()
{
var lDescr = $('#FundNote').val();  // FundNote is the id of a textbox
var DocUrl = $('#DocUrl').val();  // DocUrl is the id of another textbox
alert(lDescr);
alert(DocUrl);
  //ajax call to a controller
}

问题是每次显示此页面时，这些变量都会继续返回与第一次输入时相同的值。如果我清理浏览器缓存，将返回新输入的值，但它会一直返回相同的值，直到再次清理浏览器缓存。每次显示此页面时，文本框都是空的，用户输入值，因此页面本身不会保留这些值。

有什么建议吗？

更新

花了几天时间，这就是我(暂时)修复它的方法。

看起来即使 Controller 正在发送更新的 html 并且在浏览器上显示正常(html 包含一个下拉框，它动态填充不同的值。每次值都不同但在 javascript 中，旧值是被返回(例如，选择选项的旧值，该值甚至没有包含在 html 的当前呈现中)。仍然不知道为什么会这样。解决方案中还有其他类似的页面，它们工作正常。) .

无论如何，我做了什么(现在让它工作)，我在动态创建这个 html 的类中添加了一个 RandonNo() 属性(通过 Controller 和 vbhtml 文件)。然后在 vbhtml 中，我将这个随机数附加到所有 html 组件 ID。我还像这样将相同的数字传递给 javascript“Save()”函数 OnClick="Save('@Model.RandonNo')。在 Save 方法中，然后我将 $('#idOption') 更改为 $('#idOption-'+ randomno)。它似乎可以正常工作，因为 id 每次都不同。

Answer 1

我知道这是一个老问题，但我觉得它需要一个解决方案，因为 jQuery 仍在这样做。我一直有一个非常相似的问题，但终于找到了解决方法。问题似乎出在 .val( ) 中。出于某种原因，jQuery 希望在用于获取/设置输入时自动填充缓存中的输入。在我的情况下，我正在做这样的事情:

HTML 文件:

<form ...>
    <input type="hidden" name="my_value" value="X" />
</form>

JS 文件:

$( document ).ajaxSuccess( function ( event, jqxhr, settings, data ) {
    if ( settings.dataType == 'json' && data && data.my_value ) {
        $( 'input[name="my_value"]' ).val( data.my_value );
    }
} );

如果我在不清除缓存的情况下刷新页面，输入将自动被来自初始页面请求的 AJAX 请求的缓存值覆盖，即使它们已经填充了服务器响应中的值。为了解决这个问题，我将 .val( ... ) 更改为 .attr( 'value', ... )，所以行:

$( 'input[name="my_value"]' ).val( data.my_value );

成为

$( 'input[name="my_value"]' ).attr( 'value', data.my_value );

所以我认为您在这里需要做的就是简单地更改:

var lDescr = $('#FundNote').val();  // FundNote is the id of a textbox
var DocUrl = $('#DocUrl').val();  // DocUrl is the id of another textbox

到

var lDescr = $('#FundNote').attr( 'value' );  // FundNote is the id of a textbox
var DocUrl = $('#DocUrl').attr( 'value' );  // DocUrl is the id of another textbox

我不确定这是 jQuery 本身还是它的插件导致的，但这真的很奇怪。似乎如果您在任何时候使用 .val( ) 从输入获取/设置值，如果您稍后再次刷新或访问页面，您将导致输入的值被缓存值损坏.这种损坏似乎不会在调用 .val( ) 时发生，而是在加载文档时发生。

总而言之，调用 .val( ) 获取/设置输入会导致在初始页面请求期间缓存返回/设置的值。在您清除浏览器缓存之前， future 请求的输入值将在初始请求期间返回/设置的文档加载后损坏。