用ajax实现post和get提交实现前后端交互

最新推荐文章于 2021-02-23 16:16:27 发布

OrdnAry

最新推荐文章于 2021-02-23 16:16:27 发布

阅读量380

点赞数

分类专栏：学习文章标签： ajax php

本文链接：https://blog.youkuaiyun.com/OrdnAry/article/details/108421840

版权

学习专栏收录该内容

59 篇文章

订阅专栏

封装ajax_回调函数.html  页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>    
        function $ajax({method = "get",url,data,sucess,error}){
            //1、创建ajax对象
            var xhr = null;
                try{
                    xhr = new XMLHttpRequest();
                }catch(error){
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
            //判断如果数据存在
            if(data){
                data = querystring(data);
            }
            if(method == "get" && data){
                url += "?" + data;
            }
            xhr.open(method,url,true);
                    
            if(method == "get"){
            xhr.send();
            }else{
            //必须在send方法之前，去设置请求的格式
            xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
            xhr.send(data);
            }
            //4、等待数据响应
                   
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                //判断本次下载的状态码都是多少
                    if(xhr.status == 200){
                        /*
                        如何去处理数据不确定
                        回调函数，
                        */
                        if(sucess){
                            sucess(xhr.responseText);
                        }
                    }else{
                        if(error){
                            error("Error:" + xhr.status);
                        }
                      }
                }
            }
        }
        //转成字符串函数
        function querystring(obj){
            var str ="";
            for (var attr in obj) {
               str += attr + "=" + obj[attr] +"&";
            }
           return  str.substring(0,str.length - 1)
        }
        window.onload = function(){
            var oGetBtn = document.getElementById("getBtn");
            var oPostBtn = document.getElementById("postBtn")
            ;
            //1.get请求
            oGetBtn.onclick = function(){
                $ajax({
                    url: "1.get.php",
                    data: {
                        username:"xxx",
                        age: "18",
                        password: "123abc"
                    },
                    sucess: function(result){
                        alert("GET请求下载到的数据：" + result);
                    },
                    error: function(msg){
                        alert(msg);
                    }
                })
            }
            //2.post请求
            oPostBtn.onclick = function(){
                $ajax({
                    method: "post",
                    url: "1.post.php",
                    data: {
                        username:"xxx",
                        age: "18",
                        password: "123abc"
                    },
                    sucess: function(result){
                        alert("POST请求下载到的数据：" + result);
                    },
                    error: function(msg){
                        alert(msg);
                    }
                })
            }
        }
    </script>
</head>
<body>
    <button id="getBtn">GET请求</button>
    <button id="postBtn">POST请求</button>
</body>
</html>

1.get.php 页面

<?php
header('content-type:text/html;charset="utf-8"');

/* 
	$_GET（全局的关联数组）  存放通过get提交提交的所有数据
*/


$username = $_GET['username'];
$age = $_GET['age'];
$password = $_GET["password"];

/*获取?后面对应健的值*/



echo "你的名字：{$username}，年龄：{$age}，密码：{$password}";
?>

在这里插入图片描述

1.post.php 页面

<?php
header('content-type:text/html;charset="utf-8"');



/*
		$_POST全局数组
		存储过来的post发送过来的数组

*/
$username = $_POST['username'];
$age = $_POST['age'];
$password = $_POST["password"];

echo "你的名字：{$username}，年龄：{$age}, 密码：{$password}";