Ajax的简单实现(JQuary)
2024-08-23 20:28:54
还是之前的例子,相对来说,用JQ就简单了很多,真的多,因为JQ直接把方法都写好了,直接调用就行了,,ԾㅂԾ,,
php文件就不需要多做修改了,如下:
<?php
//改变Content-Type属性
header("Content-Type:application/json;charset:utf-8");
$nClass = array(
array("name" => "龙傲天","id" => "1","age" => "12","MartialArt" => "剑宗"),
array("name" => "钟岳","id" => "2","age" => "22","MartialArt" => "剑门山"),
array("name" => "叶凡","id" => "3","age" => "18","MartialArt" => "圣地")
); if ($_SERVER["REQUEST_METHOD"] == "GET"){
nSearch();
} elseif ($_SERVER["REQUEST_METHOD"] == "POST") {
# code...
nCreate();
} function nSearch(){
if (!isset($_GET["id"])||empty($_GET["id"])){
//改成Json数据格式
echo '{"success":false, "msg":"输入参数错误"}';
return;
} global $nClass;
$ID = $_GET["id"];
//改成Json数据格式
$result = '{"success":false,"msg":"没有该学员"}'; foreach ($nClass as $idValue) {
if ($idValue["id"] == $ID) {
//改成Json数据格式
$result = '{"success":true,"msg":"找到该学员:学号:'.$idValue["id"].',姓名:'.$idValue["name"].',年龄:'.$idValue["age"].',门派:'.$idValue["MartialArt"].'"}';
break;
}
} echo $result;
} function nCreate(){
if (!isset($_POST["name"]) || empty($_POST["name"])
|| !isset($_POST["id"]) || empty($_POST["id"])
|| !isset($_POST["age"]) || empty($_POST["age"])
|| !isset($_POST["MartialArt"]) || empty($_POST["MartialArt"])){
//改成Json数据格式
echo '{"success":false,"msg":"输入参数错误,学员信息不完全"}';
return;
}
//改成Json数据格式
echo '{"success":true,"msg":"学员:'.$_POST["name"].'信息保存成功!"}';
} ?>
Html里面需要引入JQ库了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--引入JQ-->
<script type="text/javascript" src="../PHPTest/Js/jquery-1.12.4.js"></script>
<title>Document</title>
</head>
<body>
<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="oName"><br>
<label>请输入学号:</label>
<input type="text" id="oId"><br>
<label for="">请输入年龄:</label>
<input type="text" id="oAge"><br>
<label>请输入门派:</label>
<input type="text" id="oMartialArt"><br>
<button id="save">保存</button>
<p id="createResult"></p> <script type="text/javascript">
$(document).ready(function (){
$("#search").click(function () {
$.ajax({
type:"GET",
url:"newJsonPHP.php?id=" + $("#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:"newJsonPHP.php",
dataType:"JSON",
data:{
name:$("#oName").val(),
id:$("#oId").val(),
age:$("#oAge").val(),
MartialArt:$("#oMartialArt").val(),
},
success:function (data){
if (data.success) {
$("#createResult").html(data.msg);
} else {
$("#createResult").html("出现错误:" + data.msg);
}
},
error:function (JqXHR) {
alert("发生错误:" + JqXHR.status);
}
});
}); }); </script>
</body>
</html>
最新文章
- 实例:对2个Makefile的备注
- css3的transition过渡
- UVA11426 欧拉函数
- 配置ogg异构oracle-mysql(1)基础环境配置
- li ul 说明
- 25、java中观察者模式Observable和Observer
- json-lib date对象转json ,加入自定义日期格式处理
- 【leetcode❤python】27. Remove Element
- Gtest打桩函数
- jQuery插件的点点滴滴
- 基于visual Studio2013解决面试题之0208二叉搜索树后序遍历序列
- POJ 2318 TOYS(计算几何)
- URL设置问题
- C#程序编写规范
- JQuery:怎么动态切换一个元素的显示、隐藏呢?原来隐藏就显示,原来显示就隐藏
- java webdriver的api的封装
- 小程序for循环嵌套
- Redis-Desktop-Manager的下载与使用
- swift 4.2 - 根据字符串 push指定控制器
- jvm调优的分类