Ajax技术的切换为输入框

最新推荐文章于 2023-04-27 15:13:06 发布

最新推荐文章于 2023-04-27 15:13:06 发布 · 85 阅读

文章标签：

#javascript #ViewUI

本文介绍了一个使用JavaScript实现的价格动态编辑功能。通过简单的JavaScript代码，页面上的价格可以被修改为输入框形式，允许用户输入新的价格，并通过AJAX发送请求到服务器进行更新。此功能包括从文本到输入框的转换、输入框失去焦点时触发的价格更改请求及服务器响应后的展示更新。

1.javascript代码:
<script type="text/javascript">
var req;
var gID;
function changeToInput(id) {
var oNP = document.getElementById(id);
var value = oNP.value;
oNP.outerHTML = "<input type='text' id='" + id + "' value='" + value + "' size='5' onblur='change(this.id)'>";
document.getElementById(id).focus();
}

function change(id) {
var oNP = document.getElementById(id);
var value = oNP.value;
gID = id;
init();
var url = "ChangePrice.jsp?id=" + escape(id) + "&normalprice=" + value;
req.open("GET", url, true);
req.onreadystatechange = callback;
req.send(null);

}

function init() {
if(window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
}

function callback() {
if(4 == req.readyState) {

if(200 == req.status) {

var oNP = document.getElementById(gID);
var value = oNP.value;
oNP.outerHTML = "<span style='background:gray' id='" + gID + "' value='" + value + "' onclick='changeToInput(this.id)'>" + value + "</span>";
}
}

}

</script>

2.<span id="<%=p.getId()%>" style="background:red" onClick="changeToInput(this.id)" value="<%=p.getNormalPrice() %>">
<%=p.getNormalPrice() %>
</span>