Question

我目前正在一个网站上工作，你可以学习语言，并且我真正想要的完形填空功能有问题。起初我使用JSP为网站生成HTML，因此它必须是一个只需要JS和HTML的解决方案。

这是我目前的代码：

＆＃13;

span.edit {
    background-color: #f4f4f4;
	color: #000000;
	font-weight: bolder;
    border-color: #f4f4f4 #f4f4f4 #000000;
    border-style: solid;
    border-width: 1px;
    display: inline-block;
    height: 25px;
    min-width: 80px;
    padding: 1px;
    vertical-align: baseline;
}

span.edit[contenteditable]:empty::before {
    content: attr(data-placeholder);
	font-weight: lighter;
    font-style: italic;
	color: #848484;
}

.sentence{
	min-width: 250px !important;
}

＆＃13;

<div id="cloze">
	<h2>Cloze</h2>
	<div class="text">
		<p>Lorem <span contenteditable="true" data-placeholder="eingabe" id="var1" class="edit" title=""></span> dolor sit amet <span contenteditable="true" data-placeholder="eingabe" id="var2" class="edit" title=""></span>. Stet clita kasd gubergren, no sea <span contenteditable="true" data-placeholder="eingabe" id="var3" class="edit" title=""></span>.</p>
		<p>Dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.</p>
		<a href="#">Send to site</a>
	</div>
</div>

＆＃13;

现在我的问题是：如何将span-fields的内容发送到网站，以便我可以从中获取参数？

我知道你可以使用带有输入字段的表单，但我认为如果你的文字很长，里面有一些单词，那就不好了。

感谢您的回答！

Answer 1

使用按钮代替锚标记 <button type="button" id="submit">Send to site</button>

var btn = document.getElementById('submit');

// Bind Click event to the button/trigger
btn.addEventListener('click', function () {
   // Retrieve the span value
   var var1 = document.getElementById('var1').textContent;
   var var2 = document.getElementById('var2').textContent;
   var var3 = document.getElementById('var3').textContent;

   // Send the parameters here
   console.log(var1, var2, var3);
});

Answer 2

使用jQuery或本机javascript ajax功能中的$ .ajax将值发布到服务器文件，该文件将在点击<a>标记时处理范围数据。

还要确保检索span元素值并将其作为POST发送，以避免最大限制大小。

Answer 3

我最终在按钮上使用了一个类，在点击时触发并解析了所有类的“编辑”字段。但是我仍然有问题通过POST将参数发送到我的网站。有什么想法？

$(".proofCloze").on("click", function(e){
    var parameters = '';
    $('.edit').each(function() {
        parameters = parameters + "'"+$(this).attr("id") + "':'" + $(this).html() + "', ";
    });
    parameters = parameters.substring(0, parameters.length-2);
    parameters = '{'+parameters+'}';
    alert('Address: '+$(this).attr("href")+"\nParameter: "+parameters);
});

通过参数将span内容发送到站点

3 个答案: