使用ajax表单输入提交以停止页面刷新

时间:2012-10-21 19:11:52

标签: jquery ajax forms refresh

我希望使用表单将数据输入到我使用的电子商务购物车,但希望在用户点击表单中的“添加到购物车”按钮后不刷新页面。我发现了很多使用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的事实是否需要采用不同的方法呢?

提前感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

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