向您的页面添加 jQuery 库

jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。

可以通过下面的标记把 jQuery 添加到网页中：

<head>

<script type="text/javascript" src="jquery.js"></script>

</head>
请注意，<script> 标签应该位于页面的 <head> 部分。
Jquery需要下载，如果不想下载的话，可以将src部分改成网络链接
<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 是为事件处理特别设计的。
jQuery可以通知servlet
 

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 更小、更快，更易解析。

Json一个实例
{

"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用法的更多相关文章

  1. jquery ajax返回json数据进行前后台交互实例

    jquery ajax返回json数据进行前后台交互实例 利用jquery中的ajax提交数据然后由网站后台来根据我们提交的数据返回json格式的数据,下面我来演示一个实例. 先我们看演示代码 代码如 ...

  2. Spring MVC Controller与jquery ajax请求处理json

    在用 spring mvc 写应用的时候发现jquery传递的[json数组对象]参数后台接收不到,多订单的处理,ajax请求: "}]}]} $.ajax({ url : url, typ ...

  3. Ajax--PHP+JQuery+Ajax解析json、XML数据、加载页面

    一.JQuery+Ajax用get.post方式提交和请求数据 知识要点: $('#userName').blur(function () { var txt = $(this).val(); $.a ...

  4. jQuery.ajax() datatype:“json" 转换失败

    当使用jQuery.ajax() 时,如果设置dataType:"json",如果返回的字符转换出错则不会调用success方法,而进入error方法,控制台中也不会出现错误信息 ...

  5. jQuery ajax 传递JSON数组到Spring Controller

    jQuery ajax传递单个JSON对象到后台很容易,这里记录的是传递多个JSON对象组成的JSON数组到java 后台,并说明java如何解析JSON数组. 1.js代码 var relation ...

  6. Jquery Ajax 提交json数据

    在MVC控制器(这里是TestController)下有一个CreateOrder的Action方法 [HttpPost] public ActionResult CreateOrder(List&l ...

  7. JQuery ajax返回JSON时的处理方式

    最近在使用JQuery的ajax方法时,要求返回的数据为json数据,在处理的过程中遇到下面的几个问题,那就是采用不同的方式来生成json数据的时候,在$.ajax方法中应该是如何来处理的,下面依次来 ...

  8. 编程语言 - 脚本编程 - JavaScript/Jquery/Ajax/XML/JSON/ActionScript3

    事件处理onmouseover <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  9. Jquery ajax使用json形式通信

    前台JS $.ajax({                              type: 'post',                              url: 'HandlerL ...

随机推荐

  1. linux 卸载mysql

    RPM包安装方式的MySQL卸载 1: 检查是否安装了MySQL组件. [root@DB-Server init.d]# rpm -qa | grep -i mysql   MySQL-devel-5 ...

  2. [转]Idea2016 使用Maven配置简单Web项目（受益比较多的一篇）

    最近被同事一直吵着用Idea写Java,于是偷偷的去试用了一下Idea.确实不错,无论界面还是智能提醒都是蛮符合我的使用习惯,但是刚从Eclipse出来,使用Idea还是不太习惯的.所以这里写出来,供 ...

  3. 小知识：匿名类和lambda有什么区别？

    我只发现了关于this的区别: 匿名类的this,是指匿名类的实例对象. lambda的this,是指外部类的实例对象. 测试代码如下: /** * Created by LarryZeal on 2 ...

  4. mybaits if标签语句

    Mybatis if 标签可用在许多类型的 SQL 语句中,我们以查询为例.首先看一个很普通的查询: <!-- 查询用户列表,like用户名称 --> <select id=&quo ...

  5. e786. 创建JSpinner组件

    This example demonstrates how to build three kinds of spinners. A number spinner: // Create a number ...

  6. AWT和Swing之间的基本区别

    AWT和Swing之间的基本区别:AWT 是基于本地方法的C/C++程序,其运行速度比较快:Swing是基于AWT 的Java程序,其运行速度比较慢. 对于一个嵌入式应用来说,目标平台的硬件资源往往非 ...

  7. MVC2 ,MVC3 ,MVC4,MVC5的区别,EF的各个版本的区别;LocalDB是个啥

    2010年發行ASP.NET MVC 2.0版,2011年發行ASP.NET MVC 3.0版,2012年發行ASP.NET MVC 4.0版 MVC3 需要.net framework 4.0 版本 ...

  8. Java虚拟机性能管理神器 - VisualVM（2） 入门

    一下载VisualVM 最新版本下载 历史版本下载 二启动VisualVM 三VisualVM用户目录 四VisualVM窗口 1应用程序窗口 2详情窗口 五VisualVM插件   Java虚拟机性 ...

  9. SecureCRT同时发送命令到所有主机

    有时候我们需要在多台服务器上执行相同的命令,比如安装软件,复制,粘贴,删除等等,但一台一台的去操作工作量就太大了,我们可以借助SecureCRT这款客户端远程连接工具实现这样的要求! 相关阅读: 如何 ...

  10. javascript对数据处理

    数组去重 法一: // 遍历数组,建立新数组,利用indexOf判断是否存在于新数组中,不存在则push到新数组,最后返回新数组 function unique(ar) { var ret = []; ...