jquery实现ajax实例

Posted 2020-07-03 奔跑的蜗牛

继上一篇： 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