使用Ajax，jQuery和API预览表单结果

Question

所以我有一个表单，客户可以为我的产品生成报价。但是我希望他们能够在提交报价之前预览报价成本。我有一个像这样构建的API

sitename.com/api/cart?model=1&height=700&width=550&cable_length=1&quantity=2&finish=polished_brass&rails=4&exit=top&concealed=0

get变量与表单元素名称相同。当您单击按钮时，API只会检索我想要在表单旁边显示的数字。

我该怎么做呢？我是Ajax的新手：/

Answer 1

不确定您的问题是如何传递链接中的表单数据，或者如何处理返回的结果以显示它。无论如何，你可以：

$('#myform').serialize();

返回以url格式编码的表单值，然后在jQuery.ajax()请求的url上使用它：

$.ajax('sitename.com/api/cart?' + $('#myform').serialize(), {
    dataType: 'html',
    success: function(html) {
        // The result is an HTML page, just paste it inside the "result" div:
        $('#result').append(html);
    }
});