本文共 1621 字，大约阅读时间需要 5 分钟。

在前端开发中，使用表单会进行跳转，有时候并不需要这个的。这里通过jQuery，使用AJAX直接发送Json数据。

运行截图如下：

界面如下：

这里可以看到

div里面是group1，然后后面都是input1,input2等等。

并且有一个group2

name和上面group1一样。

通过这种方式，获取，如下，group1下的input[name=input1]的值，等等。

在index.html下面

可以知道先加载jquery.min.js，再加载test.js

而加载到test.js

但界面加载完成。就运行init()，这个init中调用了绑定函数，绑定了2个按钮。

程序源码如下：

index.html

   
	
    名称1_1	
    	
    
	
    名称1_2	
    	
    
	
    名称1_3	
    	
    
	
    名称1_4	
    	
    
	
    点击
   
   
	
    名称2_1	
    	
    
	
    名称2_2	
    	
    
	
    名称2_3	
    	
    
	
    名称2_4	
    	
    
	
    点击
   

test.js

;var member_do1 = {		init: function(){				this.eventBind();	},		eventBind:function(){				$(".group1 .do-btn1").click(function(){						$.ajax({								url: "https://www.baidu.com",				type: "POST",				data:{										value1:$(".group1 input[name=input1]").val(),					value2:$(".group1 input[name=input2]").val(),					value3:$(".group1 input[name=input3]").val(),					value4:$(".group1 input[name=input4]").val()				},				dataType:'json',				success:function(res){										console.log(res);				}			});		})	}};$(document).ready(function(){		member_do1.init();	member_do2.init();});var member_do2 = {		init: function(){				this.eventBind();	},		eventBind:function(){			$(".group2 .do-btn2").click(function(){						$.ajax({								url: "https://www.baidu.com",				type: "POST",				data:{										value1:$(".group2 input[name=input1]").val(),					value2:$(".group2 input[name=input2]").val(),					value3:$(".group2 input[name=input3]").val(),					value4:$(".group2 input[name=input4]").val()				},				dataType:'json',				success:function(res){										console.log(res);				}			});		});	}};

转载地址：http://fdmif.baihongyu.com/