Onclick Ajax无法正常工作

Question

当我单击提交按钮时，textarea标签的信息应使用ajax发送给邮件。任何人都可以helpme.thankyou。

$(document).on("click", "#submit-btn", function() {

Answer 1

问题是因为您已经钩住了Submit按钮的click事件，而不是form的submit事件。 这意味着该表单仍然可以正常提交，并且来自AJAX请求的响应将被忽略。

如前所述，挂钩到form的submit事件以解决问题，并使用preventDefault()停止标准表单的提交：

$(document).on("submit", "#yourFormElement", function(e) {
    e.preventDefault();
    $.ajax({
        url: "https://ivr.callxl.com/callXLWeb/SendingEmail",
        type: 'POST',       
        contentType: "application/json; charset=utf-8",
        data: { comment: $("#cmessage").val() },
        dataType: "json",
        success: function (data, textStatus, jqXHR) {
            if (data.success) {
                alert("successfully sent");
            } else {
                // handle error here...
            }
        },
        error: function(jqXHR, textStatus, errorThrown){
            alert(jqXHR.responseText);
            console.log("Something really bad happened " + textStatus);
            $("#errorResponse").html(jqXHR.responseText);
        }
    });
});

还要注意，我删除了async属性（为true ）是默认设置，并为data属性提供了一个对象，以便为您编码值。

您还应该确保所调用的域支持跨域请求，否则您的请求将被Same Origin Policy阻止。 如果是这种情况，那么您将需要在服务器端发出请求。

Answer 2

我认为您应该这样做。

$("#submit-btn").on("click",function() {
    $.ajax({
        url: "https://ivr.callxl.com/callXLWeb/SendingEmail",
        type: 'POST',       
        contentType: "application/json; charset=utf-8",
        data: { comment: $("#cmessage").val() },
        dataType: "json",
        success: function (data, textStatus, jqXHR) {
            if (data.success) {
                alert("successfully sent");
            } else {
                // handle error here...
            }
        },
        error: function(jqXHR, textStatus, errorThrown){
            alert(jqXHR.responseText);
            console.log("Something really bad happened " + textStatus);
            $("#errorResponse").html(jqXHR.responseText);
        }
    });
});