使用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 来处理来自表单的输入；电子商务使用冷融合这一事实是否需要不同的方法？

提前感谢您的帮助。

Answer 1

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