Question

我想在标签选择后显示我的数据。

我用javascript方法填充select标签，但是它运行良好。

首先：我想传递我的Web服务方法的selectedindex值参数。但我有错误： enter image description here

如何编写参数？这是javascript代码：

function getStatistic3() {

var response;
var allstat3 = [];
var e = document.getElementById("Select1");
var kla = e.options[e.selectedIndex].value;

$.ajax({
    type: 'GET',
    url: 'http://localhost:52251/Service1.asmx/Statistic_3',
    data: { klant: kla },
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function (msg) {
        response = msg.d;
        for (var i = 0; i < response.Items.length; i++) {
            var j = 0;
            allstat3[i] = [response.Items[i].Interventie, response.Items[i].Sum[j], response.Items[i].Sum[++j], response.Items[i].Sum[++j], response.Items[i].Sum[++j], response.Items[i].Sum[++j]];
        }
        fillDataTable(allstat3);
    },
    error: function (e) {
        alert("error loading statistic 3");
    }
});
}
function fillSlectTag() {
var response;

$.ajax({
    type: 'GET',
    url: 'http://localhost:52251/Service1.asmx/Statistic_3_All_Klant',
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function (msg) {
        response = msg.d;
        var sel = document.getElementById('Select1');
        for (var i = 0; i < response.length; i++) {
            var opt = document.createElement('option');
            opt.innerHTML = response[i];
            opt.value = response[i];
            sel.appendChild(opt);
        }
    },
    error: function (e) {
        alert("error loading select stat3");
    }
});
}

第二：当我第一次加载html页面时，它会加载null，因为我还没有在select标签中选择klant。如何解决这个问题？

修改： @ Talspaugh27

这是我的HTML代码：

 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<script type="text/javascript">
    $(function () {
        $('table').visualize({ type: 'line' });
    });

    fillSlectTag();
</script>
</head>
<body>    

<select id="Select1" name="D1"><option></option></select>
 <script >
            $(".Select1").change(function () { getStatistic3(); });
</script>
<table id="table_campaigns" class="display">
    <caption style="font-size:20px">Statistiek 3 : per klant en productgroep</caption>
    <thead>
    </thead>
    <tbody>
    </tbody>
</table>

</body>
</html>

和javascript代码：

function fillSlectTag() {
var response;

$.ajax({
    type: 'GET',
    url: 'http://localhost:52251/Service1.asmx/Statistic_3_All_Klant',
    //data: data2Send,
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function (msg) {
        response = msg.d;
        var sel = document.getElementById('Select1');
        for (var i = 0; i < response.length; i++) {
            var opt = document.createElement('option');
            opt.innerHTML = response[i];
            opt.value = response[i];
            sel.appendChild(opt);
        }
    },
    error: function (e) {
        alert("error loading select stat3");
    }
});
}

function getStatistic3() {

var response;
var allstat3 = [];
var e = document.getElementById("Select1");
var kla = e.options[e.selectedIndex].value;
if (kla) {
    $.ajax({
        type: 'GET',
        url: 'http://localhost:52251/Service1.asmx/Statistic_3',
        data: JSON.stringify({ klant: kla }),
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        processData: false,
        success: function (msg) {
            response = msg.d;
            for (var i = 0; i < response.Items.length; i++) {
                var j = 0;
                allstat3[i] = [response.Items[i].Interventie, response.Items[i].Sum[j], response.Items[i].Sum[++j], response.Items[i].Sum[++j], response.Items[i].Sum[++j], response.Items[i].Sum[++j]];
            }
            fillDataTable(allstat3);
        },
        error: function (e) {
            alert("error loading statistic 3");
        }
    });
}
}

function showStatistic3() {
$("#contentCamp").empty();
$.ajax({
    url: 'Statistic_3.html',
    dataType: 'html',
    success: function (data) {
        $("#contentCamp").html(data);
        getStatistic3();
    },
    error: function (e) {
        alert("Error loading statistic 3 html : " + e.statusText);
    }
});
}

Answer 1

似乎webservice期望json，你没有发送（你正在发送url编码的表单数据）

使用JSON.encode将您的数据转换为JSON

$.ajax({
    type: 'GET',
    url: 'http://localhost:52251/Service1.asmx/Statistic_3',
    data: JSON.stringify({ klant: kla }),
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function (msg) {
        response = msg.d;
        for (var i = 0; i < response.Items.length; i++) {
            var j = 0;
            allstat3[i] = [response.Items[i].Interventie, response.Items[i].Sum[j], response.Items[i].Sum[++j], response.Items[i].Sum[++j], response.Items[i].Sum[++j], response.Items[i].Sum[++j]];
        }
        fillDataTable(allstat3);
    },
    error: function (e) {
        alert("error loading statistic 3");
    }
});

Answer 2

没有完整的应用程序进行测试我认为这应该解决你的两个问题将在代码位后解释每个更改

function getStatistic3() {

var response;
var allstat3 = [];
var e = document.getElementById("Select1");
var kla = e.options[e.selectedIndex].value;

if (kla) 
{
$.ajax({
type: 'GET',
url: 'http://localhost:52251/Service1.asmx/Statistic_3',
data: JSON.stringify({ klant: kla }),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (msg) {
    response = msg.d;
    for (var i = 0; i < response.Items.length; i++) {
        var j = 0;
        allstat3[i] = [response.Items[i].Interventie, response.Items[i].Sum[j],     response.Items[i].Sum[++j], response.Items[i].Sum[++j], response.Items[i].Sum[++j], response.Items[i].Sum[++j]];
    }
    fillDataTable(allstat3);
},
error: function (e) {
    alert("error loading statistic 3");
}
});
}
}

我在if语句中包装了.ajax调用，以捕获是否从您的下拉列表中选择了一个值以及将数据传递给服务时使用JSON.stringify确保它正确地包装并将数据转义为服务和javascript可以互相使用的东西。

HTH

Ť

$ .ajax中的语法参数和第一个加载页面

2 个答案: