JQ自动调用、Ajax跨域调用

蔚落 2024-04-17 06:13 75阅读 0赞

##### 问题描述 #####

在央视官网划水的时候,发现一个点赞排名,试着点击了几次,竟然发现没有防重复提交,如下图:

![在这里插入图片描述][20200109232056322.gif]  
于是想着用代码实现自动间隔点赞

##### 初步代码实现 #####

初始代码如下:

$(function() {
        
    				var num = 0;
    				setInterval(function() {
        
    					$.ajax({
        
    						type: "get", //请求方式
    						url: "http://*********TACT1499325086744310&num=1&jsonp_callback=TACT1499325086744310",
    						success: function(data) {
        
    							//请求成功处理，和本地回调完全一样
    							console.log("点赞成功" + num + "次");
    							num++;
    						},
    						error: function() {
        
    							//请求出错处理
    							console.log(data);
    						}
    					});
    				}, 1000);
    			});

##### 代码解释 #####

$(function() {
        
    		setInterval(function() {
        
                      //dosomething
                     },num)
    		}
    )

***setInterval()***:是一个定时器,里面的 *function是一个匿名函数* ,我们可以把想执行的一些代码写在里面;  
***num***:这是一个参数,表示多少毫秒执行一直,我这里写1000就表示每秒钟执行一次.

##### ajax跨域问题 #####

但是这样请求的话,会出现如下的 ***ajax跨域调用问题***:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODQ0NDU0_size_16_color_FFFFFF_t_70]

查询了一些资料以后,得出以下最终的解决办法如下:

$(function() {
        
    		var num = 0;
    		setInterval(function() {
        
    			$.ajax({
        
    				type: "get", //请求方式
    				async: true, //是否异步
    				url: "http://***************TACT1499325086744310&num=1&jsonp_callback=TACT1499325086744310",
    				dataType: "jsonp", //跨域json请求一定是jsonp
    				jsonp: "jsonp_callback", //跨域请求的参数名，默认是callback
    				//jsonpCallback:"successCallback",    //自定义跨域参数值，回调函数名也是一样，默认为jQuery自动生成的字符串
    				data: {
        
    					"query": "civilnews"
    				}, //请求参数
    				beforeSend: function() {
        
    					//请求前的处理
    				},
    				success: function(data) {
        
    					//请求成功处理，和本地回调完全一样
    					console.log("点赞成功" + num + "次");
    					num++;
    				},
    				complete: function() {
        
    					//请求完成的处理
    				},
    				error: function() {
        
    					//请求出错处理
    					console.log(data);
    				}
    			});
    		}, 1000);
    	});

##### 最终效果 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODQ0NDU0_size_16_color_FFFFFF_t_70 1]

[20200109232056322.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/22e693f4816347c5b36164fa69c19b4c.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODQ0NDU0_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/8228b5be10204949b8c9f424df4cbe52.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODQ0NDU0_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/4d3b415994374b2a98778df255ca68ca.png