Question

我有一个前端，我跟踪哪个元素已被click编辑并将其发送回服务器，以根据该元素的内容在后端进行一些工作。代码设置如此......

$('body').on('click', function(e) {
    $.post( '/edit', {el: $( e.target ).serialize()}, function(response) {
        console.log( response );
    });
});

但我在服务器上将el作为空字符串。我还能做些什么来将e.target信息发送到我的服务器？

更新

我认为我的问题可以从某些背景中受益。

该应用程序的基本功能是启用页内编辑。节点服务器加载我要编辑的HTML页面。单击此页面上的任何元素，我可以更改该元素中的文本，然后将POST更改回节点服务器，在那里我使用cheerio模块更改DOM表示并覆盖原始文件HTML文件。现在重新加载页面会为我提供新版本的页面以及我所做的编辑。

但要应用我在前端进行的编辑，cheerio需要e.target在其DOM表示中找到正确的元素，然后更改text，因为很多页面上的元素没有id。

这是整个应用......

var
    express  = require( 'express' )
,   fs       = require( 'fs' )
,   cheerio  = require( 'cheerio' )
,   $        = ''
,   app      = express()
,   html     = ''
,   injected = "<script> \
                    $( 'body').on( 'click', function(e) {  \
                        $( e.target ).text( prompt('Enter new value:') );  \
                        $.post( '/edit', {el: $(e.target).serialize(), newVal: $(e.target).text()}, function(response) {  \
                            alert( response );  \
                        });  \
                    });  \
                </script>";

app.use( express.static(__dirname) )
app.use( express.bodyParser() )


app.get( '/', function( req, res ) {
    fs.readFile( process.argv[2], 'utf8', function(err, data) {
        $ = cheerio.load( data )
        err? console.log( err ): res.send( data.replace('</body>', injected + '</body>') )
    })
})

app.post( '/edit', function(req,res) {
    $( req.body.el ).text( req.body.newVal )
    fs.writeFile( process.argv[2], $.html(), function(err) {
        err? res.send( err ): res.send( 'file saved with changes!' )
    })
})

app.listen( 8080 )

然后我运行应用程序：

node cms.js "E:\Dropbox\sites\index.html"

理论上，这应该让我在页面中编辑index.html并且没有代码编辑器。但是将e.target恢复到服务器仍然是一个障碍。

解决方法：

我当前的解决方法是使用POST仅$( 'html' ).html()页面的整个HTML，因此无论单击哪个元素，我都可以完整地获取页面的新状态并覆盖现有页面这个新状态的文件。但我有浏览器扩展，注入自己的HTML / JS，我想避免在保存到文件之前剥离它们的痛苦过程。为此，我需要准确地告诉cheerio哪个元素已被click编辑。

Answer 1

Serialize适用于表单并生成类似于查询字符串的输出，single=Single&multiple=Multiple&multiple=Multiple3&check=check2&radio=radio1

您可能需要检查this answer，我使用它here来获取点击按钮的html：

HTML

<input id="b" type="button" value="click" />

JS

$("#b").click (function (e) {
    window.alert($(e.target).outerHTML());
});

jQuery.fn.outerHTML = function(s) {
    return s
        ? this.before(s).remove()
        : jQuery("<p>").append(this.eq(0).clone()).html();
};

如何将e.target传递回服务器

1 个答案: