jquery中利用getJSON进行ajax跨域请求或Post提交数据

在jQuery中,我们使用json数据类型,通过getJSON方法来实现从服务端获取或发送数据,而当要向不同远程服务器端提交或者获取数据时,要采 用jsonp数据类型。使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名,以便完成一个有效的JSONP请求。如果要指定回调函数的参数名来取代 默认的callback。

html页面:

<form id="myform" action="#" method="post">   
   <p><label>姓名:</label><input type="text" class="input" name="username" /></p>   
   <p><label>性别:</label><input type="radio" name="sex" value="1" checked="checked" /> 
男生   
    <input type="radio" name="sex" value="2" /> 女生 </p>   
   <p><label>年龄:</label><input type="text" class="input" name="age" /></p>   
   <p><input type="submit" class="btn" value="提 交" /></p>   
</form>  

jQuery

当用户填写完毕表单并点击“提交”按钮时,使用jQuery获取表单信息,

并通过getJSON提交给B网站

    $(function(){   
        $("#myform").submit(function(){   
            var data = $(this).serialize(); //序列化表单数据   
            $.getJSON("http://www.zizaiyou.cn/ jsonp.php?callback=?",data,function(json){   
                var msg = '';   
                if(json){   
                   var  sex = json.sex==1? "男生":"女生";   
                   msg = "< id='result'><strong>提交成功!</strong><br/>姓名:   
                   "+json.username+"<br/>性别:"+sex+"<br/>年龄:"+json.age+"</>"   
                }else{   
                   msg = "服务器忙,请稍候再试!";   
                }   
                $("#myform").after(msg); //将返回信息插入页面对应的元素后   
            });   
            return false;   
        });   
    });   
PHP页面:

本例中,B网站的jsonp.php程序获取A网站提交过来的表单数据,并将数据进行必要的处理(如有需要,可将数据过滤并插入数据库中),然后返回JSON格式的数据给A网站的表单提交页面。

    $result['username'] = $_GET['username'];   
    $result['sex'] = $_GET['sex'];   
    $result['age'] = $_GET['age'];   
    echo $_GET['callback'].'('.json_encode($result).')';   
返回这样一串字符串:jsonp1331385001001({"username":"\u5929\u70ed\u7279","sex":"1","age":"28"})。

这样就ok啦,其实jquery还是非常牛逼的。就是一个记录。。。不喜勿喷。

关键词: getjson请求 , ajax跨域请求

上一篇: input输入框和文字、图片等对齐问题
下一篇: Windows下读取并恢复liunx系统EXT2/3/4分区文件:R-Linux

目前还没有人评论,您发表点看法?
发表评论

评论内容 (必填):