【Ajax】01-PHP-BASE 02-get 03-post-file 04-ajax-get 05-用户注册ajax接口测试(使用后端人员提供的文档)

01-PHP-BASE

<?php
// 1.JS中有两种注释
// 1.1单行注释
// 1.2多行注释
//
/* */

// 2.JS中如何定义变量?
//var num = 10;
//$num = 10;

// 3.JS中如何打印内容?
//console.log();
// 注意点: 后端编写的代码不能直接运行, 只能放到服务器对应的文件夹下, 通过服务器运行
// 如何通过服务器运行: 通过ip地址找到服务器对应的文件夹, 然后再找到对应的文件运行
//echo $num;

// 4.JS中如何定义集合
// 4.1数组
// 4.2字典(对象)
//var arr = [1, 3, 5];
// arr[0];
//$arr = array(1, 3, 5);
//print_r($arr);
//echo "<br>";
//echo $arr[1];

//var dict = {"name":"lnj", "age":"33"};
// dict["name"];
//$dict = array("name"=>"lnj", "age"=>"33");
//print_r($dict);
//echo  "<br>";
//echo $dict["name"];

// 5.JS中的分支循环语句
// if/switch/三目/for/while
//$age = 16;
//if($age >= 18){
//    echo "成年人";
//}else{
//    echo "未成年人";
//}

//$res = ($age >= 18) ? "成年人" : "未成年人";
//echo $res;

//switch ($age){
//    case -1:
//        echo "非人类";
//        break;
//    case 18:
//        echo "成年人";
//        break;
//    default:
//        echo "未成年人";
//        break;
//}

$arr = array(1, 3, 5);
//for($i = 0; $i < count($arr); $i++){
//    echo $arr[$i];
//    echo "<br>";
//}
$index = 0;
while ($index < count($arr)){
    echo $arr[$index];
    echo "<br>";
    $index++;
}
?>

02-get

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-get</title>
</head>
<body>
<!--
1.可以通过form标签的method属性指定发送请求的类型
2.如果是get请求会将提交的数据拼接到URL后面
?userName=lnj&userPwd=123456
3.如果是post请求会将提交的数据放到请求头中

4.GET请求和POST请求的异同
4.1相同点:
都是将数据提交到远程服务器
4.2不同点:
4.2.1提交数据存储的位置不同
GET请求会将数据放到URL后面
POST请求会将数据放到请求头中
4.2.2提交数据大小限制不同
GET请求对数据有大小限制
POST请求对数据没有大小限制

5.GET/POST请求应用场景
GET请求用于提交非敏感数据和小数据
POST请求用于提交敏感数据和大数据
-->
<form action="02-get-post.php" method="post">
    <input type="text" name="userName"><br>
    <input type="password" name="userPwd"><br>
    <input type="submit" value="提交"><br>
</form>
</body>
</html>

<?php
//print_r($_GET);
//echo $_GET["userName"];
//echo $_GET["userPwd"];

//print_r($_POST);
//echo $_POST["userName"];
//echo $_POST["userPwd"];
?>

03-post-file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-post-file</title>
</head>
<body>
<!--
注意:
1.上传文件一般使用POST提交
2.上传文件必须设置enctype="multipart/form-data"

3.上传的文件在PHP中可以通过$_FILES获取
4.PHP中文件默认会上传到一个临时目录, 接收完毕之后会自动删除
-->
<!--
默认情况下服务器对上传文件的大小是有限制的, 如果想修改上传文件的限制可以修改php.ini文件
file_uploads = On   ; 是否允许上传文件 On/Off 默认是On
upload_max_filesize = 2048M       ; 上传文件的最大限制
post_max_size = 2048M             ; 通过Post提交的最多数据

max_execution_time = 30000      ; 脚本最长的执行时间 单位为秒
max_input_time = 30000          ; 接收提交的数据的时间限制 单位为秒
memory_limit = 2048M            ; 最大的内存消耗
-->
<form action="03-post-file.php" method="post" enctype="multipart/form-data">
    <input type="file" name="upFile"><br>
    <input type="submit" value="上传"><br>
