这是一个可以通过点击商品数量,即时地修改其数量的AJAX代码段,供学习使用
<span id="<%=p.getId()%>" style="background:red" οnclick="changeToInput(this.id)" value="<%=p.getNormalPrice() %>">
<%=p.getNormalPrice() %>
</span>
<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' οnblur='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 + "' οnclick='changeToInput(this.id)'>" + value + "</span>"; } } } </script>