jQuery中JSONP 前端+后端



  jQuery中JSONP

 

   前台代码如下：

<script type="text/javascript">
    $(function () {
        alert("start...");
        
        // 第一种方式
        $.ajax({
            type: "get",
            url: "http://localhost:9524/Home/ProcessCallback", // 这个就是不同于当前域的一个URL地址，这里单纯演示，所以同域
            dataType: "jsonp",
            jsonp: "jsonpcallback",  // 指定回调函数，这里名字可以为其他任意你喜欢的，比如callback，不过必须与下一行的GET参数一致
            data: "name=jxq&email=feichexia@yahoo.com.cn&jsonpcallback=?", // jsonpcallback与上面的jsonp值一致
            success: function (json) {
                alert(json.Name);
                alert(json.Email);
            }
        });

        // 第二种方式
        $.getJSON("http://localhost:9524/Home/ProcessCallback?name=xiaoqiang&email=jxqlovejava@gmail.com&jsonpcallback=?",
            function(json) {
                alert(json.Name);
                alert(json.Email);
            }
        );

        alert("end...");
    });
</script>

   后台Action代码如下：

public string ProcessCallback(string name, string email)
{
   if (Request.QueryString != null)
   {
       string jsonpCallback = Request.QueryString["jsonpcallback"];
       var user = new User
       {
            Name = name,
            Email = email
       };
       

       return jsonpCallback + "(" + new JavaScriptSerializer().Serialize(user) + ")";
   }

   return "error";
}