Question

我正在尝试使用ajax（在按钮单击时）在HTML页面内进行简单的Web API调用。但那个电话总是失败。问题仅出在该API的ajax（按钮点击）调用上。装在组合框中工作得非常好。所以，我希望它不应该是跨域问题。

以下是导致问题的代码：

<body>

    <a class="offline-button" href="../index.html">Back</a>
    <input id="btnSayHello" type="button" value="Get Value From Ajax" /><br />

    <div id="example" class="k-content">

        <div class="demo-section">
            <h2>Products</h2>
            <input id="products" style="width: 250px" />
        </div>

        <script>
            $(document).ready(function() {
                $("#products").kendoDropDownList({
                    //dataTextField: "Name",
                    //dataValueField: "Name",
                    dataTextField: "ProductName",
                    dataValueField: "ProductID",
                    dataSource: {
                        transport: {
                            read: {
                                dataType: "jsonp",
                                url: "http://demos.kendoui.com/service/Products",
                            }
                        }
                    }
                });
            });

            $(function () {

                $("#btnSayHello").click(function () {
                    $.ajax({
                        type: "GET",
                        contentType: "jsonp",
                        //contentType: "application/json; charset=utf-8",
                        dataTypes: "jsonp",
                        processdata: true,
                        data: {},
                        url: "http://demos.kendoui.com/service/Products",
                        success: function (data) {
                            alert("Success");
                        },
                        error: function (result) {
                            window.alert(result.responseText);
                        }
                    });
                })
            });
        </script>

对于按钮单击的Ajax调用的 responseText ，它返回“undefined”

文档就绪功能的相同URL调用正常。并填充 ComboBox 。

可以在此link找到源代码。

提前感谢大家的帮助！

Answer 1

您可以看到这一点，我认为它解决了您的问题，尝试使用回调函数将一些重复值作为queryparam发送。

$(document).ready(function(){
       $("#btnSayHello").click(function () {
                    $.ajax({
                        type: "GET",
                        url: "http://demos.kendoui.com/service/Products?callback=123",
                        dataType: "jsonp",
                        success: function (data) {
                            alert("Success"+JSON.stringify(data));
                        },
                        error: function (result) {
                           alert("error:"+result.responseText);
                        }
                    });


        });
      });

http://jsfiddle.net/nPeaV/7370/

Answer 2

好的，我得到了答案，问题是因为“ dataTypes ”关键字。我将其更改为“ dataType ”并且有效。

嗯，我是网络技术的新手，最初我尝试在aspx页面中开发相同的代码，其中“dataTypes”工作得很好。因此，我尝试在普通的HTML文件中使用相同的代码库，但它不起作用。

因此，结论是与 HTML5 相比， aspx 页面中的“数据类型”可能会有一些不同的处理方式。

Ajax对Web服务的调用总是失败

2 个答案: