欢迎来到代码基地 请CTRL+D收藏本站!^_^
  • 最近浏览

    你还没有浏览商品

使用jQuery实现跨域提交表单数据

2017-12-28 编辑:admin 下载:13 评论:0 点击:387 加入收藏 下载金币:30 积分返还:3

我们在WEB开发中有时会遇到这种情况,比如要从A网站收集用户信息,提交给B网站处理,这个时候就会涉及到跨域提交数据的问题。本文将给您介绍如何使用jQuery来实现异步跨域提交表单数据。

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

注意,JSONP是JSON格式的扩展。他要求一些服务器端的代码来检测并处理查询字符串参数。
在本例中,为了演示跨域提交数据,我们假设A网站域名为www.daimajidi.com,B网站域名为www2.daimajidi.com,我们在A网站创建一个简单的表单,用于提交用户信息。

使用jQuery实现跨域提交表单数据



部分代码教程:

$(function(){ 
    $("#myform").submit(function(){ 
        var data = $(this).serialize(); //序列化表单数据 
        $.getJSON("http://www2.daimajidi.com/demo/jsonp/jsonp.php?callback=?",data,function(json){ 
            var msg = ''; 
            if(json){ 
               var  sex = json.sex==1? "男生":"女生"; 
               msg = "<div id='result'><strong>提交成功!</strong><br/>姓名: 
               "+json.username+"<br/>性别:"+sex+"<br/>年龄:"+json.age+"</div>" 
            }else{ 
               msg = "服务器忙,请稍候再试!"; 
            } 
            $("#myform").after(msg); //将返回信息插入页面对应的元素后 
        }); 
        return false; 
    }); 
});
  • ^_^ 本站原创案例有任何使用问题,可咨询管理员技术支持哦!VIP会员免金币或最低3折下载!