js jsonp操作事例

html页面

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $("#form1").on('submit', function(e) {
		
            e.preventDefault();
            $.ajax({
                type: "GET",
                async: false,
                url: "http://www.zhangjunfan.cn/jsonp.php", //// http://youdomain.com/ 换成你自己的域名
                data: {name: $("#name").val()},
                dataType: "jsonp",
                jsonp: "callback", // 传递给请求处理程序或页面的，用以获得 jsonp 回调函数名的参数名(一般默认为: callback) 
                jsonpCallback: "flightHandler",
                // 自定义的 jsonp 回调函数名称，默认为 jQuery 自动生成的随机函数名，也可以写"?"，jQuery 会自动为你处理数据
                success: function(json) {
				console.dir(json);
                    ////alert('您查询到用户: ' + json.name + ', 姓名: ' + json.real_name + '。回调函数名为: ' + json.func);
                    $("#result").html('您查询到用户: ' + json.name + ', 姓名: ' + json.real_name + '。');
                },
                error: function() {
                    alert("fail");
                }
            });
        });
    });
    </script>
  </head>
  <body>
    <form id="form1">
      <input type="text" name="name" id="name" />
      <div id="result"></div>
      <button type="submit">提交</button>
    </form>
  </body>
 </html>
jsonp.php代码

<?php
$callback = $_GET["callback"];
$name = $_GET["name"];
$result = array(
    'name' => $name,
    'real_name' => $name . '的真实姓名',
    'func' => $callback,
);
$result = json_encode($result);
echo "flightHandler($result)"; //// jsonp 就是说 在json数据$result外 要有个包装的函数 这里是 flightHandler 没什么用 但是必须保留着
exit;
?>

posted on 2013-05-26 00:14  一根烟的寂寞  阅读(167)  评论(0)    收藏  举报

导航