【问题标题】:Is it possible to send an AJAX request on load?是否可以在加载时发送 AJAX 请求?
【发布时间】:2011-03-28 16:40:10
【问题描述】:

你好我有两个家属选择框,第二个是onchange事件后流行的。

第一个加载了一个选定的值(selected=selected),我要问的是,可以在页面加载时发送请求,即我有选定的选项,只需发送请求.

Javascript

function getXMLHTTP() {
        var xmlhttp=false;  
        try{
            xmlhttp=new XMLHttpRequest();
        }
        catch(e)    {       
            try{            
                xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(e){
                try{
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch(e1){
                    xmlhttp=false;
                }
            }
        }

        return xmlhttp;
    }

    function getSubCat(catId,incat) {   
        var strURL="../Includes/subcatAds.php?SubCat="+catId+"&incat="+incat;
        var req = getXMLHTTP();

        if (req) {

            req.onreadystatechange = function() {
                if (req.readyState == 4) {
                    // only if "OK"
                    if (req.status == 200) {                        
                        document.getElementById('subcat').innerHTML=req.responseText;                       
                    } else {
                        alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                    }
                }               
            }           
            req.open("GET", strURL, true);
            req.send(null);
        }       
    }

如有需要,将提供 PHP

【问题讨论】:

  • 你确实需要使用 jQuery。

标签: php javascript ajax select


【解决方案1】:

您确实需要使用 jQuery 并将以上所有内容替换为:

function getSubCat(catId, incat)
  { 
    $('#subcat').load("../Includes/subcatAds.php?SubCat="+catId+"&incat="+incat);
  }


// Run on load:
$( function(){ 
               getSubCat(4, 5);
   });

它会做同样的事情。它设置为在加载时运行,您不必担心跨浏览器兼容性。

您会发现自己一直在使用 jQuery 选择器,并且您的代码将非常轻量级。如果您将 jQuery 库链接到 Google 服务器,人们甚至不必下载它。大多数人已经在缓存中了。

【讨论】:

  • @vol7ron Stack Overflow 不是咆哮的地方。
  • @jartaud jQuery 让您可以非常轻松地将侦听器函数添加到 DOM 元素上的常见事件: $('#idOfSomeInputElement').change(function(event){ getSubCat($(this).val() , $('#idOfOtherInput').val());})
  • 这将在 idOfSomeInputElement 的值发生变化时调用匿名函数。匿名函数将调用您的函数,传递此输入元素的值以及您页面上可能拥有的另一个元素的值。
  • 您还可以指定 Ajax 请求失败时的回调,就像您在示例中所做的那样。检查visualjquery.com 以获得快速的 jQuery API 参考。相信我,你会喜欢的。
  • 是的,但是你必须使用 .ajax() 方法而不是我使用的 .load() 快捷方法,这过于简单了。看看这个 jQuery Ajax 教程:articles.sitepoint.com/article/ajax-jquery
【解决方案2】:

您可以像这样使用onload 事件:

window.onload = function(){
  var selectbox = document.getElementById('select box id');

  if (selectbox.value !== ''){
    // your code to send ajax requests...
  }
};

代码在页面加载后立即运行。然后它检查指定选择框的值是否不为空,这意味着选择了某些东西;在这种情况下,您将代码用于将执行的 ajax 请求。

【讨论】:

【解决方案3】:

由于您在从用户获得任何输入之前执行此操作,因此您可以在 DOM 完成之前、页面完全加载之前立即调用服务器,然后等待 onload 事件发生,或者您会收到 DOM 树已完成的通知,然后您可以安全地更改任何 html 元素的值。

这样,您甚至不必在开始请求之前让用户等待浏览器完成加载,这将改善用户体验。

【讨论】:

  • 感谢您的回答,您的意思是应用 Sarfraz sn-p??
  • @jartaud - 我不熟悉“Sarfraz sn-p”这个名字,所以我无法回答那部分。我的想法是尽你所能加快初始化速度。
  • Sarfraz 只是一个 SOV 用户,他已经回答并放了一段代码。
  • @jartaud - 您将使用您的代码来获取信息,并在 onload 事件发生时设置一些变量,因此您可以查看它以及设置的时间(真/假)然后你可以设置选择框的值。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2011-03-10
  • 2010-11-13
  • 1970-01-01
  • 2016-04-14
  • 1970-01-01
  • 2012-07-17
  • 2013-05-24
相关资源
最近更新 更多