Question

我正在尝试开始学习AJAX，而且我已经遇到了一个小问题。所以我开始简单，只是尝试弹出一个警告，显示用户在文本字段中键入的字符串的长度。

HTML：

<form action="/scripts/addemail_fb.php" method="post">
<input type="text" name="email" value="Enter your email here!" />
<input id="submit" type="submit" name="submit" value="Go!"     onClick="check(this.form.email.value);"/>
</form>

JS：

function check(email) {


    if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
    }


    else if (window.ActiveXObject) {
        req = new ActiveXObject("Microsoft.XMLHTTP");
    }

    email=encodeURIComponent(email);

    req.open("POST","/scripts/addemail.php");

    req.setRequestHeader(
        'Content-Type',
        'application/x-www-form-urlencoded; charset=UTF-8');

    req.send(email);

    req.onreadystatechange=function() {

        if(req.readyState==4) {

            result = req.responseText;

            alert("The length of the email is:" + result);

        }

    }

    return false;

}

PHP（addemail.php）：

<?php
function check_email($input) {
     return strlen($input);
}
$email = urldecode(implode(file('php://input')));
$result = check_email($email);
echo $result;
?>

是的，我在该部分中包含了JS。我几乎直接从教程中得到了这个，所以我不确定是怎么回事。我的测试浏览器是Safari，但我也试过FF。很抱歉这是显而易见的，因为这是我第一次尝试AJAX。谢谢！

编辑：抱歉，问题是它只是转到action =“addemail_fb”而不是JS中描述的文件。

-iMaster

Answer 1

将onclick处理程序更改为onsubmit（在表单上），如下所示：

<form onsubmit="return check(this.email.value);"> ... </form>

另外，请在致电req.onreadystatechange

之前设置req.send ()

Answer 2

内联javascript是不好的做法。这个解决方案可能看起来有点复杂但如果你将它实现到你的其余脚本中，那么你会发现它更优雅。 JS库使用类似的方法，但如果你不能使用它，那么改为：

onDomReady(function(){

    var oForm = document.getElementById("myform");

    addListener(oForm,"submit",function(){

        removeListener(oForm,"submit",arguments.callee);
        // do stuff here

    });

});

// Cross-browser implementation of element.addEventListener()
function addListener(element, type, expression, bubbling)
{
    bubbling = bubbling || false;

    if(window.addEventListener) { // Standard
        element.addEventListener(type, expression, bubbling);
        return true;
    } else if(window.attachEvent) { // IE
        element.attachEvent('on' + type, expression);
        return true;
    } else return false;
}

// Cross-browser implementation of element.removeEventListener()
function removeListener(element, type, expression, bubbling)
{
    bubbling = bubbling || false;

    if(window.removeEventListener)  { // Standard
        element.removeEventListener(type, expression, bubbling);
        return true;
    } else if(window.detachEvent) { // IE
        element.detachEvent('on' + type, expression);
        return true;
    } else return false;
}

function onDomReady(fn) {

    // Mozilla, Opera and webkit nightlies currently support this event
    if ( document.addEventListener ) {

        // Use the handy event callback
        document.addEventListener( "DOMContentLoaded", function(){

            document.removeEventListener( "DOMContentLoaded", arguments.callee, false );
            fn();


        }, false );

    // If IE event model is used
    } else if ( document.attachEvent ) {

        // ensure firing before onload,
        // maybe late but safe also for iframes
        document.attachEvent("onreadystatechange", function(){
            if ( document.readyState === "complete" ) {
                document.detachEvent( "onreadystatechange", arguments.callee );
                fn();
            } else {    
                setTimeout( arguments.callee, 0 );
                return;
            }
        });

    } else {

        // A fallback to window.onload, that will always work
        addListener(window,"load",fn);

    }

}

Answer 3

问题在于：

You are doing it wrong.

jQuery就是答案。

但是说真的。尝试使用jQuery，因为它会让你比切成一块南瓜派更容易。

AJAX是Javascript中最烦人的主题之一，jQuery和其他库已经消失，使问题更容易处理。此外，jQuery还有许多其他很棒的功能，这些功能使得使用Javascript更加精彩。

在jQuery中，整个代码看起来像：

 $.post("/scripts/addemail.php", {email_address:email}, function(data){
    alert("The length of the email is:"+data);
 });

说到南瓜饼.....

现在我已经完成了jQuery的公共服务器公告，你需要检查Javascript控制台（Firefox中的Ctrl + Shift + J），然后运行该页面。它将为您提供任何您必然会遇到的错误，例如语法错误或其他各种错误。

如果你可以去那里然后给我们弹出任何错误信息，我们将更有可能解决你的问题。

简单的AJAX代码无法识别

3 个答案: