Question

摘要
我有一个运行搜索的应用程序。在允许提交之前，它会向查询发送AJAX调用以检查有效的邮政编码，然后返回我可以解析的JSON结果。我现在需要跨域做同样的事情，我知道我必须使用完整的URL和JSONP格式，但我不知道如何设置它。

AJAX通话
我发送了一个通过查询运行的邮政编码。

if (zipLength == 5) {
    $.ajax({
        type:"GET", 
        //location of the cfc
        url: "cfc/test.cfc",
        //function name and url variables to send
        data: {method:'zip_lookup', zip:zip},
        //function run on success takes the returned json object and reads values.
        success: function(obj) {
            var response = $.parseJSON(obj);

            if (response.formError == true) {
                alert(response.message);
            }
        }
    });
}

运行查询的Coldfusion中的CFC

<!---Makes sure entered zip exists--->   
<cffunction name="zip_lookup" access="remote">
    <cfquery name="qZip">
        Select Distinct ZipCode
        From zipcodes
        Where ZipCode = '#url.zip#'
    </cfquery>

    <!---Return an error if zip was not found--->
    <cfif qZip.RecordCount EQ 0>
        <cfset formError = true>
        <cfset message = "Invalid Zip">
    <cfelse>
        <cfset formError = false>
        <cfset message = "">   
    </cfif>

    <cfoutput>
        <cfset obj = 
            {
                "formError" = formError,
                "message" = message
            } 
        />
    </cfoutput>

    <cfprocessingdirective suppresswhitespace="Yes"> 
        <cfoutput>
            #serializeJSON(obj)#
        </cfoutput>
    </cfprocessingdirective>

    <cfsetting enablecfoutputonly="No" showdebugoutput="No">
</cffunction>

JSON响应
这是查询返回的内容。

{"message":"Invalid Zip","formError":true}

处理响应
正如我在AJAX成功函数中所做的那样，我可以从JSON响应中获取formError或消息变量。我怎么能用JSONP做到这一点？

success: function(obj) {
    var response = $.parseJSON(obj);

    if (response.formError == true) {
        alert(response.message);
    }
}

Answer 1

我有答案。

请注意，原始发布的代码与正常的JSON响应完美配合。
这是我获得JSONP响应的方式。

AJAX通话

$.ajax({
    type:"GET", 
    //Location of the cfc
    url: "http://yourFullUrl/test.cfc",
    //Function name and url variables to send
    data: {method:'zip_lookup', zip:zip},
    //Set to JSONP here
    dataType:"jsonp",
    //The name of the function that's sent back
    //Optional because JQuery will create random name if you leave this out
    jsonpCallback:"callback",                   
    //This defaults to true if you are truly working cross-domain
    //But you can change this for force JSONP if testing on same server
    crossDomain:true,               
    //Function run on success takes the returned jsonp object and reads values.
    success: function(responseData) {
        //Pulls the variables out of the response
        alert(responseData.formError);
        alert(responseData.message);
    }
});

运行查询的Coldfusion中的CFC

<cffunction name="zip_lookup" access="remote" returntype="string" returnformat="plain" output="false">

    <cfquery name="qZip">
        Select Distinct ZipCode
        From zipcodes
        Where ZipCode = '#url.zip#'
    </cfquery>

    <!---Return an error if zip was not found--->
    <cfif qZip.RecordCount EQ 0>
        <cfset formError = true>
        <cfset message = "Invalid Zip">
    <cfelse>
        <cfset formError = false>
        <cfset message = "">   
    </cfif>


    <cfoutput>
        <cfscript>
           <!---Important to have double quotes around the name and value. --->
           <!---I missed this before --->
           return '#arguments.callback#({"formError": "#formError#", "message": "#message#"});';
       </cfscript>
    </cfoutput>

</cffunction>

格式化的JSONP响应

//Using the name from the jsonpCallback setting in the AJAX call
callback({"formError": "true", "message": "Invalid Zip"});

Answer 2

对于jsonp，您只需要设置数据类型，如下例

阅读：Working with JSONP

$.ajax({
    url: "http://query.yahooapis.com/v1/public/yql",

    // The name of the callback parameter, as specified by the YQL service
    jsonp: "callback",

    // Tell jQuery we're expecting JSONP
    dataType: "jsonp",

    // Tell YQL what we want and that we want JSON
    data: {
        q: "select title,abstract,url from search.news where query=\"cat\"",
        format: "json"
    },

    // Work with the response
    success: function( response ) {
        console.log( response ); // server response
    }
});

JQuery AJAX如何获取和解析JSONP而不是JSON？

2 个答案: