0

我有一个前端，我在其中跟踪已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，因为页面上的许多元素没有ids。

这是整个应用程序...

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编辑了哪个元素。

4

1 回答 1

0

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

您可能想检查这个答案，我在这里使用它来获取单击按钮时的 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();
};
于 2013-08-10T14:32:13.297 回答