使用 TypeScript 执行异步 AJAX 调用
将产品添加到购物车
以下示例演示如何使用 AJAX 和 TypeScript 异步地将产品(或任何内容)添加到数据库表。
declare var document;
declare var xhr: XMLHttpRequest;
window.onLoad = () =>
{
Start();
};
function Start()
{
// Setup XMLHttpRequest (xhr).
if(XMLHttpRequest)
{
xhr = new XMLHttpRequest();
}
else
{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
AttachEventListener(document.body, "click", HandleCheckBoxStateChange);
}
function AttachEventListener(element: any, e, f)
{
// W3C Event Model.
if(element.addEventListener)
{
element.addEventListener(e, f, false);
}
else if(element.attachEvent)
{
element.attachEvent("on" + e, (function(element, f)
{
return function()
{
f.call(element, window.event);
};
})
(element, f));
}
element = null;
}
function HandleCheckBoxStateChange(e)
{
var element = e.target || e.srcElement;
if(element && element.type == "checkbox")
{
if(element.checked)
{
AddProductToCart(element);
}
else
{
// It is un-checked.
// Remove item from cart.
}
}
else
{
break;
}
}
AddProductToCart(e)
{
var element = <HTMLInputElement>document.getElementById(e.id);
// Add the product to the Cart (Database table)
xhr.onreadystatechange = function()
{
if(xhr.readyState == 4)
{
if(xhr.status == 200)
{
if(element != null)
{
console.log("200: OK");
}
else
{
console.log(":-(");
}
}
else
{
// The server responded with a different response code; handle accordingly.
// Probably not the most informative output.
console.log(":-(");
}
}
}
var parameters = "ProductID=" + encodeURIComponent(e.id) + "&" + "Action=Add&Quantity=" + element.value;
xhr.open("POST", "../Cart.cshtml");
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.setRequestHeader("Content-length", parameters.length.toString());
xhr.setRequestHeader("Connection", "close");
xhr.send(parameters);
return e.id;
}
为了使此示例完整,请更新服务器端代码以将此数据实际插入数据库。上面的代码假设你正在使用 C#并拥有 Cart.cshtml
文件。但是,只需用 php
替换 cshtml
,然后使用你选择的语言编写自己的服务器端逻辑。