jQuery使用Ajax

使用方法

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":"信息填写不完整"}'; } }

你可能感兴趣的:(jQuery使用Ajax)