Fatal编程技术网
  • javascript/
  • Javascript 脚本在本地主机上运行正常，但在服务器上失败

Javascript 脚本在本地主机上运行正常，但在服务器上失败

javascript php html data-binding

Javascript 脚本在本地主机上运行正常，但在服务器上失败,javascript,php,html,data-binding,canvasjs,Javascript,Php,Html,Data Binding,Canvasjs,我有这个html文件（.html在本地和.php在服务器上）和相应的js代码。当我开发时，它在本地机器上运行良好。我一把它上传到服务器上，它就无法以同样的方式运行。具体来说，只有jquery函数在工作，而不是onclick函数（根据我的调试报告） 此外，当我在Ubuntu上本地运行该文件时，它运行正常，但无法在windows计算机上本地运行 在上面的更多内容中，最终我发现它适用于Foreox，但不适用于chrome。因此与操作系统无关。 live web上的控制台错误 Mixed Content

我有这个html文件（.html在本地和.php在服务器上）和相应的js代码。当我开发时，它在本地机器上运行良好。我一把它上传到服务器上，它就无法以同样的方式运行。具体来说，只有jquery函数在工作，而不是onclick函数（根据我的调试报告）

此外，当我在Ubuntu上本地运行该文件时，它运行正常，但无法在windows计算机上本地运行

在上面的更多内容中，最终我发现它适用于Foreox，但不适用于chrome。因此与操作系统无关。

live web上的控制台错误

Mixed Content: The page at 'stayondiscount.com/dynamicprice/nodal.php' was loaded over HTTPS, but requested an insecure favicon 'stayondiscount.com/favicon.ico'. This request has been blocked; the content must be served over HTTPS.


酒店收入管理系统
.盒子{
颜色：#fff；
填充：20px；
显示：无；
边缘顶部：20px；
}
选择城市
古尔冈
德里
诺伊达
斋浦尔
加尔各答
班加罗尔
钦奈
浦那
孟买
果阿
--------这是js文件----------------------------

var bangalore = [];
var bangalore_avg = [];
var bangalore_tenth_percentile = [];
var bangalore_nintyth_percentile = [];

var chennai = [];
var chennai_avg = [];
var chennai_tenth_percentile = [];
var chennai_nintyth_percentile = [];

var pune = [];
var pune_avg = [];
var pune_tenth_percentile = [];
var pune_nintyth_percentile = [];

var mumbai = [];
var mumbai_avg = [];
var mumbai_tenth_percentile = [];
var mumbai_nintyth_percentile = [];

var goa = [];
var goa_avg = [];
var goa_tenth_percentile = [];
var goa_nintyth_percentile = [];

var kolkata = [];
var kolkata_avg = [];
var kolkata_tenth_percentile = [];
var kolkata_nintyth_percentile = [];
var jaipur = [];
var jaipur_avg = [];
var jaipur_tenth_percentile = [];
var jaipur_nintyth_percentile = [];

var noida = [];
var noida_avg = [];
var noida_tenth_percentile = [];
var noida_nintyth_percentile = [];

var delhi = [];
var delhi_avg = [];
var delhi_tenth_percentile = [];
var delhi_nintyth_percentile = [];

var gurgaon = [];
var gurgaon_avg = [];
var gurgaon_tenth_percentile = [];
var gurgaon_nintyth_percentile = [];

