java - 如何在onchange中同时调用两个javascript？

Question

我在onChange中调用两个java脚本，它们被称为struts的两个不同的 Action 。

代码如下:

<html:select property="countryid" onchange="retrieveURL('showStates.do?country=' + this.value);retrieveURL2('showStatesNotinGroup.do?country=' + this.value);">



     function retrieveURL(url)
   {
    if(window.XMLHttpRequest)
    {
        // Non-IE browsers
        req = new XMLHttpRequest();       
        req.onreadystatechange = processStateChange;
        try {
             req.open("GET", url, true);
        } catch (e) {
             alert(e);
        }
        req.send(null);
    } else if (window.ActiveXObject) { // IE

         req = new ActiveXObject("Microsoft.XMLHTTP");
        if (req) {
             req.onreadystatechange = processStateChange;
             req.open("GET", url, true);
             req.send();
         }
    }

   }
   function processStateChange() {
        if (req.readyState == 4) { // Complete
        if (req.status == 200) { // OK response

                document.getElementById("box2View").innerHTML = req.responseText;
            } else {
             alert("Problem: " + req.statusText);
            }
        }
    }

function retrieveURL2(url)
    {
        if (window.XMLHttpRequest) {
            // Non_IE broeser
            req = new XMLHttpRequest();
            req.onreadystatechange = processCityChange;
            try {
                req.open("GET", url, true);
            } catch (e) {
                alert(e);
            }
            req.send(null);         
        }  else if (window.ActiveXObject) {
            //IE
            req = new ActiveXObject("Microsoft.XMLHTTP");
            if (req) {
                req.onreadystatechange = processCityChange;
                req.open("GET", url, true);
                req.send();
            }
        }       
   }

   function processCityChange(){
    if (req.readyState == 4) { //Coplete
        if (req.status == 200) { // OK responce
            document.getElementById("box1View").innerHTML = req.responseText;
        }else {
            alert("Problem: " + req.statusText);
        }
    }   
   }

对于此操作映射是:

<action path="/showStates" type="com.dss.action.ShowStatesAction" validate="false" name="stateForm">
            <forward name="success" path="/showStates.jsp"/>
        </action>       
        <action path="/showStatesNotinGroup" type="com.dss.action.ShowStatesAction" validate="false" name="stateForm">
            <forward name="success" path="/showStatesNotInGroup.jsp"/>
        </action>       
    </action-mappings>

当我一项一项地运行它来检查它时，它工作正常，但是当我把它放在一起时，它给了我一个意想不到的结果。

我想调用第一个java脚本并检查它是否成功，然后在同一个onChange上调用第二个脚本。

Answer 1

您需要声明您的 req 变量的作用域为每个函数，否则两个函数将使用相同的全局变量。您还可以考虑使用 jQuery 等框架来执行此操作，因为您将拥有经过充分测试、独立于浏览器的代码，而您只需花费更少的精力。

function retrieveURL(url)
{
    var req; // <-- declare local so the scopes don't conflict
    if(window.XMLHttpRequest)
    {
    ...
}

function retrieveURL2(url)
{
    var req; // <-- declare local so the scopes don't conflict
    if(window.XMLHttpRequest)
    {
    ...
}

还有 jQuery

<script type="text/javascript" src=...jquery_location, local or via Google CDN
<script type="text/javascript">
     $(function() {
         $('#countryid').on('change', function() { // single handler for both
              var $this = $(this), // cache jQuery object for later use
                  val = $this.val(); // cache value
              $.get('showStates.do?country=' + val, function(result) {
                    $('#box2View').html(result);
              });
              $.get('showStatesNotinGroup.do?country=' + val, function(result) {
                    $('#box1View').html(result);
              });
          });
      });
</script>