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 ...
随机推荐
- js 添加天数
//日期加上天数得到新的日期 //dateTemp 需要参加计算的日期,days要添加的天数,返回新的日期,日期格式:YYYY-MM-DD function getNewDay(dateTemp, d ...
- 虚拟机安装以及PCL的配置（2）
那我们无论在虚拟机还是在双系统的Ubuntu环境下都是一样的安装过程 我们使用快捷键“ctrl+alt+T”,来打开一个命令窗口如下图 比如我们在命令窗口下输入ls 我们会看到在主目录下的所有文件 下 ...
- linux下shellcode提取常用到的命令
汇编语言的汇编指令: nasm -f elf xxx.asm 生成xxx.o文件 ld -o xxx xxx.o 生成可执行文件,不用加参数-s ,否则在提取shellcode的十六进制码的 ...
- SpringMVC深度探险（一） —— SpringMVC前传
在我们熟知的建立在三层结构(表示层.业务逻辑层.持久层)基础之上的J2EE应用程序开发之中,表示层的解决方案最多.因为在表示层自身的知识触角很多,需要解决的问题也不少,这也就难免造成与之对应的解决方案 ...
- CRNA的使用
为了能让更多人感受 RN 的魅力,早在几个月前 React-community 就给出了一个不错的解决方案,可以让一个完全没接触过 RN 的人,从配环境开始5分钟实现 Hello Wolrd 的编写( ...
- sparkR的一个运行的例子
在sparkR在配置完成的基础上,本例采用Spark on yarn模式,介绍sparkR运行的一个例子. 在spark的安装目录下,/examples/src/main/r,有一个dataframe ...
- php 统计一维数组中重复的元素个数
<?php echo "<pre>"; $array = array(1, 1, 1, 54, 3,4, 3,4, 3, 14, 3,4, 3,7,8,9,12, ...
- 关于Unity中的光照(五)
Mobile Diffuse Unity自带的一种shader,用的比较多,性能还可以.我们默认创建的unit shader基本和它一致,但是没有参与光照计算,看起来和Mobile Diffuse有区 ...
- 提供openssl -aes-256-cbc兼容加密/解密的简单python函数
原文链接:http://joelinoff.com/blog/?p=885 这里的示例显示了如何使用python以与openssl aes-256-cbc完全兼容的方式加密和解密数据.它是基于我在本网 ...
- 情商UP:不遵守八小时工作制，你就能富起来?？
从工作第一天起,我们就默认了八小时工作制,但从没有想过,这是不是最高效的工作时间. 事实上,八小时工作制并没有科学依据,不过是多年来约定俗成的习惯罢了. 那些坚守八小时工作制的人和敢于打破它的人,都获 ...