Jquery Ajax 和json用法
向您的页面添加 jQuery 库
jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。
可以通过下面的标记把 jQuery 添加到网页中：
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>
jQuery 语法
jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。
jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。
基础语法是：$(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
示例
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素
提示：jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节，您将学习到更多有关选择器的语法。
文档就绪函数
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：
一个小例子
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color","red");
});
});
</script>
</head> <body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body> </html>
jQuery AJAX 实例
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$('#test').load('/example/jquery/demo_test.txt');
})
})
</script>
</head> <body> <h3 id="test">请点击下面的按钮，通过 jQuery AJAX 改变这段文本。</h3>
<button id="btn1" type="button">获得外部的内容</button> </body>
</html>
jQuery $.get() 方法
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.get("/example/jquery/demo_test.asp",function(data,status){
alert("数据：" + data + "\n状态：" + status);
});
});
});
</script>
</head>
<body> <button>向页面发送 HTTP GET 请求，然后获得返回的结果</button> </body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("/example/jquery/demo_test_post.asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("数据：" + data + "\n状态：" + status);
});
});
});
</script>
</head>
<body> <button>向页面发送 HTTP POST 请求，并获得返回的结果</button> </body>
</html>
JQuery post方法
$.post() 方法通过 HTTP POST 请求从服务器上请求数据。
语法：
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.post() 连同请求一起发送数据：
实例
$("button").click(function(){
$.post("demo_test_post.asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
传递和接收的数据都是json格式，的所以，还有必要在学下json
$.post() 的第一个参数是我们希望请求的 URL ("demo_test_post.asp")。
然后我们连同请求（name 和 city）一起发送数据。
"demo_test_post.asp" 中的 ASP 脚本读取这些参数，对它们进行处理，然后返回结果。
第三个参数是回调函数。第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态。
添加新的 HTML 内容
我们将学习用于添加新内容的四个 jQuery 方法：
append() - 在被选元素的结尾插入内容
步骤大约是：
1. 写一个监听函数，等待被触发
2. 监听函数如果有参数的话，可以根据参数做相应的操作
3. 定位到要添加组件上（一般是parent级别，比如对于li,可能是ul)
4. $(要添加组件).append(要添加的东西)
demo
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append(" <b>Appended text</b>.");
}); $("#btn2").click(function(){
$("ol").append("<li>Appended item</li>");
});
});
</script>
</head> <body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">追加文本</button>
<button id="btn2">追加列表项</button>
</body>
</html>
JSON 教程
JSON：JavaScript 对象表示法（JavaScript Object Notation）。
JSON 是存储和交换文本信息的语法。类似 XML。
JSON 比 XML 更小、更快，更易解析。
{
"employees": [
{ "firstName":"Bill" , "lastName":"Gates" },
{ "firstName":"George" , "lastName":"Bush" },
{ "firstName":"Thomas" , "lastName":"Carter" }
]
}
这个 employee 对象是包含 3 个员工记录（对象）的数组。
JSON - 转换为 JavaScript 对象
JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。
由于这种相似性，无需解析器，JavaScript 程序能够使用内建的 eval() 函数，用 JSON 数据来生成原生的 JavaScript 对象。
JSON 使用 JavaScript 语法
因为 JSON 使用 JavaScript 语法，所以无需额外的软件就能处理 JavaScript 中的 JSON。
通过 JavaScript，您可以创建一个对象数组，并像这样进行赋值：
employees[1].firstName="Jobs";
通过parse函数来处理数据
<html>
<body>
<h2>通过 JSON 字符串来创建对象</h3>
<p>
First Name: <span id="fname"></span><br />
Last Name: <span id="lname"></span><br />
</p>
<script type="text/javascript">
var txt = '{"employees":[' +
'{"firstName":"Bill","lastName":"Gates" },' +
'{"firstName":"George","lastName":"Bush" },' +
'{"firstName":"Thomas","lastName":"Carter" }]}'; obj = JSON.parse(txt);
//var obj = eval ("(" + txt + ")");//更好的方案 document.getElementById("fname").innerHTML=obj.employees[1].firstName
document.getElementById("lname").innerHTML=obj.employees[1].lastName
</script>
</body>
</html>
我更需要的是获取数组长度的函数
var data = [{"id":"1","name":"a"},{"id":"2","name":"b"}];
alert(eval(data).length);
Jquery Ajax 和json用法的更多相关文章
- jquery ajax返回json数据进行前后台交互实例
jquery ajax返回json数据进行前后台交互实例 利用jquery中的ajax提交数据然后由网站后台来根据我们提交的数据返回json格式的数据,下面我来演示一个实例. 先我们看演示代码 代码如 ...
- Spring MVC Controller与jquery ajax请求处理json
在用 spring mvc 写应用的时候发现jquery传递的[json数组对象]参数后台接收不到,多订单的处理,ajax请求: "}]}]} $.ajax({ url : url, typ ...
- Ajax--PHP+JQuery+Ajax解析json、XML数据、加载页面
一.JQuery+Ajax用get.post方式提交和请求数据 知识要点: $('#userName').blur(function () { var txt = $(this).val(); $.a ...
- jQuery.ajax() datatype:“json" 转换失败
当使用jQuery.ajax() 时,如果设置dataType:"json",如果返回的字符转换出错则不会调用success方法,而进入error方法,控制台中也不会出现错误信息 ...
- jQuery ajax 传递JSON数组到Spring Controller
jQuery ajax传递单个JSON对象到后台很容易,这里记录的是传递多个JSON对象组成的JSON数组到java 后台,并说明java如何解析JSON数组. 1.js代码 var relation ...
- Jquery Ajax 提交json数据
在MVC控制器(这里是TestController)下有一个CreateOrder的Action方法 [HttpPost] public ActionResult CreateOrder(List&l ...
- JQuery ajax返回JSON时的处理方式
最近在使用JQuery的ajax方法时,要求返回的数据为json数据,在处理的过程中遇到下面的几个问题,那就是采用不同的方式来生成json数据的时候,在$.ajax方法中应该是如何来处理的,下面依次来 ...
- 编程语言 - 脚本编程 - JavaScript/Jquery/Ajax/XML/JSON/ActionScript3
事件处理onmouseover <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...
- Jquery ajax使用json形式通信
前台JS $.ajax({ type: 'post', url: 'HandlerL ...
随机推荐
- 再谈git的http服务
因为git服务器搬迁,需要重新安装git服务器,在网上搜索了下,发现之前的方法太复杂,复杂到自己都没彻底弄明白.其实通过git自带的git-http-backend脚本配合apache2的http服务 ...
- h5 rem
<script> (function(){ setRem(); window.addEventListener('orientation' in window?"deviceor ...
- CSS条件注释
由于浏览器版本的不同,对CSS里某些元素的解释也不一样,针对浏览器版本不同而选择不同CSS的代码,其实我们还可以利用条件注释的方法来达到类似的目的,什么是条件注释,在此简单介绍一下,无非就是一些if判 ...
- VMWare Workstation虚拟机网卡工作模式及配置方法
打开VMware→虚拟机→设置.如下图 一. 桥接模式(Bridge) 可将虚拟系统IP与本地系统设在同一网段,此时虚拟机相当于一台网络中与本机公用一个HUB的独立设备,网络中其他机器与虚拟机器.本地 ...
- android 向服务器上传
采用数据流的格式向服务器上传. 代码如下: private void upload(String requestURL) { //参数requestU ...
- python-s and s.strip()
s and s.strip()“ 这个表达式的值.Python语法是这么运行的: 如果s is None,那么s会被判断为False.而False不管和什么做and,结果都是False,所以不需要看a ...
- checkbox批量删除功能
参考:http://www.jb51.net/article/35338.htm 感谢作者 代码片段:jsp <c:forEach items="${infolist }" ...
- 认真研究下HTML之id、name、form、submit
#起因 同事希望在提交之后关闭父窗口,但是,始终没有提交请求发出.他的代码大概如下: // <form id='f' action=... // <button onclick='fun( ...
- Mysql 8.0.11版本，安装成功，使用Navicat连接失败。
Note:本文只针对mac!! 问题 安装mysql成功之后,想自己弄个数据库试试,但是报错.并不是错误代号,而是一段代码: Authentication plugin 'caching_sha2_p ...
- OpenStack Keystone架构
一. Keystone简介 1. OpenStack Keystone简介 2. Keystone安装与部署 2.1 包安装Keystone 2.2 源码安装源码安装 3 配置运行Keystone 3 ...