</form>
</body>
</html>

<?php
//echo "post page";
//print_r($_POST);
//echo "<br>";
//print_r($_FILES);

// 1.获取上传文件对应的字典
$fileInfo = $_FILES["upFile"];
//print_r($fileInfo);
// 2.获取上传文件的名称
$fileName = $fileInfo["name"];
// 3.获取上传文件保存的临时路径
$filePath = $fileInfo["tmp_name"];

//echo $fileName;
//echo "<br>";
//echo $filePath;

// 4.移动文件
move_uploaded_file($filePath, "./source/".$fileName);
?>

04-ajax-get

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04-ajax-get</title>
    <!--
    1.什么是Ajax?
    AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。
    -->
    <script>
        window.onload = function (ev) {
            var oBtn = document.querySelector("button");
            oBtn.onclick = function (ev1) {
                // 1.创建一个异步对象
                var xmlhttp=new XMLHttpRequest();
                // 2.设置请求方式和请求地址
                /*
                method:请求的类型;GET 或 POST
                url:文件在服务器上的位置
                async:true(异步)或 false(同步)
                */
                xmlhttp.open("GET", "04-ajax-get.php", true);
                // 3.发送请求
                xmlhttp.send();
                // 4.监听状态的变化
                xmlhttp.onreadystatechange = function (ev2) {
                    /*
                    0: 请求未初始化
                    1: 服务器连接已建立
                    2: 请求已接收
                    3: 请求处理中
                    4: 请求已完成,且响应已就绪
                    */
                    if(xmlhttp.readyState === 4){
                        // 判断是否请求成功
                        if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
                           xmlhttp.status === 304){
                            // 5.处理返回的结果
                            console.log("接收到服务器返回的数据");
                        }else{
                            console.log("没有接收到服务器返回的数据");
                        }

                    }
                }
            }
        }
    </script>
</head>
<body>
<button>发送请求</button>
</body>
</html>

<?php
//sleep(5);
//echo "ajax get page";
echo $_GET["userName"];
echo "<br>";
echo $_GET["userPwd"];
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-ajax-get</title>

    <script>
        window.onload = function (ev) {

            var oBtn = document.querySelector("button");
            oBtn.onclick = function (ev1) {
                var xhr;
                if (window.XMLHttpRequest)
                {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xhr=new XMLHttpRequest();
                }
                else
                {// code for IE6, IE5
                    xhr=new ActiveXObject("Microsoft.XMLHTTP");
                }
                // var xhr = new XMLHttpRequest();
                /*
                在IE浏览器中, 如果通过Ajax发送GET请求, 那么IE浏览器认为
                同一个URL只有一个结果
                05-ajax-get.txt === abc

                console.log(Math.random());
                console.log(new Date().getTime());
                */
                xhr.open("GET","05-ajax-get.txt?t="+(new Date().getTime()),true);
                xhr.send();
                xhr.onreadystatechange = function (ev2) {
                    if(xhr.readyState === 4){
                        if(xhr.status >= 200 && xhr.status < 300 ||
                        xhr.status === 304){
                            // alert("请求成功");
                            alert(xhr.responseText);
                        }else{
                            alert("请求失败");
                        }
                    }
                }
            }
        }
    </script>
</head>
<body>
<button>发送请求</button>
</body>
</html>

abc def

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06-ajax-get</title>
    <script src="myAjax.js"></script>
    <script>
        window.onload = function (ev) {
            var oBtn = document.querySelector("button");
            var res = encodeURIComponent("wd=张三");
            console.log(res);
            oBtn.onclick = function (ev1) {
                //                            %E5%BC%A0%E4%B8%89
                // https://www.baidu.com/s?wd=%E5%BC%A0%E4%B8%89
                // url?key=value&key=value;
                ajax("04-ajax-get.php", {
                    "userName":"lnj",
                    "userPwd":"123456"
                }, 3000
                , function (xhr) {
                    alert(xhr.responseText);
                }, function (xhr) {
                    alert("请求失败");
                });
            }
        }
    </script>

</head>
<body>
<button>发送请求</button>
</body>
</html>

05-用户注册ajax接口测试(使用后端人员提供的文档)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册ajax接口测试</title>
<link rel="stylesheet" href="style/common.css">
<script src="myAjax.js"></script>
<script>

/*   usage:	07-user.php?act=xxx&user=用户名&pass=密码
			act:
				add——注册用户
				login——登陆
	
	return:	{error: 0, desc: 文字描述信息}
			error:
				0	成功
				1	失败——具体原因参考desc
*/
window.onload = function(){ 
	var oUser = document.getElementById("add_user");
	var oPass = document.getElementById("add_pass");
	var oBtn  = document.getElementById("add_btn");

	//注册
	oBtn.onclick = function(){

	    var json = {
	        "act": "add",
            "user":oUser.value,
            "pass":oPass.value
        };
	    ajax("07-user.php",json,function (xhr) {
            alert(xhr.responseText);
        }, function (xhr) {
            alert("失败");
        });
	};
};
</script>
</head>

<body>
<!--登陆-->
<div class="loginBox">
	<ul class="loginList clearfix">
    	<li class="hTxt">用户注册</li>
        <li class="inputBox">
        	<input type="text" class="inputs" id="add_user">
        </li>
        <li class="inputBox">
        	<input type="password" class="inputs" id="add_pass">
        </li>
        <li class="btns">
            <input id="add_btn" type="button" class="reg" value="" />
        </li>
        <li class="look"><a href="07-user_view.php" target="_blank">查看已注册用户</a></li>
    </ul>
</div>
</body>
</html>

后端的文档
<?php
/*
**********************************************
	usage:	07-user.php?act=xxx&user=用户名&pass=密码
			act:
				add——注册用户
				login——登陆
	
	return:	{error: 0, desc: 文字描述信息}
			error:
				0	成功
				1	失败——具体原因参考desc
**********************************************
*/

//创建数据库之类的
$db=@mysql_connect('localhost', 'root', '') or @mysql_connect('localhost', 'root', 'admin');

mysql_query("set names 'utf8'");
mysql_query('CREATE DATABASE it666_ajax');

mysql_select_db('it666_ajax');

$sql= <<< END
CREATE TABLE  `it666_ajax`.`user` (
`ID` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`username` VARCHAR( 255 ) NOT NULL ,
`password` VARCHAR( 255 ) NOT NULL
) CHARACTER SET utf8 COLLATE utf8_general_ci
END;

mysql_query($sql);

//正式开始
//header('Content-type:zns/json');

$act=$_GET['act'];
$user=strtolower($_GET['user']);
$pass=$_GET['pass'];

switch($act)
{
	case 'add':
		$sql="SELECT COUNT(*) FROM user WHERE username='{$user}'";
		
		$res=mysql_query($sql);
		
		$row=mysql_fetch_array($res);
		
		if((int)$row[0]>0)
		{
			echo '{error: 1, desc: "此用户名已被占用"}';
			exit();
		}
		
		$sql="INSERT INTO user (ID,username,password) VALUES(0,'{$user}','{$pass}')";
		mysql_query($sql);
		
		echo '{error: 0, desc: "注册成功"}';
		break;
	case 'login':
		$sql="SELECT COUNT(*) FROM user WHERE username='{$user}' AND password='{$pass}'";
		$res=mysql_query($sql);
		
		$row=mysql_fetch_array($res);
		
		if((int)$row[0]>0)
		{
			echo '{error: 0, desc: "登陆成功"}';
			exit();
		}
		else
		{
			echo '{error: 1, desc: "用户名或密码有误"}';
			exit();
		}
		break;
}
?>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值