ajax提交form表单+跨域

最新推荐文章于 2023-07-27 09:30:55 发布

一叶轮回

最新推荐文章于 2023-07-27 09:30:55 发布

阅读量1.8k

点赞数

本文链接：https://blog.csdn.net/yy954744913/article/details/51915223

版权

有时候我们需要提交form表单，而又不想影响跳转页面，同时还不影响浏览器的

正常访问，这个时候就用到了ajax提交

首先，要引入js文件

var form = $('#form').serialize()

$.ajax({
	cache: true,
	type: "POST",
	url:ajaxCallUrl,
	data:form ,
	async: false,		//异步加载
	success: function(data) {
		alert(data);
	}
});
以上就是用ajax提交form表单的操作，后台可以直接接收一个model




Ajax 跨域请求

 
 

 
 

 
 

  
  

   
   客户端JS：

   
   

    
    
     
     
    
    

    
     1 var xhrurl = 'http://localhost:8001/Ajax/ticketNotify.ashx?cu=kefu1';
 2 $.ajax({
 3         type : "get",
 4         async : false,
 5         url :xhrurl, 
 6         cache : false,
 7         dataType : "jsonp",
 8         jsonp: "callbackparam",
 9         jsonpCallback:"jsonpCallback1",
10         success : function(json){
11             alert(json[0].name);
12         },
13         error:function(e){
14             alert("error");
15         }
16     });

    
    
     
     
    
    

   
   

   
   服务端代码：

   
   

    
    1             String callbackFunName = context.Request["callbackparam"];
2             context.Response.Write(callbackFunName + "([ { \"name\":\"John\"}])");

   
   

   
   PS:客户端的jsonp参数是用来通过url传参，传递jsonpCallback参数的参数名，比较拗口，通俗点讲：

   
   jsonp: "callbackparam"
jsonpCallback:"jsonpCallback1"

这两个参数最终会拼接在请求的url后面，变成 http://www.xxx.com/ajax/xxx.ashx?callbackparam=jsonCallback1
服务端要获取这个参数值："jsonCallback1"  ,拼接在要输出的JSON数据最前面,不然就算请求成功你也只会看到警告：
Resource interpreted as Script but transferred with MIME type text/plain:

却看不到success定义的函数执行。



   
   

   
   
顺带一提：
在chrome浏览器里，还可以在服务端设置header信息
context.Response.AddHeader("Access-Control-Allow-Origin", "*");
来达到跨域请求的目的，并且不需要设置ajax以下参数

   
   

    
    dataType : "jsonp",
jsonp: "callbackparam",
jsonpCallback:"jsonpCallback1"

   
   

   
   以正常ajax请求方式就可以获得数据。