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。

宝剑锋从磨砺出，梅花香自苦寒来。