Ajax的简单实现(JQuary)
还是之前的例子,相对来说,用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>
Ajax的简单实现(JQuary)的更多相关文章
- html --- ajax --- javascript --- 简单的封装
Ajax的简单封装 Ajax的全称是AsynchronousJavaScriptAndXML 如有疑问请参考:http://zh.wikipedia.org/zh-cn/AJAX 以及传智播客的视频教 ...
- MVC3.0+knockout.js+Ajax 实现简单的增删改查
MVC3.0+knockout.js+Ajax 实现简单的增删改查 自从到北京入职以来就再也没有接触MVC,很多都已经淡忘了,最近一直在看knockout.js 和webAPI,本来打算采用MVC+k ...
- php+jquery+ajax+json简单小例子
直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...
- 第107天:Ajax 实现简单的登录效果
使用 Ajax 实现简单的登录效果 Ajax是一项使局部网页请求服务器信息,而不需整体刷新网页内容的异步更新技术.这使得向服务器请求的数据量大大减少,而且不会因局部的请求失败而影响到整体网页的加载. ...
- Django ajax的简单使用、自定义分页器
一. ajax初识 1. 前后端传输数据编码格式contentType 使用form表单向后端提交数据时,必须将form表单的method由默认的get改为post,如果提交的数据中包含文件,还要将f ...
- AJAX实现简单的注册页面异步请求
p { margin: 0px; padding: 0px } AJAX简介 (1)AJAX = 异步 JavaScript 和 XML. (2)AJAX 是一种用于创建快速动态网页的技术. (3)通 ...
- 让Ajax更简单
之前写了一篇 ASP.NET中一种超简单的Ajax解决方案 最近把他拿出来更新了下,把demo也搞的更详细了一点 加入了blqw.Json,所以支持更多类型参数和返回值 优化了对exception的处 ...
- ASP.NET MVC Ajax.ActionLink 简单用法
ASP.NET MVC 项目中,如何使用类似于 iframe 的效果呢?或者说 Ajax 局部刷新,比如下面操作: 我们想要的效果是,点击 About 链接,页面不刷新(地址栏不变),然后下面的内容进 ...
- AJAX 的简单用法:
AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以 ...
随机推荐
- Educational Codeforces Round 31
A. Book Reading time limit per test 2 seconds memory limit per test 256 megabytes input standard inp ...
- 使用python实现简单的爬虫
python爬虫的简单实现 开发环境的配置 python环境的安装 编辑器的安装 爬虫的实现 包的安装 简单爬虫的初步实现 将数据写入到数据库-简单的数据清洗-数据库的连接-数据写入到数据库 开发环境 ...
- ajax 下拉加载更多效果
1.生成HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- iOS学习笔记22-推送通知
一.推送通知 推送通知就是向用户推送一条信息来通知用户某件事件,可以在应用退到后台后,或者关闭后,能够通过推送一条消息通知用户某件事情,比如版本更新等等. 推送通知的常用应用场景: 一些任务管理APP ...
- [BZOJ4776] [Usaco2017 Open]Modern Art(差分 + 思维?)
传送门 可以预处理出每种颜色的上下左右的位置,这样就框出来了一个个矩形,代表每种颜色分别涂了哪里. 然后用二维的差分. 就可以求出来每个位置至少涂了几次,如果 > 1 的话,就肯定不是先涂的, ...
- BZOJ3124 [Sdoi2013]直径 【树的直径】
题目 小Q最近学习了一些图论知识.根据课本,有如下定义.树:无回路且连通的无向图,每条边都有正整数的权值来表示其长度.如果一棵树有N个节点,可以证明其有且仅有N-1 条边. 路径:一棵树上,任意两个节 ...
- 【2018.10.20】CXM笔记(思维)
1. 给你个环状字符串,问从哪个地方拆开能使它的字典序最小. 先预处理任意子串的哈希值. 然后枚举拆点,将它与当前最优的拆点比较谁更优(就是从哪拆的字典序更小),具体方法是二分+哈希找出两串最长的相同 ...
- 【bzoj1854】[Scoi2010]游戏 - 并查集
lxhgww最近迷上了一款游戏,在游戏里,他拥有很多的装备,每种装备都有2个属性,这些属性的值用[1,10000]之间的数表示.当他使用某种装备时,他只能使用该装备的某一个属性.并且每种装备最多只能使 ...
- spring 找不到applicationContext.xml解决方法
初学Spring在用Resource rs=new ClassPathResource("applicationContext.xml");时老是遇到这个错误.后来发现用Appli ...
- HTML中字体单位px pt em之间的转换
在实现打印功能时,遇到一个问题,使用px作为单位在不同的机器或者打印机上打印出的字体大小不一样,所以经过查询,发现使用pt为单位能够进行物流适配,下面是各单位之间的转换: 定义字体大小有常见三种单位, ...