HTML / Javascript：仅在字段更改时发送

Question

我有一个带有文本输入字段的表单。因为数据库操作很昂贵，所以我使用这种方法来检查更改：

<input type=text name=myinput value="Current text">
<input type=hidden name=myinput_original value="Current text">

这样我可以在服务器上比较 myinput 和 myinput_original 并决定是否检查/更新数据库。

这当然是相当多的开销（基本上是从服务器发送/发送到服务器的数据加倍），只是为了检查更改。

目前数据被发送 4 次（两次从服务器到客户端，两次从客户端到服务器）。我想将其减少到 1 - 2 次（如果没有进行任何更改，则数据仅发送一次到客户端，并且没有任何内容发送回；如果发生更改，数据仅发送一次到客户端，并且仅发送一次返回服务器） .

我想用 Javascript 对此进行优化，这样如果用户将文本保持原样，nothing 将被传输到服务器（即从 POST 请求中删除字段“myinput” ) 并且仅在文本发生更改时才传输文本（即正常的 HTML 行为）。这样服务器只会获取更改后的值。

如何在 Javascript 中做到这一点？

Answer 1

您需要为focusout（分别为blur）附加事件侦听器，并将该值与您的原始输入数据进行比较。如果这两个值匹配，则没有任何变化。

document.getElementByName( 'myinput' ).addEventListener( 'focusout', function( event ) {
    if( document.getElementByName( 'myinput_original' ).value !== this.value ) {
        alert( 'new value differs' );
    };
}, false);

演示：http://jsfiddle.net/faphygty/