jquery实现ajax实例

继上一篇： js+json实现ajax实例

jquery代码：

$(function(){
    // 查询员工
    var oKeyword=$('#keyword'),//员工编号
        oSearchRes=$('#searchResult');//反馈结果显示

    // 查询员工按钮点击事件    
    $('#search').on('click',function(){
        searchStaff();
    })

    // 创建查询员工方法
    function searchStaff(){
        $.ajax({
            type:'GET',
            url:'serverjson.php?number='+oKeyword.val(),
            dataType:'json',
            success:function(data){
                oSearchRes.html(data.msg);
            }
        })
    }

    // 增加员工        
    var oAddnumber=$('#add-number'), //员工编号
        oAddname=$('#add-name'), //员工姓名
        oAddsex=$('#add-sex'), //员工性别
        oAddjob=$('#add-job'), //员工职位
        oAddResult=$('#add-resultshow'); //反馈结果显示

    // 增加员工按钮点击事件
    $('#add-search').on('click',function(){        
        createStaff();
    })
    // 创建增加员工方法
    function createStaff(){
        $.ajax({
            type:'POST',
            url:'serverjson.php',
            dataType:'json',
            data:{
                name:oAddname.val(),
                number:oAddnumber.val(),
                sex:oAddsex.val(),
                job:oAddjob.val()
            },
            success:function(data){
                if(data.success){
                    oAddResult.html(data.msg);                
                }else{
                    oAddResult.html('出现错误：'+data.msg);
                }
            },
            error:function(jqXHR){
                alert('发生错误！'+jqXHR.status)
            }
        })
    }

})

 参考自：慕课网/Ajax全接触 http://www.imooc.com/learn/250