AJAX请求数据_demo

本篇列举三个demo:

1、用ajax请求json格式数据(javascript)

2、用ajax请求json格式数据(Jquery)

3、用jsonp请求json格式数据(Jquery)

  • 页面只有实现两个功能（用get请求-获取数据 & 用post请求-设置修改数据）三个demo页面布局如下：
<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>请选择员工性别：</label>
<select id="staffSex">
<option>女</option>
<option>男</option>
</select><br>
<label>请输入员工职位：</label>
<input type="text" id="staffJob" /><br>
<button id="save">保存</button>
<p id="createResult"></p>

  • 其中demo1和demo2请求的一个php数据，PHP文件如下: serverjson.php:
<?php
//设置页面内容是html编码格式是utf-8
// header("Content-Type: text/plain;charset=utf-8");//纯文本格式
header("Content-Type: application/json;charset=utf-8");//json字符串
//header("Content-Type: text/xml;charset=utf-8");
//header("Content-Type: text/html;charset=utf-8");
//header("Content-Type: application/javascript;charset=utf-8"); 

//定义一个多维数组，包含员工的信息，每条员工信息为一个数组
$staff = array
    (
        array("name" => "洪七", "number" => "101", "sex" => "男", "job" => "总经理"),
        array("name" => "郭靖", "number" => "102", "sex" => "男", "job" => "开发工程师"),
        array("name" => "黄蓉", "number" => "103", "sex" => "女", "job" => "产品经理")
    );

//判断如果是get请求，则进行搜索；如果是POST请求，则进行新建
//$_SERVER是一个超全局变量，在一个脚本的全部作用域中都可用，不用使用global关键字
//$_SERVER["REQUEST_METHOD"]返回访问页面使用的请求方法
if ($_SERVER["REQUEST_METHOD"] == "GET") {
    search();
} elseif ($_SERVER["REQUEST_METHOD"] == "POST"){
    create();
}

//通过员工编号搜索员工
function search(){
    //检查是否有员工编号的参数
    // isset检测变量是否设置；empty判断值为否为空
    //超全局变量 $_GET 和 $_POST 用于收集表单数据
    if (!isset($_GET["number"]) || empty($_GET["number"])) {
        echo ‘{"success":false,"msg":"参数错误"}‘;
        return;
    }
    //函数之外声明的变量拥有 Global 作用域，只能在函数以外进行访问。
    //global 关键词用于访问函数内的全局变量
    global $staff;
    //获取number参数
    $number = $_GET["number"];
    $result = ‘{"success":false,"msg":"没有找到员工。"}‘;

    //遍历$staff多维数组，查找key值为number的员工是否存在，如果存在，则修改返回结果
    foreach ($staff as $value) {
        if ($value["number"] == $number) {
            $result = ‘{"success":true,"msg":"员工编号：‘ . $value["number"] .
                            ‘，员工姓名：‘ . $value["name"] .
                            ‘，员工性别：‘ . $value["sex"] .
                            ‘，员工职位：‘ . $value["job"] . ‘"}‘;
            break;
        }
    }
    echo $result;
}

//创建员工
function create(){
    //判断信息是否填写完全
    if (!isset($_POST["name"]) || empty($_POST["name"])
        || !isset($_POST["number"]) || empty($_POST["number"])
        || !isset($_POST["sex"]) || empty($_POST["sex"])
        || !isset($_POST["job"]) || empty($_POST["job"])) {
        echo ‘{"success":false,"msg":"参数错误，员工信息填写不全"}‘;
        return;
    }
    //TODO: 获取POST表单数据并保存到数据库

    //提示保存成功
    echo ‘{"success":true,"msg":"员工：‘ . $_POST["name"] . ‘ 信息保存成功！"}‘;
}

?>

demo1、用ajax请求json格式数据(javascript)

ajax访问serverjson.php的JS代码：

<script>
//get请求-查询数据
var search=document.getElementById(‘search‘);
var keyword=document.getElementById(‘keyword‘);
var searchResult=document.getElementById(‘searchResult‘);
search.onclick=function(){
    //1、创建XMLHttpRequest对象
    var xhr = new XMLHttpRequest();//非IE5、6
    //2、打开与服务器的链接
    xhr.open(‘get‘,‘serverjson.php?number=‘+keyword.value,true);
    //3、发送请求
    xhr.send();
    //4、响应请求
    xhr.onreadystatechange=function(){
        if (xhr.readyState===4) {//请求已完成
            if (xhr.status===200) {//
                //json字符创转化为json对象
                var data=eval(‘(‘+xhr.responseText+‘)‘);
                if (data.success){
                    searchResult.innerHTML="找到员工:"+data.msg;
                }else{
                    searchResult.innerHTML="出现错误:"+data.msg;
                }
            }else{
                alert(‘发生错误‘+xhr.status);
            }
        }
    }
}

//post请求-修改数据
var save=document.getElementById(‘save‘);
var staffName=document.getElementById(‘staffName‘);
var staffNumber=document.getElementById(‘staffNumber‘);
var staffSex=document.getElementById(‘staffSex‘);
var staffJob=document.getElementById(‘staffJob‘);
var createResult=document.getElementById(‘createResult‘);
save.onclick=function(){
    //1、创建XMLHttpRequest对象
    var xhr = new XMLHttpRequest();//非IE5、6
    //2、打开与服务器的链接
    xhr.open(‘post‘,‘serverjson.php‘,true);
    //post请求添加http头部信息
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    var data=‘name=‘+staffName.value
            +‘&number=‘+staffNumber.value
            +‘&sex=‘+staffSex.value
            +‘&job=‘+staffJob.value;
    //3、发送请求-send中传入字符串
    xhr.send(data);
    //4、响应请求
    xhr.onreadystatechange=function(){
        if (xhr.readyState===4) {//请求已完成
            if (xhr.status===200) {//
                var data=eval(‘(‘+xhr.responseText+‘)‘)
                if (data.success) {
                    createResult.innerHTML="成功:"+data.msg;
                }else{
                    createResult.innerHTML="错误:"+data.msg;
                }
            }else{
                alert(‘发生错误‘+xhr.status);
            }
        }
    }
}
</script>

demo2、用ajax请求json格式数据(Jquery)

Jquery 实现AJAX数据请求：

<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?number=" + $("#keyword").val(),
            dataType: "json",
            success: function(data) {
                if (data.success) {
                    $("#searchResult").html(data.msg);
                } else {
                    $("#searchResult").html("出现错误：" + data.msg);
                }
            },
            error: function(jqXHR){
               alert("发生错误：" + jqXHR.status);
            },
        });
    });

    $("#save").click(function(){
        $.ajax({
            type: "POST",
            url: "serverjson.php",
            data: {
                name: $("#staffName").val(),
                number: $("#staffNumber").val(),
                sex: $("#staffSex").val(),
                job: $("#staffJob").val()
            },
            dataType: "json",
            success: function(data){
                if (data.success) {
                    $("#createResult").html(data.msg);
                } else {
                    $("#createResult").html("出现错误：" + data.msg);
                }
            },
            error: function(jqXHR){
               alert("发生错误：" + jqXHR.status);
            },
        });
    });
});
</script>

demo3、用jsonp请求json格式数据(Jquery)

  • 其中demo3请求的一个php数据，PHP文件如下: serverjsonp.php:
<?php
header("Content-Type: application/json;charset=utf-8");

//定义一个多维数组，包含员工的信息，每条员工信息为一个数组
$staff = array
    (
        array("name" => "洪七", "number" => "101", "sex" => "男", "job" => "总经理"),
        array("name" => "郭靖", "number" => "102", "sex" => "男", "job" => "开发工程师"),
        array("name" => "黄蓉", "number" => "103", "sex" => "女", "job" => "产品经理")
    );

//判断如果是get请求，则进行搜索；如果是POST请求，则进行新建
//$_SERVER是一个超全局变量，在一个脚本的全部作用域中都可用，不用使用global关键字
//$_SERVER["REQUEST_METHOD"]返回访问页面使用的请求方法
if ($_SERVER["REQUEST_METHOD"] == "GET") {
    search();
} elseif ($_SERVER["REQUEST_METHOD"] == "POST"){
    create();
}

//通过员工编号搜索员工
function search(){
    $jsonp = $_GET["callback"];
    //检查是否有员工编号的参数
    //isset检测变量是否设置；empty判断值为否为空
    //超全局变量 $_GET 和 $_POST 用于收集表单数据
    if (!isset($_GET["number"]) || empty($_GET["number"])) {
        echo $jsonp . ‘({"success":false,"msg":"参数错误"})‘;
        return;
    }
    //函数之外声明的变量拥有 Global 作用域，只能在函数以外进行访问。
    //global 关键词用于访问函数内的全局变量
    global $staff;
    //获取number参数
    $number = $_GET["number"];
    $result = $jsonp . ‘({"success":false,"msg":"没有找到员工。"})‘;

    //遍历$staff多维数组，查找key值为number的员工是否存在，如果存在，则修改返回结果
    foreach ($staff as $value) {
        if ($value["number"] == $number) {
            $result = **$jsonp . ‘({"success":true,"msg":"找到员工：员工编号：‘ . $value["number"] .
                            ‘，员工姓名：‘ . $value["name"] .
                            ‘，员工性别：‘ . $value["sex"] .
                            ‘，员工职位：‘ . $value["job"] . ‘"})‘**;
            break;
        }
    }
    echo $result;
}

//创建员工
function create(){
    //判断信息是否填写完全
    if (!isset($_POST["name"]) || empty($_POST["name"])
        || !isset($_POST["number"]) || empty($_POST["number"])
        || !isset($_POST["sex"]) || empty($_POST["sex"])
        || !isset($_POST["job"]) || empty($_POST["job"])) {
        echo ‘{"success":false,"msg":"参数错误，员工信息填写不全"}‘;
        return;
    }
    //TODO: 获取POST表单数据并保存到数据库

    //提示保存成功
    echo ‘{"success":true,"msg":"员工：‘ . $_POST["name"] . ‘ 信息保存成功！"}‘;
}

?>

Jquery 实现-jsonp数据请求：

<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: "serverjsonp.php?number=" + $("#keyword").val(),
            **dataType: "jsonp",**
            **jsonp: "callback"**,
            success: function(data) {
                if (data.success) {
                    $("#searchResult").html(data.msg);
                } else {
                    $("#searchResult").html("出现错误：" + data.msg);
                }
            },
            error: function(jqXHR){
               alert("发生错误：" + jqXHR.status);
            },
        });
    });

    $("#save").click(function(){
        $.ajax({
            type: "POST",
            url: "serverjsonp.php",
            data: {
                name: $("#staffName").val(),
                number: $("#staffNumber").val(),
                sex: $("#staffSex").val(),
                job: $("#staffJob").val()
            },
            dataType: "json",
            success: function(data){
                if (data.success) {
                    $("#createResult").html(data.msg);
                } else {
                    $("#createResult").html("出现错误：" + data.msg);
                }
            },
            error: function(jqXHR){
               alert("发生错误：" + jqXHR.status);
            },
        });
    });
});
</script>

