首页 > Web开发 > 详细

jquery实现ajax实例

时间:2016-04-03 20:21:12      阅读:301      评论:0      收藏:0      [点我收藏+]

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

jquery实现ajax实例

原文:http://www.cnblogs.com/lvmylife/p/5350430.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!