环境准备
1.开发工具Phpstorm
2.php开发环境包xampp
3.juqery.min.js依赖
代码实现
请求页面:html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax_index</title>
<script src="jquery-3.1.1.min.js"></script>
<script src="ajaxindex.js"></script>
</head>
<body>
<input type="text" id="namevalue" style="margin: 10px;padding: 5px;" placeholder="请输入用户名">
<br/>
<br/>
<button id="btn" style="margin-left: 10px;padding: 5px;border-radius: 6px;">send</button>
<hr/>
<br/>
結果是:<span id="result"></span>
</body>
</html>
按钮监听时间js:
$(document).ready(function () {
$("#btn").on("click", function () {
$("#result").text("正在通讯中...");
//此处为是两种实现的方法
/* $.get("server.php", {name: $("#namevalue").val()}, function (data) {
$("#result").text(data);
}).error(function () {
$("#result").text("通讯错误!")
}
)*/
$.ajax({
url: "server.php",
data: {name:$("#namevalue").val()},
success: function (data) {
$("#result").text(data);
},
error:function () {
$("#result").text("通讯错误!")
}
});
})
});
模拟服务处理:server.php
<?php
/**
* Created by PhpStorm.
* User: SF
* Date: 2016/10/10
* Time: 10:59
*/
if (isset($_GET['name'])) {
echo 'hello:' . $_GET['name'];
} else {
echo "Args Error";
}
?>