Question

由于标题声明我的Ajax调用实际上导致表单被提交到其默认操作，为什么？我以前从未遇到过这种情况，我所有其他的ajax调用都没有这样做过。

function newAjax(t,u){ //t = type(post/get), u = url
    var resource = null;
    if (window.ActiveXObject) { 
        resource = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    else if (window.XMLHttpRequest) { 
        resource = new XMLHttpRequest(); 
        resource.overrideMimeType('text/html');
    }
    resource.open(t,u,false);
    resource.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
    return resource;
}

function send_newsletter(){
    formObj = document.getElementById("news_form");
    var inputs = formObj.getElementsByTagName("INPUT");
    var parameters = "";
    for(i = 0; i < inputs.length; i++){
        parameters += inputs[i].name+"="+encodeURI(inputs[i].value);
        if(i != inputs.length-1){
            parameters += "&";
        }
    }
    var url = "whereitshouldbegoing.com";
    var ajax = newAjax("POST",url);
    ajax.onreadystatechange = ajaxResult;
    ajax.setRequestHeader("Content-length", parameters.length);
    ajax.setRequestHeader("Connection", "close");
    ajax.send(parameters);
}

这一切都可以正常运行.send行，这是导致表单提交的bugger（我也不知道ajax请求是否真的脱落）。

使用onclick =“send_newsletter（）”从输入类型=“图像”元素调用send_newsletter函数

请不要告诉我使用jQuery或其他库，尽我所能，我们不能使用任何外部库，公司指南等等。

Answer 1

您是否使用提交按钮致电send_newsletter？

由于您正在对服务器进行同步调用，因此未调用

onreadystatechange回调函数'ajaxResult'：

resource.open(t,u,false);

如果您希望调用ajaxResult，请将其更改为：

resource.open(t,u,true);

现在这就是我所看到的。您必须提供更多信息，例如如何致电send_newsletter？

编辑 :(以下作者评论）

INPUT类型image是 图形提交按钮。

Answer 2

“image”类型的输入将behave the same as a submit button。使用锚点或按钮类型输入来触发您的方法。

<input type="button" onclick="send_newsletter()" value="Send" />

<button onlclick="send_newsletter()">... </button>

<a href="#" onclick="send_newsletter(); return false;"><img src="... /></a>

Ajax请求结果也以提交的形式提交

2 个答案: