Ajax函数不工作

我有一个我想使用Ajax的联系人表单

我的contact.php脚本工作正常，查询字符串的构建也很好，但当我单击submit按钮时，页面只会刷新并在url栏中index.php之后显示查询字符串，而不是contact.php

这是我的代码：

<form name="myform">
                <input class="field" id="name" name="name" type="text" />
                <label for="name">Name *</label>

                <input class="field" id="email" name="email" type="text" />
                <label for="email">E-mail *</label>

                <label class="large" for="message">Message *</label>
                <textarea id="message" name="message" cols="10" rows="10"></textarea>

                <input class="submit" type="submit" value="Submit" onclick='ajaxFunction()'/>
            </form> 

<!-- 

}

//-->

---

有什么想法吗？

这可能是因为您的按钮是“提交”类型，可以自动提交表单。。您的ajax请求实际上也是并行的。结果取决于“sigup”元素所在的页面

---

请尝试将“button”替换为“button”，然后重试。

在“提交”按钮上输入返回值false

<input class="submit" type="submit" value="Submit" onclick='ajaxFunction(); return false;'/>

---

您的代码在ajax上提交，但也在提交时提交，因为您没有阻止表单不提交，将

return false

放在onclick事件上会阻止表单按照表单中给定的操作提交，在这种情况下，由于您没有对表单执行操作，因此在同一页面中提交表单。这就是为什么在url中将输入字段视为查询字符串。

将其设置为

onsubmit

处理程序，并添加一个

返回false

以禁用重定向

<form name="myform" onsubmit='ajaxFunction()'>
                <input class="field" id="name" name="name" type="text" />
                <label for="name">Name *</label>

                <input class="field" id="email" name="email" type="text" />
                <label for="email">E-mail *</label>

                <label class="large" for="message">Message *</label>
                <textarea id="message" name="message" cols="10" rows="10"></textarea>

                <input class="submit" type="submit" value="Submit"/>
            </form> 

---

可能吧。

您想提交什么（姓名、电子邮件、消息等？）？第二段代码是onsubmit处理程序吗？第二段代码是通过单击submit按钮调用的ajaxFunction。如果要发送所有字段，contact.php将处理输入验证

<form name="myform" onsubmit='ajaxFunction()'>
                <input class="field" id="name" name="name" type="text" />
                <label for="name">Name *</label>

                <input class="field" id="email" name="email" type="text" />
                <label for="email">E-mail *</label>

                <label class="large" for="message">Message *</label>
                <textarea id="message" name="message" cols="10" rows="10"></textarea>

                <input class="submit" type="submit" value="Submit"/>
            </form> 

//Browser Support Code
function ajaxFunction(){ 
var ajaxRequest; // The variable that makes Ajax possible!

try{
    // Opera 8.0+, Firefox, Safari
    ajaxRequest = new XMLHttpRequest();
} catch (e){
    // Internet Explorer Browsers
    try{
        ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try{
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e){return false;}
    }
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4){
        var ajaxDisplay = document.getElementById('signup');
        ajaxDisplay.innerHTML = ajaxRequest.responseText;
    }
}
var email = document.getElementById('email').value;
var name = document.getElementById('name').value;
var message = document.getElementById('message').value;
var queryString = "?email=" + encodeURIComponent(email);
queryString += "&name=" + encodeURIComponent(name);
queryString += "&message=" + encodeURIComponent(message); //included other parameters
ajaxRequest.open("GET", "/sign_up/sign_up_test.php" + queryString, true);
ajaxRequest.send(null);
return false;
}