ajax和php的结合使用

最新推荐文章于 2021-08-06 03:33:56 发布

lei2350934xj

最新推荐文章于 2021-08-06 03:33:56 发布

阅读量262

点赞数 1

分类专栏： ajax

本文链接：https://blog.csdn.net/lei2350934xj/article/details/72920732

版权

ajax 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

注：前端文件index.html和后端文件formCheck.php都放在 Apache的安装目录下的myApp文件夹里。

（1）index.html

<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>

<body>
<div>


<form action="./formCheck.php" method="post" id="form">
用户名：<input type="text"><br>
密码：<input type="password"><br>
<input type="button" value="登录" id="btn">
</form>
</div>
</body>
</html>

<script>
function ajax() {
// ajax工作原理
// 1.创建XMLHttpRequest对象
// 2.open() 配置请求信息： GET/POST url地址同步／异步
// 3.send() 发送 GET时候里面null 。POST时候里面String
// 4.onreadystatechange = function(){} 请求成功处理函数

var http_request = null;

// 1.
if(window.XMLHttpRequest) { // 非IE浏览器
http_request = new XMLHttpRequest();
}else if(window.ActiveXObject) { // IE浏览器
try{
http_request = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
}
}

// 2.
// 设置异步请求目标为 ****的文件（这里是formCheck.php文件）,请求方法为GET 非常重要 get方法可以把相应的表单信息拼接在?后面
http_request.open("GET","formCheck.php?username=liangting&&password=666666",true);

// 3.
// 3.1向服务器发送一个不包含任何参数的请求---GET方式
http_request.send(null);

// 4.
// 回调函数的具体代码
http_request.onreadystatechange = function () {
if(http_request.readyState == 4) { // 判断请求状态
if(http_request.status == 200) { // 请求成功，开始处理返回结果
alert(http_request.responseText);
}else {
alert("您请求的页面有错误！");
}
}
}
}

var btn = document.getElementById("btn");
var form = document.getElementById("form");

btn.onclick = function() {
// 这里用get方式，也就是仅仅去请求服务端的信息，所有send方法里面参数为null
// 通过调用ajax函数去获得服务器端的信息并渲染到页面上
// 所以下一步去写后端代码 formCheck.php文件
ajax();
}
</script>

（3）formCheck.php文件

<?php
$username = $_GET['username']; // get方法提交的就用$_GET[]的方法去取提交的信息
$password = $_GET['password'];

echo $username.$password; // 用$echo 语句直接输出 php中用 . 作为字符串拼接
?>