Question

我有一个联系表单，我想使用Ajax。

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

这是我的代码：

<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> 

<!--

//浏览器支持代码 function ajaxFunction（）{ var ajaxRequest; //使Ajax成为可能的变量！

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){
            // Something went wrong
            alert("Your browser broke!");
            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 queryString = "?email=" + email;
ajaxRequest.open("GET", "/sign_up/sign_up_test.php" + queryString, true);
ajaxRequest.send(null);

}

// - ＆GT;

有什么想法吗？

Answer 1

在提交按钮上输入false

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

您的代码是在ajax上提交的，但也是在提交时提交的，因为您没有阻止您的表单被提交，将return false放在onclick事件上会阻止您的表单根据表单中给出的操作提交，这种情况在同一页面中，因为您没有对表单执行操作。这就是你在网址中看到输入字段为查询字符串的原因。

Answer 2

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

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

Answer 3

将其设为onsubmit处理程序，并添加return 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>

〜

//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;
}

也许

Ajax功能不起作用

3 个答案: