jQuery使用Ajax

来源：互联网发布：java反序列化漏洞新浪编辑：程序博客网时间：2024/04/27 22:02

使用方法

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

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

0 0