$(document).ready(function(){

    $("select").change(function(){

        $(this).find("option:selected").each(function(){

            var optionValue = $(this).attr("value");

            if(optionValue){

                $(".box").not("." + optionValue).hide();
                $("." + optionValue).show();

            } 
            else{

                $(".box").hide();
            }
        });
    }).change();
});

    function openCity(evt, cityName) {

        var xhr = new XMLHttpRequest(),
        method = "GET",
        url = "https://api.nodal.direct/v1/index.php/Api/getNodalGraph";
        xhr.open(method, url, true);
        xhr.send();

        xhr.onreadystatechange = function () {

            if (xhr.readyState === 4 && xhr.status === 200) {

                var api_data = xhr.responseText;
                var api_json = JSON.parse(api_data); 
                var data = api_json["data"];

                for(var i=0; i<data.length; i++) {

                    iter_data = data[i];
                    data_region = iter_data["region"];
                    data_median = iter_data["median_price"];
                    data_avg = iter_data["avg_price"];
                    data_date = iter_data["date"];
                    data_tenth_percentile = iter_data["tenth_percentile"];
                    data_nintyth_percentile = iter_data["ninty_percentile"];

                    var datearray = data_date.split("-");
                    var newdate = datearray[0] + ', ' + datearray[1] + ', ' + datearray[2];

                    if(data_region == "gurgaon") {
                        gurgaon.push({x:new Date(newdate), y:Number(data_median)});
                        gurgaon_avg.push({x:new Date(newdate), y:Number(data_avg)});
                        gurgaon_tenth_percentile.push({x:new Date(newdate), y:Number(data_tenth_percentile)});
                        gurgaon_nintyth_percentile.push({x:new Date(newdate), y:Number(data_nintyth_percentile)});
                    }
                    else if(data_region == "delhi") {
                        delhi.push({x:new Date(newdate), y:Number(data_median)});
                        delhi_avg.push({x:new Date(newdate), y:Number(data_avg)});
                        delhi_tenth_percentile.push({x:new Date(newdate), y:Number(data_tenth_percentile)});
                        delhi_nintyth_percentile.push({x:new Date(newdate), y:Number(data_nintyth_percentile)});
                    }
                    else if(data_region == "noida") {
                        noida.push({x:new Date(newdate), y:Number(data_median)});
                        noida_avg.push({x:new Date(newdate), y:Number(data_avg)});
                        noida_tenth_percentile.push({x:new Date(newdate), y:Number(data_tenth_percentile)});
                        noida_nintyth_percentile.push({x:new Date(newdate), y:Number(data_nintyth_percentile)});
                    }
                    else if(data_region == "jaipur") {
                        jaipur.push({x:new Date(newdate), y:Number(data_median)});
                        jaipur_avg.push({x:new Date(newdate), y:Number(data_avg)});
                        jaipur_tenth_percentile.push({x:new Date(newdate), y:Number(data_tenth_percentile)});
                        jaipur_nintyth_percentile.push({x:new Date(newdate), y:Number(data_nintyth_percentile)});
                    }
                    else if(data_region == "kolkata") {
                        kolkata.push({x:new Date(newdate), y:Number(data_median)});
                        kolkata_avg.push({x:new Date(newdate), y:Number(data_avg)});
                        kolkata_tenth_percentile.push({x:new Date(newdate), y:Number(data_tenth_percentile)});
                        kolkata_nintyth_percentile.push({x:new Date(newdate), y:Number(data_nintyth_percentile)});
                    }
                    else if(data_region == "bangalore") {
                        bangalore.push({x:new Date(newdate), y:Number(data_median)});
                        bangalore_avg.push({x:new Date(newdate), y:Number(data_avg)});
                        bangalore_tenth_percentile.push({x:new Date(newdate), y:Number(data_tenth_percentile)});
                        bangalore_nintyth_percentile.push({x:new Date(newdate), y:Number(data_nintyth_percentile)});
                    }

                    else if(data_region == "chennai") {
                        chennai.push({x:new Date(newdate), y:Number(data_median)});
                        chennai_avg.push({x:new Date(newdate), y:Number(data_avg)});
                        chennai_tenth_percentile.push({x:new Date(newdate), y:Number(data_tenth_percentile)});
                        chennai_nintyth_percentile.push({x:new Date(newdate), y:Number(data_nintyth_percentile)});
                    }
                    else if(data_region == "pune") {
                        pune.push({x:new Date(newdate), y:Number(data_median)});
                        pune_avg.push({x:new Date(newdate), y:Number(data_avg)});
                        pune_tenth_percentile.push({x:new Date(newdate), y:Number(data_tenth_percentile)});
                        pune_nintyth_percentile.push({x:new Date(newdate), y:Number(data_nintyth_percentile)});
                    }
                    else if(data_region == "mumbai") {
                        mumbai.push({x:new Date(newdate), y:Number(data_median)});
                        mumbai_avg.push({x:new Date(newdate), y:Number(data_avg)});
                        mumbai_tenth_percentile.push({x:new Date(newdate), y:Number(data_tenth_percentile)});
                        mumbai_nintyth_percentile.push({x:new Date(newdate), y:Number(data_nintyth_percentile)});
                    }
                    else if(data_region == "goa") {
                        goa.push({x:new Date(newdate), y:Number(data_median)});
                        goa_avg.push({x:new Date(newdate), y:Number(data_avg)});
                        goa_tenth_percentile.push({x:new Date(newdate), y:Number(data_tenth_percentile)});
                        goa_nintyth_percentile.push({x:new Date(newdate), y:Number(data_nintyth_percentile)});
                    }

                    else {
                        continue;
                    }
                }

                var city = cityName.toString();

                if(city == "Gurgaon") {

                    var _name_ = "Gurgaon";
                    var active = 1;
                    data_array = gurgaon.slice(gurgaon.length - 4, gurgaon.length);
                    avg_array = gurgaon_avg.slice(gurgaon_avg.length - 4, gurgaon_avg.length);
                    tenth_array = gurgaon_tenth_percentile.slice(gurgaon_tenth_percentile.length - 4, gurgaon_tenth_percentile.length);
                    nintyth_array = gurgaon_nintyth_percentile.slice(gurgaon_nintyth_percentile.length - 4, gurgaon_nintyth_percentile.length);
                    console.log(nintyth_array);
                }

                else if(city == "Delhi") {

                    var _name_ = "Delhi";   
                    var active = 2;
                    data_array = delhi.slice(delhi.length - 4, delhi.length);
                    avg_array = delhi_avg.slice(delhi_avg.length - 4, delhi_avg.length);
                    tenth_array = delhi_tenth_percentile.slice(delhi_tenth_percentile.length - 4, delhi_tenth_percentile.length);
                    nintyth_array = delhi_nintyth_percentile.slice(delhi_nintyth_percentile.length - 4, delhi_nintyth_percentile.length);
                }

                else if(city == "Noida") {

                    var _name_ = "Noida";
                    var active = 3;
                    data_array = noida.slice(noida.length - 4, noida.length);
                    avg_array = noida_avg.slice(noida_avg.length - 4, noida_avg.length);
                    tenth_array = noida_tenth_percentile.slice(noida_tenth_percentile.length - 4, noida_tenth_percentile.length);
                    nintyth_array = noida_nintyth_percentile.slice(noida_nintyth_percentile.length - 4, noida_nintyth_percentile.length);
                }

                else if(city == "Jaipur") {

                    var _name_ = "Jaipur";
                    var active = 4;
                    data_array = jaipur.slice(jaipur.length - 4, jaipur.length);
                    avg_array = jaipur_avg.slice(jaipur_avg.length - 4, jaipur_avg.length);
                    tenth_array = jaipur_tenth_percentile.slice(jaipur_tenth_percentile.length - 4, jaipur_tenth_percentile.length);
                    nintyth_array = jaipur_nintyth_percentile.slice(jaipur_nintyth_percentile.length - 4, jaipur_nintyth_percentile.length);
                }

                else if(city == "Kolkata") {

                    var _name_ = "Kolkata";
                    var active = 5;
                    data_array = kolkata.slice(kolkata.length - 4, kolkata.length);
                    avg_array = kolkata_avg.slice(kolkata_avg.length - 4, kolkata_avg.length);
                    tenth_array = kolkata_tenth_percentile.slice(kolkata_tenth_percentile.length - 4, kolkata_tenth_percentile.length);
                    nintyth_array = kolkata_nintyth_percentile.slice(kolkata_nintyth_percentile.length - 4, kolkata_nintyth_percentile.length);
                }
                else if(city == "Bangalore") {

                    var _name_ = "Bangalore";
                    var active = 6;
                    data_array = bangalore.slice(bangalore.length - 4, bangalore.length);
                    avg_array = bangalore_avg.slice(bangalore_avg.length - 4, bangalore_avg.length);
                    tenth_array = bangalore_tenth_percentile.slice(bangalore_tenth_percentile.length - 4, bangalore_tenth_percentile.length);
                    nintyth_array = bangalore_nintyth_percentile.slice(bangalore_nintyth_percentile.length - 4, bangalore_nintyth_percentile.length);
                }
                else if(city == "Chennai") {

                    var _name_ = "Chennai";
                    var active = 7;
                    data_array = chennai.slice(chennai.length - 4, chennai.length);
                    avg_array = chennai_avg.slice(chennai_avg.length - 4, chennai_avg.length);
                    tenth_array = chennai_tenth_percentile.slice(chennai_tenth_percentile.length - 4, chennai_tenth_percentile.length);
                    nintyth_array = chennai_nintyth_percentile.slice(chennai_nintyth_percentile.length - 4, chennai_nintyth_percentile.length);
                }
                else if(city == "Pune") {

                    var _name_ = "Pune";
                    var active = 8;
                    data_array = pune.slice(pune.length - 4, pune.length);
                    avg_array = pune_avg.slice(pune_avg.length - 4, pune_avg.length);
                    tenth_array = pune_tenth_percentile.slice(pune_tenth_percentile.length - 4, pune_tenth_percentile.length);
                    nintyth_array = pune_nintyth_percentile.slice(pune_nintyth_percentile.length - 4, pune_nintyth_percentile.length);
                }
                else if(city == "Mumbai") {

                    var _name_ = "Mumbai";
                    var active = 9;
                    data_array = mumbai.slice(mumbai.length - 4, mumbai.length);
                    avg_array = mumbai_avg.slice(mumbai_avg.length - 4, mumbai_avg.length);
                    tenth_array = mumbai_tenth_percentile.slice(mumbai_tenth_percentile.length - 4, mumbai_tenth_percentile.length);
                    nintyth_array = mumbai_nintyth_percentile.slice(mumbai_nintyth_percentile.length - 4, mumbai_nintyth_percentile.length);
                }

                else if(city == "Goa") {

                    var _name_ = "Goa";
                    var active = 10;
                    data_array = goa.slice(goa.length - 4, goa.length);
                    avg_array = goa_avg.slice(goa_avg.length - 4, goa_avg.length);
                    tenth_array = goa_tenth_percentile.slice(goa_tenth_percentile.length - 4, goa_tenth_percentile.length);
                    nintyth_array = goa_nintyth_percentile.slice(goa_nintyth_percentile.length - 4, goa_nintyth_percentile.length);
                }

                else {
                    console.log("test it");
                }

                var chart = new CanvasJS.Chart("chart" + active, {

                    title: {
                        text: _name_ + " Market Prices",
                        fontSize: 15,
                    },
                    axisX: {
                        valueFormatString: "DD-MM-YY",
                        labelFontSize: 10,
                    },
                    axisY2: {
                        title: "Price",
                        interval: 700,
                        titleFontSize: 15,
                        labelFontSize: 10,
                        prefix: "₹ ",
                        suffix: " "
                    },
                    toolTip: {
                        shared: true
                    },
                    legend: {
                        cursor: "pointer",
                        fontSize: 10,
                        verticalAlign: "top",
                        horizontalAlign: "center",
                        dockInsidePlotArea: true,
                        itemclick: toogleDataSeries
                    },
                    data:[
                        {
                          type:"line",
                          axisYType: "secondary",
                          name: "Median Price",
                          showInLegend: true,
                          markerSize: 1,
                          yValueFormatString: "#,###",
                          dataPoints: data_array

                        },
                        {
                        type:"line",
                        axisYType: "secondary",
                        name: "Average Price",
                        showInLegend: true,
                        markerSize: 1,
                        yValueFormatString: "#,###",
                        dataPoints: avg_array
                        }
                    ]
                });

                chart.render();

                function toogleDataSeries(e) {

                  if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                    e.dataSeries.visible = false;
                  } 
                  else {
                        e.dataSeries.visible = true;
                    }

                    chart.render();
                }

                var percentile = new CanvasJS.Chart("percentile" + active, {

                    title: {
                        text: _name_ + " Median Price Percentile",
                        fontSize: 15,
                    },
                    axisX: {
                        valueFormatString: "DD-MM-YY",
                        labelFontSize: 10,
                    },
                    axisY2: {
                        title: "Percentile",
                        interval: 700,
                        titleFontSize: 15,
                        labelFontSize: 10,
                        prefix: "₹ ",
                        suffix: " "
                    },
                    toolTip: {
                        shared: true
                    },
                    legend: {
                        cursor: "pointer",
                        fontSize: 10,
                        verticalAlign: "top",
                        horizontalAlign: "center",
                        dockInsidePlotArea: true,
                        itemclick: toogleDataSeries
                    },
                    data:[
                      {
                        type:"line",
                        axisYType: "secondary",
                        name: "10th Percentile",
                        showInLegend: true,
                        markerSize: 1,
                        yValueFormatString: "#,###",
                        dataPoints: tenth_array
                      },
                      {
                        type:"line",
                        axisYType: "secondary",
                        name: "90th Percentile",
                        showInLegend: true,
                        markerSize: 1,
                        yValueFormatString: "#,###",
                        dataPoints: nintyth_array
                      }
                    ]
                });

                percentile.render();
                function toogleDataSeries(e) {

                    if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                            e.dataSeries.visible = false;
                    } 
                    else {
                            e.dataSeries.visible = true;
                        }
                    percentile.render();
                }
            }
        }
    }

