php - 为什么我的ajax加载了两次相同的功能？

Question

我正在尝试创建一个订阅表单，基本上可以让您选择一个游戏，然后加载该游戏的一堆订阅价格。到目前为止，一切都很完美。问题是，当我尝试输入 3 个单选按钮来选择 1 个月/6 个月/1 年的付款时，我在下拉列表中使用 ajax onchange=""调用的函数似乎加载了两次，并且无法访问内容.

第一次，它工作得很好，它回显信息，并计算一切。但第二次，它只是给了我一个 php 错误。

我已经弄清楚发生了什么，它使用请求的订阅价格 id (alert(planId);) 调用该函数一次，并且它完全按照我想要的方式回显。然后它只是再次调用该函数，但是alert(planId);返回未定义的结果，并且 echo 是一个带有错误代码的新行(这是本来应该发生的)，表示 sql 请求由于第 78 行而失败。

这让我回到了我的问题，为什么 AJAX 会调用该函数两次？

var xhr = {
    planData:function(){
        if (httpRequest.readyState==4) {
            if (httpRequest.status==200) {
                document.getElementById('plan_select').innerHTML = 'ready';
                var price = httpRequest.responseText;
                //alert(price);
                var six = 6*parseInt(price);
                var year = 12*parseInt(price);
                if (document.getElementById('diff')) {
                    var ctnt = '';
                    ctnt += '<input class="radio" type="radio" name="typeOfPlan" value="one" />&nbsp;';
                    ctnt += 'Month to month subscription plan ($'+price+' USD per month) &nbsp;';
                    ctnt += '<input class="radio" type="radio" name="typeOfPlan" value="six" />&nbsp;';
                    ctnt += 'Six months subscription plan ($'+six+' USD per 6 months) &nbsp;';
                    ctnt += '<input class="radio" type="radio" name="typeOfPlan" value="year" />&nbsp;';
                    ctnt += 'One year subscription plan ($'+year+' USD per year)';
                    document.getElementById('diff').innerHTML = ctnt;
                } else {
                    var yearPrices = document.getElementById('order').insertRow(3);
                    var cell = yearPrices.insertCell(0);
                    cell.id='diff';
                    cell.colSpan = 3;
                    var ctnt = '';
                    ctnt += '<input class="radio" type="radio" name="typeOfPlan" value="one" />&nbsp;';
                    ctnt += 'Month to month subscription plan ($'+price+' USD per month) &nbsp;';
                    ctnt += '<input class="radio" type="radio" name="typeOfPlan" value="six" />&nbsp;';
                    ctnt += 'Six months subscription plan ($'+six+' USD per 6 months) &nbsp;';
                    ctnt += '<input class="radio" type="radio" name="typeOfPlan" value="year" />&nbsp;';
                    ctnt += 'One year subscription plan ($'+year+' USD per year)';
                    cell.innerHTML = ctnt;
                }
            }
        }
    },
    updatePrice:function(planId){
        alert(planId);
        xhr.ajaxCall('GET', 'requests.php?action=getprices&planId='+planId, null, true, xhr.planData);
    },
    ajaxCall:function(method,url,postData,async,handler) {
        httpRequest = new XMLHttpRequest();
        httpRequest.open(method,url,async);
        if (postData != null)
            httpRequest.setRequestHeader("Content-Type","x-www-form-urlencoded");
        if (async)
            httpRequest.onreadystatechange = handler;
        httpRequest.send(postData);
    }
};

这是代码的一部分，您将看到alert(planId);在 updatePrice 函数中。

这是实际工作的链接:http://www.nitroflox.com/temp/

Answer 1

我刚刚查看了您提供的链接。您调用 updatePrice 函数两次:

onchange="xhr.updatePrice(xhr.updatePrice(this.options[this.selectedIndex].value))

更改为:

onchange="xhr.updatePrice(this.options[this.selectedIndex].value)

让我知道它是否有效。