jQuery Ajax脚本只有在点击页面上的任何地方后才开始工作


jQuery Ajax Script only starts working after a click anywhere on the page

我使用通过Smarty模板加载的搜索输入字段。Smarty else包含具有getmyresult()功能的search.js脚本。该函数将输入值传递给php中的回调脚本。

我在Firebug中没有错误,一切都是完美的,因为它应该为我做的。但是在Firebug的网络模式下,我没有xhr的消息。

当该行为发生时,控制台消息我

选项gw_suggest.php状态200 OK

代替$post。我没有从剧本中得到答案。但是php脚本似乎是在每次按键事件之后启动的。

我检查了这一点,从gw_suggest.php里面设置一个cookie,这是我的回调脚本。

出现的问题是,许多用户使用不同的浏览器需要在网页上的任何地方点击一次链接。在我点击任何地方后,一切都很完美。

这是已知的问题吗?是否有解决方案或正确方向的提示?

所以我改变了一点输入,只有ID的名字,但结果是一样的。这列出了实际对应的输入字段:

<input id="inputString"  placeholder="..." onkeyup="lookup(this.value)"     
       onfocus="lookup(this.value)" autocomplete="off" size="30">
<div id="resultpanel"></div>

search.js中加载的内容:

var delay = null;
var XHR = null;
function lookup(inputString) {
    if(delay) clearTimeout(delay);
    if(inputString.length == 0) {
        $('#resultpanel').fadeOut();
    } else {
        delay = setTimeout(function(){
            if(XHR) XHR.abort();
            XHR =$.post("gw_search/gw_suggest.php", { type: "0", lang: "2", term: ""+inputString+""}, function(data) { // JQuery Ajax Call
                $('#resultpanel').fadeIn();
                $('#resultpanel').html(data);
            })
        }, 220);//Delay in Millisec
    }
}

所以也许没有错,我可以看到吗??

该问题仅在页面第一次加载时发生。就像你重置浏览器一样。因此,外部用户无法搜索数据库。在DOM中的任何位置单击任何标记后,xhr开始完美地完成这项工作。我不明白为什么。这对我来说似乎很神秘,在网上没有人发表过相关的问题。对不起,我真的需要更多Ajax经验丰富的家伙的一点帮助。这通常不是我的重点。但是整个项目都到了最后期限,只有这个问题会扼杀这个项目。这是一个真正的问题。

我用firebug检查了一切。但是对于每个字母,控制台中只有200 OK消息,它应该通过XHR向我的响应PHP脚本触发keyup事件。回调中似乎没有结果。神秘的!

我现在能够自己检测和解决问题了。在Firebug中,我发现,只有在第一次加载页面(如新用户)的情况下,通过AJAX的POST和GET请求才被视为OPTIONS请求。

这个问题的修复已经由Chad Clark在以下线程中发布:

https://stackoverflow.com/a/4045448/2263540

看看这个,当类似描述的行为必须被修复时。

确实不容易理解为什么同一服务器上的回调脚本受到跨站点脚本安全技术的保护。

所以这里的代码我放入我的callbackscript的顶部行,它解决了我的搜索函数工作无处不在。

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
header('Access-Control-Max-Age: 1000');
if(array_key_exists('HTTP_ACCESS_CONTROL_REQUEST_HEADERS', $_SERVER)) {
header('Access-Control-Allow-Headers: '
       . $_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']);
} else {
header('Access-Control-Allow-Headers: *');
}
if("OPTIONS" == $_SERVER['REQUEST_METHOD']) {
exit(0);
}

感谢Chad Clark !