var班加罗尔=[]；
var bangalore_平均值=[]；
var bangalore_第十百分位=[]；
var bangalore_nintyth_百分位数=[]；
var chennai=[]；
var chennai_平均值=[]；
var chennai_第十百分位=[]；
var chennai_nintyth_百分位数=[]；
var pune=[]；
var pune_平均值=[]；
var pune_第十百分位=[]；
var pune_nintyth_百分位数=[]；
var=[]；
var mumbai_平均值=[]；
var mumbai_第10_百分位=[]；
var mumbai_nintyth_百分位数=[]；
var goa=[]；
var goa_平均值=[]；
var goa_第十百分位=[]；
var goa_nintyth_百分位数=[]；
加尔各答风险值=[]；
加尔各答风险值平均值=[]；
var kolkata_第十百分位=[]；
加尔各答第九百分位变量=[]；
var斋浦尔=[]；
var斋浦尔平均值=[]；
var斋浦尔第十百分位=[]；
var斋浦尔九分位数=[]；
诺伊达变量=[]；
var noida_平均值=[]；
var noida_第十百分位=[]；
var noida_nintyth_百分位数=[]；
风险价值=[]；
风险值德里_平均值=[]；
第十百分位变量=[]；
变量德里第九百分位=[]；
var gurgaon=[]；
var gurgaon_平均值=[]；
var gurgaon_第十百分位=[]；
var gurgaon_nintyth_百分位数=[]；
$（文档）.ready（函数（）{
$（“选择”）.change（函数（）{
$（this）.find（“选项：选中”）.each（函数（）{
var optionValue=$（此）.attr（“值”）；
如果（选项值）{
$（“.box”）.not（“.”+optionValue.hide（）；
$（“+optionValue）.show（）；
} 
否则{
$（“.box”）.hide（）；
}
});
}).change（）；
});
函数openCity（evt、cityName）{
var xhr=new XMLHttpRequest（），
method=“GET”，
url=”https://api.nodal.direct/v1/index.php/Api/getNodalGraph";
open（方法、url、true）；
xhr.send（）；
xhr.onreadystatechange=函数（）{
如果（xhr.readyState==4&&xhr.status==200）{
var api_data=xhr.responseText；
var api_json=json.parse（api_数据）；
var data=api_json[“data”]；

对于（var i=0；i而不是在每个选项上添加
onclick
事件侦听器，请尝试在选择字段中添加
onchange
侦听器。
你可以这样做


<select onchange = "cityName(event)">



onclick
listener不适用于选项元素。它在大多数浏览器中都会失败。

我试图修改您的脚本，并将逻辑更改为
onchange
，但似乎有效。
“根据我的调试报告”-您的调试报告是什么？您很可能没有为
nodal.js
文件引用正确的文件路径。@JaromandaX与我测试功能时一样。@Andrew64 nodal.js与nodal.html或nodal.phpcheck位于同一文件夹中，以查看浏览器开发人员中的错误console@Vivek试试这个：--您已经在使用
onchange
带有jquery的事件监听器。我刚刚在同一个监听器中调用了您的函数。另外，我建议将t

<select onchange = "cityName(event)">



cityName(evt){
    city = evt.target.options[evt.target.selectedIndex].value
}