• ajax学习笔记3-jQuery实现ajax(大拇指向上)


    jQuery实现ajax:

    jQuery本身提供了一个ajax方法,jQuery.ajax([settings])

    type:类型,”POST”或”GET”(默认)

    url:发送请求的地址

    data:是一个对象,连同请求发送到服务器的数据

    dataType:预期服务器返回的数据类型,如果不指定,jQuery将自动根据HTTP包MIME信息来智能判断,一般采用json格式,可以设置为“json”

    success:是一个方法,请求成功后的回调函数。传入返回后的数据,以及包含成功代码的字符串。

    error:是一个方法,请求失败时调用此函数。传入XMLHttpRequest对象。

    实现代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Demo</title>
        <style>
            body,input,button,select,h1{
                font-size:26px;
                line-height:1.8;
            }
        </style>
    </head>
    <body>
       <h1>员工查询</h1>
       <label>请输入员工编号</label>
       <input type="text" id="keyword" />
       <button id="search">查询</button>
       <p id="searchResult"></p>
    
       <h1>员工创建</h1>
       <label>请输入员工姓名:</label>
       <input type="text" id="staffName" /><br/>
       <label>请输入员工编号:</label>
       <input type="text" id="staffNumber" /><br/>
       <label>请输入员工性别:
           <select id="staffSex">
            <option>男</option>
            <option>女</option>
           </select>
       </label><br/>
       <label>请输入员工职位:</label>
       <input type="text" id="staffJob" /><br/>
       <button id="save">保存</button>
       <p id="createResult"></p>
       <script src="jquery-3.1.1.js"></script>
       <script>
        $(document).ready(function(){
            $("#search").click(function(){
                $.ajax({
                    type:"GET",
                    url:"service1.php?number="+$("#keyword").val(),
                    dataType:"json",
                    success:function(data){
                        if(data.success){  //如果json对象的success为true,则返回msg
                            $("#searchResult").html(data.msg);
                        }else{
                            $("#searchResult").html("出现错误:"+data.msg);
                        }
                    },
                    error:function(jqXHR){
                        alert("发生错误:"+jqXHR.status);
                    }
                });
            });
            $("#save").click(function(){
                $.ajax({
                    type:"POST",
                    url:"service1.php",
                    dataType:"json",
                    data:{
                        name:$("#staffName").val(),
                        number:$("#staffNumber").val(),
                        sex:$("#staffSex").val(),
                        job:$("#staffJob").val()
                    },
                    success:function(data){
                        if(data.success){  //如果json对象的success为true,则返回msg
                            $("#createResult").html(data.msg);
                        }else{
                            $("#createResult").html("出现错误:"+data.msg);
                        }
                    },
                    error:function(jqXHR){
                        alert("发生错误:"+jqXHR.status);
                    }
                });
            });
        });
       </script>
    </body>
    </html> 
    

    jQuery可以自动添加Content-Type。

     

    宝剑锋从磨砺出,梅花香自苦寒来。
  • 相关阅读:
    springmvc控制器controller单例问题
    用java求一个整数各位数字之和
    Java实现对List去重
    Oracle 11g修改字符集AL32UTF8为ZHS16GBK
    数据库字符集(AL32UTF8)和客户端字符集(2%)是不同的
    第1个人10,第2个比第1个人大2岁,依次递推,请用递归方式计算出第8个人多大?
    用table显示n条记录,每3行换一次颜色,即1,2,3用红色字体,4,5,6用绿色字体,7,8,9用红颜色字体。
    tomcat和jboss的区别
    poj_2486 动态规划
    poj_1464 动态规划
  • 原文地址:https://www.cnblogs.com/haimengqingyuan/p/7071919.html
Copyright © 2020-2023  润新知