注意：jsonp能实现跨域请求，但只支持get请求，不支持post请求。

三个demo请求结果：

时间： 2024-11-05 06:07:51

AJAX请求数据_demo的相关文章

js方法内Ajax请求数据判断，验证无效（OnClientClick=&quot;return Method();&quot;），还是直接执行后台代码

function CheckAdd() { var flag = true; $.ajax({ cache: false, async: false, url: "/ajaxpage/getajax.aspx?t=adjserviceclientlist&Cellphone=" + Cellphone + "&a=" + Math.random(), dataType: 'json', success: function (data) { if (d

jQuery 中 ajax 请求数据应用的一个小demo

举一个jquery中ajax的应用小 demo 便于以后的更多项目拓展 ,这里要注意的是保存的文件名和文件图片路径问题 ... ajax01.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> ajax小例子 </title> </head> <body> <!--

session失效，使用ajax请求数据被拦截，此时正常的处理逻辑是跳到登录界面，而不是界面没有变化(java判断是否是ajax请求)

在登录过滤器中,判断请求是ajax请求还是超链接或者地址栏变化的请求 if (httpServletReq.getHeader("x-requested-with") != null && httpServletReq.getHeader("x-requested-with").equalsIgnoreCase("XMLHttpRequest")) { JSONObject jsessiontimeout = new JSONOb

原生与jQuery封装的ajax请求数据及状态码

原生Ajax 请求数据 btn.addEventListener('click',function(){ if(window.XMLHttpRequest){ var xhr = new window.XMLHttpRequest(); }else{ //兼容IE浏览器 var xhr = new ActiveXObject('Microsoft.XMLHTTP'); } //请求方式get/post //请求URL //ture 异步请求:false 同步请求 xhr.open('get','

关于ajax请求数据，并将数据赋值给全局变量的一些解决方法

在使用ajax请求数据是,开始的时候是打算将ajax的数据取出,并赋予给全局变量,但是在实际编码过程中发现并不能将数据赋予给最开始定义的全局变量,出现这个问题的原因是由于ajax异步加载的原因,所以只能用其他方法来解决,下来是解决的方法 第一个解决方法没有使用全局变量,直接在ajax请求中将请求到的数据赋值给需要的地方 第二个方法是将请求到的数据,通过方法传参来传递给一个方法,然后再方法中来调用请求到的数据,下面是实现的代码 var testData; $.ajax({ url: '/test'

Ajax请求数据与删除数据后刷新页面

1.ajax异步请求数据后填入模态框 请求数据的按钮(HTML) <a class="queryA" href="javascript:void(0)" onclick="query(${register.id})"> <span class="glyphicon glyphicon-search"></span></a>  ajax异步请求数据后给id为queryInfo的模态

使用ajax请求数据不能正常访问的问题

这两天做项目,使用$ajax访问数据,但是请求正常发出去,数据也返回来,只是数据不能进入success,如下图: 仔细观察会发现,数据里面的回调函数名 和应该返回的回调函数名不一致所造成的 这时需要修改jquery默认的回调函数名 方法如下: 添加属性 cache:true jsonpCallback:"你设置的函数名" 这时返回的回调函数为何所传的回调函数名一致 这时能够正常访问到数据 原文地址:https://www.cnblogs.com/li-qiang-blog/p/8563

Ajax请求数据

关于ajax异步刷新的两个方式 一.ajax的高层实现. /*$.post("server.php",{bigname:type}, function(data){ var arr=data.split(","); $("#small option").remove(); $("#small").append("<option value=''>请选择</option>"); for

Ajax 请求数据

----------------------------html------------------------- <ul class="forminfo" id="attrContent"> <li id="select_id"><label>商品类型<b>*</b></label> <div class="vocation"> <se