码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-06-23 23:53:20      阅读:407      评论:0      收藏:0      [点我收藏+]

标签:label   根据   字符串   arch   jquer   select   request对象   ber   xhtml   

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。

 

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

标签:label   根据   字符串   arch   jquer   select   request对象   ber   xhtml   

原文地址:http://www.cnblogs.com/haimengqingyuan/p/7071919.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!