通过ajax提交表单数据

监听表单提交事件

在jquery中，以下两种方式均可以监听到表单的提交事件。

$('#form1').submit(function(e){
    alert('监听到了表单提交事件')
})

$('#form1').on('submit', function(e) {
    alert('监听到了表单提交事件')
})

以下是这两种方式的例子：

    
    
    
    
    


    

        
        
        提交
    
    

上述的例子中，点击了提交之后，表单仍然会进行跳转，那么如何阻止表单的默认提交行为呢？

阻止表单默认提交行为

当监听到表单的提交事件以后，可以调用事件对象的  event.preventDefault() 函数，来阻止表单的提交和页面的跳转。实例如下：

第一种：

$('#form1').submit(function(e){
    e.preventDefault()
})

第二种：

$('#form1').on('submit', function(e){
    e.preventDefault()
})

例子：

    
    
    
    
    


    

        
        
        提交
    
    

快速获取表单中的数据：

1.$(selector).serialize()

serialize()函数的好处：可以一次性的获取到表单中所有元素的数据

如果我们想要使用serialize() 快速获取表单元素的值，就要给每个输入框的name赋值，获取后返回的是键值对形式的数据。

例子：

    
    
    
    
    


    

        
        
        提交