JavaScript中的AJAX错误,用于跨域ASMX Web服务JSONP调用

时间:2016-11-10 19:28:36

标签: javascript ajax web service cross-domain

我有一个本地运行的Web服务,我相信满足从动态CRM中访问外部数据的跨域JavaScript调用的必要条件,我遇到一些错误,创建JavaScript AJAX代码来访问外部Web服务

我可以通过http://aloyegeneraltest1/ReturnJSON.asmx/GetPriceJSON访问网络服务来显示下面屏幕截图1中显示的结果

Screen Shot 1

我的问题是我无法弄清楚如何正确编写实际上会获得上述Web服务中显示的序列化项目的JavaScript代码。

当我运行下面的页面,然后单击“测试”按钮时,我收到一条错误,指出0x800a1391 - JavaScript运行时错误:'GetJSONP'未定义。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ClientSideGeneralTest._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/.../xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">


        <script language="JavaScript" type="text/JavaScript" src="Scripts/jquery-3.1.1.min.js">

function GetJSONP() {
  debugger;
 $.ajax({
    url: "aloyegeneraltest1/.../GetPriceJSON",
    type: "POST",
    contentType: "application/json; charset=utf-8",
    data: '{"name":' + JSON.stringify(GetData()) + '}'
  }).done(function(result) {
    alert(result.d);
  }).fail(function(result) {
    alert(result.d);
  });
            }

}


</script>

<head runat="server">


    <title></title>
</head>
<body>
   <form id="form1" runat="server"> 
<div> 
<input id="Button1" type="button" 
  value="Test" onclick="GetJSONP()" /><br /> 

</div> 
</form> 

    &nbsp;
</body>
</html>

如果我完全删除了JQuery引用,那就消除了上面未定义的函数错误,但这样做会导致一个新的未处理异常错误,如图所示 - 0x800a1391 - JavaScript运行时错误:'$'未定义

产生新错误的修改代码如下所示:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ClientSideGeneralTest._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/.../xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">


        <script language="JavaScript" type="text/JavaScript">

function GetJSONP() {
  debugger;
 $.ajax({
    url: "aloyegeneraltest1/.../GetPriceJSON",
    type: "POST",
    contentType: "application/json; charset=utf-8",
    data: '{"name":' + JSON.stringify(GetData()) + '}'
  }).done(function(result) {
    alert(result.d);
  }).fail(function(result) {
    alert(result.d);
  });

}


</script>

<head runat="server">


    <title></title>
</head>
<body>
   <form id="form1" runat="server"> 
<div> 
<input id="Button1" type="button" 
  value="Test" onclick="GetJSONP()" /><br /> 

</div> 
</form> 

    &nbsp;
</body>
</html>

在Ajax代码的开头,似乎存在某种问题。

我是AJAX的新手,对于一般的开发来说还是一个新手,所以任何人都可以提供的任何帮助或建议将不胜感激。

2 个答案:

答案 0 :(得分:1)

可能是这些代码行解决了你的问题

          var jsonData = [YOUR JSON PARAMETER];

            $.ajax({
                async: false,
                type: "POST",
                url: [YOUR WEB SERVICE URL],
                contentType: "application/json; charset=utf-8",                  
                data: JSON.stringify({ json: jsonData }),
                dataType: "json",                
                success: OnSuccess,
                failure: function(err) {
                    alert("Error : " + err.d);
                }  
            }); 

            function OnSuccess(data) {
                alert("Success:" + data.d);                       
            }

你可以做一件事,只需要设置Access-Control-Allow-Origin&amp; CustomeHeaders中的Access-Control-Allow-Header是您的Web服务web.config文件。

 <add name="Access-Control-Allow-Origin" value="*" />
 <add name="Access-Control-Allow-Headers" value="Content-Type" />

如果您只想允许特定域,则可以使用域的特定值而不是*值

来实现

答案 1 :(得分:0)

我解决了自己的问题。请参阅下面的两个不同的脚本行。

<html xmlns="http://www.w3.org/1999/xhtml">
<script language="JavaScript" src="Scripts/jquery-1.7.1.min.js"></script>  
<script language="JavaScript" type="text/JavaScript">**
    function GetJSONP() {
        //debugger;
        $.ajax({
            url: "aloyegeneraltest1/.../GetPriceJSON",
            type: "POST",
            contentType: "application/json; charset=utf-8",