您的位置：首页 > Web前端 > JQuery

jQuery使用Ajax

2016-01-29 21:20 579 查看

使用方法

ajax的jquery用法如下：

GET情况：

$.ajax({
type:"GET",
url:"请求的服务器地址",
dataType:"返回的数据类型，可以不填写，jquery可以自动判断",
success:function(data){
"当状态码为200时，执行此段代码。data是服务器返回的数据，如果返回数据是json，则data是json转换成的对象"
},
error:function(res){
"当状态码非200时，执行此段代码，参数res是XMLHttpRequest()对象，res.status是对应状态码"
},
});


POST情况：

POST与GET除了type属性不同之外，还多加了一个data属性（json格式）作为POST的参数。

$.ajax({
type:"POST",
url:"请求的服务器地址",
data:{
属性名1:属性值1,
属性名2:属性值2,
属性名3:属性值3，
},
dataType:"返回的数据类型，可以不填写，jquery可以自动判断",
success:function(data){
"当状态码为200时，执行此段代码。data是服务器返回的数据，如果返回数据是json，则data是json转换成的对象"
},
error:function(res){
"当状态码非200时，执行此段代码，参数res是XMLHttpRequest()对象，res.status是对应状态码"
},
});


实例

XMLHttpRequestjQuery.html

<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<title>XMLHttpRequestJson</title>
<style type="text/css">
*{
font-size:25px;
line-height:1.8;
}
</style>
</head>
<body>

<h1>查询员工</h1>
员工编号：<input type="text" id="keyword"/>
<input type="button" id="search" value="查询"/><br/>
<p id="searchRes"></p>

<h1>添加员工</h1>
员工编号：<input type="text" id="id"/><br/>
员工姓名：<input type="text" id="name"/><br/>
员工职位：<input type="text" id="job"/><br/>
<input type="button" id="add" value="添加"/><br/>
<p id="addRes"></p>

<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script>
<script>
$(document).ready(function(){
//查询员工
$("#search").click(function(){
$.ajax({
type:"GET",
url:"./serverJson.php?id="+$("#keyword").val(),
dataType:"json",
success:function(data){
if(data.success){
$("#searchRes").html(data.msg);
}else{
$("#searchRes").html("查询失败："+data.msg);
}
},
error:function(res){
$("#searchRes").html("发生错误："+res.status);
},
});
});
//添加员工
$("#add").click(function(){
$.ajax({
type:"POST",
url:"./serverJson.php",
data:{
id:$("#id").val(),
name:$("#name").val(),
job:$("#job").val(),
},
dataType:"json",
success:function(data){
if(data.success){
$("#addRes").html(data.msg);
}else{
$("#addRes").html("添加失败："+data.msg);
}
},
error:function(res){
$("#addRes").html("发生错误："+res.status);
},
});
});
})

</script>
</body>
</html>


serverJson.php

<?php
header("Content-Type: application/json;charset=utf-8");

if($_SERVER["REQUEST_METHOD"] == "GET"){
search();
}elseif($_SERVER["REQUEST_METHOD"] == "POST"){
add();
}

function search(){
//判断职工编号是否正确填写
if(!isset($_GET["id"]) || empty($_GET["id"])){
echo '{"success":false,"msg":"参数错误"}';
return;
}
$id = $_GET["id"];
$result = '{"success":false,"msg":"请求失败，没有找到编号为'.$id.'的员工"}';

$mysqli = new mysqli('localhost', 'root', '', 'test');
$mysqli->query("SET NAMES UTF8");
$sql = "SELECT * FROM staff WHERE id=".$id;
$res = $mysqli->query($sql);
$row = $res->fetch_assoc();

if(is_array($row) && $row['id']==$id){
$msg = "找到员工<br/>员工编号：".$id."，员工姓名：".$row['name']."，员工职位：".$row['job'];
$result = '{"success":true,"msg":"'.$msg.'"}';
}
echo $result;
$mysqli->close();
}

function add(){
//判断信息是否填写完整
if(isset($_POST["id"])&&isset($_POST["name"])&&isset($_POST["job"])&&!empty($_POST["id"])&&!empty($_POST["name"])&&!empty($_POST["job"])){
$id = $_POST["id"];
$name = $_POST["name"];
$job = $_POST["job"];
$mysqli = new mysqli('localhost', 'root', '', 'test');
$mysqli->query("SET NAMES UTF8");
$sql = "INSERT INTO staff(id,name,job) VALUES ($id,'$name','$job')";
$result = $mysqli->query($sql);
if($result==true){
echo '{"success":true,"msg":"添加员工操作成功"}';
}
$mysqli->close();
}else{
echo '{"success":false,"msg":"信息填写不完整"}';
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航