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 可以使网页实现异步更新.这意味着可以 ...
随机推荐
- 六丶人生苦短，我用python【第六篇】
Python基础之函数 三元运算 三元运算(三目运算),是对简单的条件语句的缩写. # 书写格式 result = 值1 if 条件 else 值2 # 如果条件成立,那么将 “值1” 赋值给resu ...
- ctype.h 第2章
ctype.h ctype.h是c标准函数库中的头文件 定义了一批c语言字符分类函数 (c character classification functions) 用于测试字符是否属于特定的字 ...
- matlab调用自己写的函数时报错： reference to a cleared variable
原因是在自己写的函数中加了clear. 解决办法:自己定义的函数中不能加clear,可以加clc;
- .NET重构（一）：抽象工厂模式实现登录
导读:一路艰辛,我也走到了重构.在重构之前,师傅让用经典三层(UI.BLL.DAL)敲了登录.用户的增删改查,共五条线.从开始对三层的朦胧,到五条线结束,终于对三层有了逻辑上清晰的理解.然后就画了几天 ...
- Spring Data Redis 的坑
用 Spring data redis 的redisTemplate存储数据的时候发现,它的键值前多出现了字符串:\xac\xed\x00\x05t\x00\x03 如本来key=name,会变成&q ...
- 多线程-java并发编程实战笔记
线程安全性 编写线程安全的代码实质上就是管理对状态的访问,而且通常都是共享的,可变的状态. 一个对象的状态就是他的数据,存储在状态变量中,比如实例域或静态域.所谓共享是指一个对象可以被多个线程访问:所 ...
- HDU 5033 Building（北京网络赛B题） 单调栈 找规律
做了三天,,,终于a了... 11724203 2014-09-25 09:37:44 Accepted 5033 781MS 7400K 4751 B G++ czy Building Time L ...
- css3 画半圆和1/4圆
半圆: #circle1 { width: 100px; height: 200px; background-color: #a72525; -webkit-border-radius: 100px ...
- POJ 3694 (tarjan缩点+LCA+并查集)
好久没写过这么长的代码了,题解东哥讲了那么多,并查集优化还是很厉害的,赶快做做前几天碰到的相似的题. #include <iostream> #include <algorithm& ...
- spark学习（二）
Spark是一个通用的并行计算框架,由UCBerkeley的AMP实验室开发. Spark和Hadoop有什么不同呢? Spark是基于map reduce算法实现的分布式计算,拥有Hadoop Ma ...