没有表单元素的jQuery AJAX POST？

Question

我没有很多关于AJAX调用的经验,但我的例子似乎很简单(除了我没有使用元素)并且它让我想知道我是否正在进行错误的调用,或者如果你不能在没有表单的情况下进行AJAX POST.

我正在使用的按钮的HTML是这样的:

<button class="btn btn-primary btn-small" id='saveAsNewName' onclick=saveAsNewName()>Save As</button>

我的JS:

function saveAsNewName(str, id) {
var values = {
        'str'       : str,
        'id'        : id,
};
$.ajax({
    url: "saveAsNewName.php",
    type: "POST",
    data: values,
    dataType: 'JSON',
    success: function(data){
        alert("success" + data);
    }
})
.done(function(data) {
    alert("success" + data);
})
.fail(function(data) {
    alert("failure" + data);
});
}

而且,就目前而言,我的php只是用于测试是否有效:

echo json_encode($_POST['id']));

每次点击我的按钮,我都会收到失败通知.是否有一个特定的解决方法,我不需要使用表单,或者我是否弄乱了基本的.ajax示例？

编辑,要明确:我正在使用另一组jQuery来不断更新saveAsNewName()的参数.结果如下:

onclick="saveAsNewName("wheyjuice 555", "33541")"

作为这个jQuery代码的结果:

$(document).on('keyup',"[class*=editSimNameField]", function() { 
    var newText = $(this).val(); var id = $(".loadWindow").val();       
    $("#saveAsNewName").attr('onclick', 'saveAsNewName(\"' + newText + '\", \"' + id + '\")'); 
}); 

Answer 1

你没有saveAsNewName()在onclick中向你的函数传递任何东西,你只是运行该函数.因此,str并且id是空值.

这样的事情怎么样,你从ID获取元素的值:

function saveAsNewName() {
    var values = {
            'str': document.getElementById('elem1').value,
            'id': document.getElementById('elem2').value
    };
    $.ajax({
        url: "saveAsNewName.php",
        type: "POST",
        data: values,
    });

    ...

}

显然,有无数其他方法可以获得价值.

此外,无论HTML标记,表单存在等,您都可以POST到URL.

编辑:看到你关于onclick动态更新属性的评论,我建议你做两件事,让你自己解决这个问题.这些说明适用于Chrome,但在Firefox中通过Firebug也可以使用.

1)使用此console.log()功能values验证您是否将数据发送到您认为正在发送的功能.例如console.log(values),然后在开发人员工具中检查控制台.

2)打开开发人员工具并使用网络选项卡检查AJAX调用.您实际上可以实时看到呼叫,并可以检查它以查看发送了哪些数据以及接收了哪些数据.