静态页面通过AJAX+asp实现数据查询功能
生活随笔
收集整理的這篇文章主要介紹了
静态页面通过AJAX+asp实现数据查询功能
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
HTML代碼
<!doctype html>
<html><head>
<meta charset="utf-8">
<script src="jquery-3.2.1.min.js"></script>
<script src="json2.js"></script>
<script>
$(function(){
//初始化獲取列表
$.ajax({
type:'GET',
url:'book_bd.asp',
dataType:"text",
async:false,
//連接json數據并返回數據
success: function(data_list){
var obj_line=$.parseJSON(data_list);
var option="<option value=''>------請選擇------</option>"
for(i=0;i<obj_line.length;i++)
{
option=option+"<option value="+i+">"+obj_line[i].BookName+"</option>"
}
$("select[name='book']").html(option)
}
})
//當選擇列表時觸發查詢事件
$("select").change(function(){
//獲取當前id
id=$(this).val()
$.ajax({
type:"get",
url:'book_bd.asp',
dataType:"text",
async:false,
success: function(data){
var obj=$.parseJSON(data);
book_info="<br>書籍名："+obj[id].BookName+"<br>剩余數量："+obj[id].BookNum+"<br>單價："+obj[id].BookPrice;
$(".book").html(book_info);
}
})
})
})
</script>
<title>無標題文檔</title>
</head>
<body>
<select name="book">
</select>
<div class="book">
</div>
</body>
</html>
數據保存頁面
<%
response.Charset="GB2312"
book="Html|javascript|Json|ASP|PHP"
num="100|12|43|93|400"
price="30$|40$|10$|30$|60$"
newBook=split(book,"|")
newNum=split(num,"|")
newPrice=split(price,"|")
b="<br>"
response.Write("[")
for i=0 to ubound(newBook)
response.Write("{")
response.Write("""BookName"""&":"&""""&newBook(i)&""""&",")
response.Write("""BookNum"""&":"&""""&newNum(i)&""""&",")
response.Write("""BookPrice"""&":"&""""&newPrice(i)&"""")
response.Write("}")
if i=Ubound(newBook) then
else
response.Write(",")
end if
next
response.Write("]")
%>
PS：后臺我用的是ASP，因為查詢時可以實現數據列表通過程序生成格式化文本（json）。
總結
以上是生活随笔為你收集整理的静态页面通过AJAX+asp实现数据查询功能的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 多样加密功能全面升级细数猖獗作恶“五宗罪
- 下一篇： 理解Spring 容器设计理念