Question

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

代码如下：

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

Answer 2

我找到了做到这一点并且工作正常的方式，所以我分享你的方式

<html:select property="countryid" onchange="retrieveURL(this.value);">

，java脚本就像

function retrieveURL(url){

var newUrl = 'showStates.do?country='+url; 

// do some thing


retrieveURL2(url);

}

function retrieveURL2(url){

var newUrl2 = 'showStatesNotinGroup.do?country='+url; 
// do same thing

}

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

2 个答案: