使用Ajax停止页面刷新的表单输入提交

Question

我希望使用表单将数据输入到我使用的电子商务购物车，但希望在用户单击“添加到购物车”按钮后不刷新页面的情况下执行此操作从形式。我发现很多使用jQuery提交没有页面刷新的表单的示例，例如： Submit A Form Without Page Refresh using jQuery 但是，尽管尝试了几个不同的解决方案，但仍然无法使其工作。

我的形式：

<form method="POST" id="formname"> 
<input name="userid" id="userid" value="00000000" type="hidden"> 
<input name="product" id="product" value="product name" type="hidden"> 
<input name="price" id="price" value="1.00" type="hidden"> 
<input name="qty" id="qty" value="1" type="hidden"> 
<input name="nocart" id="nocart" value="1" type="hidden"> 
<input name="units" id="units" value="1" type="hidden"> 
<input name="scode" id="scode" value="xxxx" type="hidden"> 
<input name="hash" id="hash" value="xxxxxxxx" type="hidden"> 
<input name="return" id="return" value="http://www.returnaddresshere" type="hidden"> 
<input type="submit" value="Add to cart"> 
</form> 

和脚本：

<script src="jquerylocation.js"></script> 
<script> 
$(document).ready(function(){ 
$("form#formname").submit(function(event) { 
    event.preventDefault(); 
    var userid = $("#userid").val(); 
    var product = $("#product").val(); 
    var price = $("#price").val(); 
    var qty = $("#qty").val(); 
    var nocart = $("#nocart").val(); 
    var units = $("#units").val(); 
    var scode = $("#scode").val(); 
    var hash = $("#hash").val(); 
    var return = $("#return").val(); 

    $.ajax({ 
     type: "POST", 
     url: "http://ww#.aitsafe.com/cf/add.cfm", 
     data: "userid=" + userid + "&product=" + product "price=" + price + "&qty=" + qty "nocart=" + nocart + "&units=" + units "scode=" + scode + "&hash=" + hash + "&return=" + return, 
     success: function(){alert('order added to cart');} 
    }); 
}); 
}); 
</script> 

我不知道问题出在哪里，我是很新的JavaScript和jQuery。我见过的所有例子都使用php来处理来自表单的输入;电子商务使用coldfusion的事实需要一种不同的方法吗？

非常感谢您的帮助。

Answer 1

url: "http://ww#.aitsafe.com/cf/add.cfm",是这里的罪魁祸首
您无法发送Ajax请求到另一个域，而不是您的应用程序部署到的另一个域。这是因为在网页浏览器中实现了Same Origin Policy - 一种安全措施。