JQuery-Jquery Ajax

最新推荐文章于 2025-03-07 23:40:50 发布

好来污最佳男主角

最新推荐文章于 2025-03-07 23:40:50 发布

阅读量311

点赞数

文章标签： jquery

本文链接：https://blog.youkuaiyun.com/Hello_zbs/article/details/108311202

版权

Jquery对象

jQuery 是⼀套兼容多浏览器的 javascript 脚本库.。核⼼理念是写得更少，做得更多，使⽤ jQuery 将极⼤的提⾼编写 javascript 代码的效率，帮助开发者节省了⼤量的⼯作，让写出来的代码更加优雅，更加健壮，“如⻁添翼”。同时⽹络上丰富的 jQuery 插件，也让我们的⼯作变成了"有了 jQuery，⼀切 soeasy。" – 因为我们已经站在巨⼈的肩膀上了。

jQuery 在 2006 年 1 ⽉由美国⼈ John Resig 在纽约的 barcamp 发布，吸引了来⾃世界各地的众多JavaScript ⾼⼿加⼊，由 Dave Methvin 率领团队进⾏开发。如今，jQuery已经成为最流⾏的 javascript 框架，在世界前 10000 个访问最多的⽹站中，有超过 55%在使⽤ jQuery

Jquery的下载与安装
下载
http://jquery.com/ 下载
在这里插入图片描述

版本

jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7,or 8. (不⽀持 ie6 78,如果需要下载 1.X)
（1）完整版 : jquery-2.1.4.js -->学习版本(学习源码向⾼⼿学习是最好学习⽅法)
（2）压缩版 : jquery-2.1.4.min.js -->开发版本(压缩版，减少传输)
⽬前使⽤版本：jquery-3.4.1.js

优点
（1）提供了强⼤的功能函数
（2）解决浏览器兼容性问题
（3）实现丰富的 UI 和插件
（4）纠正错误的脚本知识

安装
在⻚⾯引⼊即可

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

Jquery核⼼
$ 符号在 jQuery 中代表对 jQuery 对象的引⽤， "jQuery"是核⼼对象。通过该对象可以获取jQuery对象，调⽤jQuery提供的⽅法等。只有jQuery对象才能调⽤jQuery提供的⽅法

$ <==> jQuery

Dom对象与 Jquery包装集对象

明确 Dom 对象和 jQuery 包装集的概念，将极⼤的加快我们的学习速度。原始的 Dom 对象只有 DOM接⼝提供的⽅法和属性，通过js代码获取的对象都是 Dom 对象；⽽通过 jQuery 获取的对象是 jQuery 包装集对象，简称jQuery对象，只有jQuery对象才能使⽤jQuery提供的⽅法。

Dom对象
javascript 中获取 Dom 对象，Dom 对象只有有限的属性和⽅法：

var div = document.getElementById("testDiv");
var divs = document.getElementsByTagName("div");

Jquery包装集对象
可以说是 Dom 对象的扩充。在 jQuery 的世界中将所有的对象，⽆论是⼀个还是⼀组，都封装成⼀个jQuery 包装集，⽐如获取包含⼀个元素的 jQuery 包装集：

var jQueryObject = $("#testDiv");

Dom对象转 Jquery对象
Dom 对象转为 jQuery 对象，只需要利⽤ $() ⽅法进⾏包装即可

 var domDiv = document.getElementById('mydiv'); // 获取Dom对象
mydiv = $(domDiv);

Jquery对象转 Dom对象
jQuery 对象转 Dom 对象，只需要取数组中的元素即可

// 第⼀种⽅式 获取jQuery对象
var jqueryDiv = jQuery('#mydiv');
// 第⼆种⽅式 获取jQuery对象
jqueryDiv = $('#mydiv');
var dom = jqueryDiv[0]; // 将以获取的jquery对象转为dom

通过遍历 jQuery 对象数组得到的对象是 Dom 对象，可以通过 $() 转为 jQuery 对象

$('#mydiv').each(function() {//遍历
 var jquery = $(this); 
});

案例：

<div id="mydiv">write less, do more</div> <script type="text/javascript">
 console.log("-------------获取dom对象------------------")
 // dom对象
 var domDiv = document.getElementById("mydiv");
 console.log(domDiv);
 
 console.log("-------------获取jquery对象------------------")
 // 获取jquery对象
 // 第⼀种⽅式
 var jqueryDiv = jQuery('#mydiv');
 console.log(jqueryDiv);

 // 第⼆种⽅式
 jqueryDiv = $('#mydiv');
 console.log(jqueryDiv);
 
  console.log("-------------dom转jquery------------------")
 // dom转jquery包装集/对象
 var obj = $(domDiv);
 console.log(obj);
 
console.log("-------------jquery转dom------------------")
 // jquery对象转dom对象
 var dom = $('#mydiv')[0]; // 获取jquery对象转为dom
 // 或
 var dom2 = jqueryDiv[0]; // 将jquery对象转为dom
 console.log(dom);
 console.log(dom2);
 
 /* this代表了dom对象，不是jquery对象 */
 console.log("-------------dom转jquery------------------")
 $('#mydiv').each(function() {
 // 通过id选择器选择了id为mydiv的所有元素然后进⾏遍历
 // 那么遍历出的每个元素就是id为mydiv的标签元素
 // ⽽this就代表了当前的这个元素
 var jquery = $(this);
 });

 console.log("-------------jquery转dom------------------")
 $('#mydiv').each(function() {
 var dom3 = this; 
 });
</script>

Jquery选择器

和使⽤ JS 操作Dom⼀样，获取⽂档中的节点对象是很频繁的⼀个操作，在jQuery中提供了简便的⽅式供我们查找|定位元素，称为jQuery选择器，选择器可以说是最考验⼀个⼈ jQuery 功⼒的地⽅，通俗的讲, Selector 选择器就是"⼀个表示特殊语意的字符串"。只要把选择器字符串传⼊上⾯的⽅法中就能够选择不同的 Dom 对象并且以 jQuery 包装集的形式返回。

jQuery 选择器按照功能主要分为"选择"和"过滤"。并且是配合使⽤的，具体分类如下。基础选择器掌握即可 ,其他⽤到再查阅。

基础选择器
在这里插入图片描述

<style type="text/css">
 .blue{
 background: blue;
 }
</style>
<body>
 <div id="mydiv1">id选择器1<span>span中的内容</span></div>
 <div id="mydiv2" class="blue">元素选择器</div>
 <span class="blue">样式选择器</span>
</body> 

<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript">
 // id选择器
 console.log("======id====");
 var idSelecter = $('#mydiv1');
 console.log(idSelecter.html());
 console.log(idSelecter.text());
 // 元素选择器
 console.log("======name====");
 var nameSe = $('div'); // 有多个div元素
 nameSe.each(function(){
 // this是dom对象，$(this)是jquery对象
 console.log($(this).text());
 });
 // 类选择器，class
 console.log("======class====");
 var classSe = $('.blue'); // 有多个class=blue的元素
 classSe.each(function(){
 console.log($(this).text());
 });
 // 通⽤选择器：*
 console.log("======所有元素====");
 var all = $("*");
 console.log(all.length);
 // 组合选择器
 console.log("======组合====");
 var unionSe = $('span, .blue,div');
 unionSe.each(function(){ 
 console.log($(this).text());
 });
</script>

层次选择器

在这里插入图片描述

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>层次选择器</title>
 <script src="js/jquery-3.4.1.js" type="text/javascript"></script>
 <style type="text/css">
 .testColor{
 background: green;
 }
 .gray{
 background: gray;
 
 }
 </style>
 </head>
 <body>
 <div id="parent">层次择器
 <div id="child" class="testColor">⽗选择器
 <div class="gray">⼦选择器</div>
 <img src="http://www.baidu.com/img/bd_logo1.png"
 width="270" height="129" />
 <img src="http://www.baidu.com/img/bd_logo1.png"
 width="270" height="129" />
 </div> 
 <div>
 选择器2<div>选择器2中的div</div>
 </div>
 </div>
 </body>
 <script type="text/javascript">
 console.log("=========后代选择器-选择所有后代=====");
 var ancestorS = $('#parent div');
ancestorS.each(function(){
 console.log($(this).text());
 });
 
 console.log("=========⼦代选择器-选择⼉⼦辈=====");
 var child = $('#parent>div');
 child.each(function(){
 console.log($(this).text());
 });
 console.log("=========相邻选择器=====");
 var pre_next = $(".gray + img");
 console.log(pre_next.length);
 
 console.log("=========同辈选择器,其后，（弟弟）=====");
 var pre_siblings = $(".gray ~ img");
 console.log(pre_siblings.length);
 </script>
</html>

表单选择器
在这里插入图片描述

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>表单验证</title>
 <script src="js/jquery-3.4.1.js" type="text/javascript"></script>
 </head>
<body>
 <form id='myform' name="myform" method="post"> 
 <input type="hidden" name="uno" value="9999" disabled="disabled"/>
 姓名:<input type="text" id="uname" name="uname" /><br />
 密码:<input type="password" id="upwd" name="upwd" value="123456" /><br />
 年龄:<input type="radio" name="uage" value="0" checked="checked"/>⼩屁孩
<input type="radio" name="uage" value="1"/>你懂得 <br />
 爱好:<input type="checkbox" name="ufav" value="篮球"/>篮球
 <input type="checkbox" name="ufav" value="爬床"/>爬床
 <input type="checkbox" name="ufav" value="代码"/>代码<br />
 来⾃:<select id="ufrom" name="ufrom">
<option value="-1" selected="selected">请选择</option>
 <option value="0">北京</option>
 <option value="1">上海</option>
 </select><br />
 简介:<textarea rows="10" cols="30" name="uintro"></textarea><br />
 头像:<input type="file" /><br />
<input type="image" src="http://www.baidu.com/img/bd_logo1.png"
 width="20" height="20"/>
 <button type="submit" onclick="return checkForm();">提交</button>
 <button type="reset" >重置</button> 
 
 </form>
 </body>
</html> <script type="text/javascript">
 function checkForm(){
 // 获取 所有的表单元素
 $(":input").each(function(){
 // console.log($(this)[0]);
 console.log($(this)[0].tagName);
 })
console.log("------+++++++++++++++++++++--------")
 // 获取 text
 console.log("text-->" + $(":text").length); // 1
 // 获取 password
 console.log("password-->" + $(":password").length); // 1
 // 获取radio
 console.log("radio-->" + $(":radio").length); // 2
 // 获取checkbox
 console.log("checkbox-->" + $(":checkbox").length); // 3
 // 获取file
 console.log("file-->" + $(":file").length); // 1
 // 获取按钮
 console.log("button-->" + $(":button").length); // 2
 // 获取submit按钮
console.log("submit-->" + $(":submit").length); // 1
 // 获取image按钮
 console.log("image-->" + $(":image").length); // 1
 // 获取reset按钮
 console.log("reset-->" + $(":reset").length); // 1
 return false; 
 }
</script>

Jquery Dom操作

jQuery也提供了对HTML节点的操作，⽽且在原⽣js的基础之上进⾏了优化，使⽤起来更加⽅便。常⽤的从⼏个⽅⾯来操作，查找元素（选择器已经实现）；创建节点对象；访问和设置节点对象的值，以及属性；添加节点；删除节点；删除、添加、修改、设定节点的CSS样式等。注意：以下的操作⽅式只适⽤于jQuery

操作元素的属性

获取属性
在这里插入图片描述

<form action="" id="myform">
 <input type="checkbox" name="ch" checked="checked"/> aa
 <input type="checkbox" name="ch" /> bb
</form>
<script type="text/javascript">
 var ch = $("input[type='checkbox']")
 console.log(ch)
 ch.each(function(idx, em){
 console.log(idx + "-" + $(em) + "=" + this)
console.log($(em).attr('checked') + "==" + $(em).prop('checked'))
 console.log('--------------')
 })
</script>

设置属性
在这里插入图片描述

移除属性
在这里插入图片描述

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>属性操作</title>
<script src="js/jquery-3.4.1.js" type="text/javascript"></script>
 </head>
 <body>
 <pre>
 <h5>1.attr()</h5>
设置或者返回元素的属性 ;
 <h5>2.prop()</h5>
 设置 具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled。
 </pre>
 <hr />
<a href="http://www.baidu.com" id="a1">百度</a>
 <a href="http://www.sina.com" id="a2">新浪</a>
 <input type="checkbox" name="all" checked="checked"/>全选
 </body>
 <script type="text/javascript">
 // 获取属性值：attr
console.log($('#a1').attr('href'));
 console.log($(':checkbox').attr('name'));
 // 若未选中显示undefined，选中显示 checked
 console.log($(':checkbox').attr('checked')); 
 // 获取属性值：prop
 // 若未选中显示false，选中显示 true
console.log($(":checkbox").prop('checked')); 
 console.log($('#a2').prop('href'))
 // 设置属性值
 $('#a1').attr('href','https://jquery.com');
 $(":checkbox").prop("checked",false);
 // 移除属性
 $('#a2').removeAttr('href');
 </script>
</html>

操作元素的样式

对于元素的样式，也是⼀种属性，由于样式⽤得特别多，所以对于样式除了当做属性处理外还可以有专⻔的⽅法进⾏处理。
在这里插入图片描述

增加元素的具体样式，格式：

1）css({‘样式名’:’样式值’,’样式名2’:’样式值2’})
例：css({“background-color”:“red”,“color”:"#fff"});
2）css(“样式名”,”样式值”)
例：css(‘color’,‘white’)

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>设置元素样式</title>
 <script src="jquery-3.4.1.js" type="text/javascript" ></script>
 <style type="text/css">
 div{
padding: 8px;
 width: 180px;
 }
 .blue{
 background: blue;
 }
 .larger{
 font-size: 30px;
 }
.green {
 background : green;
 }
 </style>
 </head>
 <body>
 <h3>css()⽅法设置元素样式</h3>
 <div id="conBlue" class="blue larger">天蓝⾊</div>
 <div id="conRed">⼤红⾊</div>
<div id="remove" class="blue larger">天蓝⾊</div>
 </body>
 <script type="text/javascript">
 // 获取样式名称
 console.log($("#remove").attr("class"));
 // 修改样式，那么id为remove的元素样式class只有green
// $('#remove').attr("class","green")
 // 添加样式名称，class名称 --叠加
 // $('#conBlue').addClass("blue larger");
 // 添加元素具体样式
 // { "":"" , "":"" } 名:值 对
 $('#conRed').css({"background-color":"red","color":"#fff"});
$('#remove').css('color','red');
 // 移除样式
 // $("#remove").removeClass("blue larger");
 </script>
</html>

操作元素的内容
对于元素还可以操作其中的内容，例如⽂本，值，甚⾄是html。
在这里插入图片描述

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>操作内容</title>
 <script src="js/jquery-3.4.1.js" type="text/javascript"></script>
 </head>
 <body>
 <h3><span>html()和text()⽅法设置元素内容</span></h3>
 <div id="html"></div>
 <div id="text"></div>
 <input type="text" name="uname" value="oop" />
 </body>
 <script type="text/javascript">
// 获取HTML内容，包括HTML标签
 console.log($('h3').html());
 // 获取⽂本内容，不包括HTML标签
 console.log($('h3').text());
 // 获取value值
 console.log($('[name=uname]').val());
 // 设置
$('#html').html("<p>使⽤html设置,看不到标签</p>");
 $('#text').text("<p>使⽤text设置,能看到标签</p>");
 $('[name=uname]').val("哈哈哈");
 // console.info("abc");
 // console.log("abc");
 // console.warn("abc")
 // console.error("abc");
 </script>
</html>

创建元素
在jQuery中创建元素很简单，直接使⽤核⼼函数即可

$(‘元素内容’);

$('<p>this is a paragraph!!!</p>');

添加元素
在这里插入图片描述

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>追加</title>
 <script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
 <style type="text/css">
div {
 margin: 10px 0px;
 }
 span{
 color: white;
 padding: 8px
 }
 .red{
background-color: red;
 }
 .blue{
 background-color: blue;
 }
 .green{
 background-color: green;
 }
</style>
 </head>
 <body>
 <h3>prepend()⽅法前追加内容</h3>
 <h3>prependTo()⽅法前追加内容</h3>
 <h3>append()⽅法后追加内容</h3>
 <h3>appendTo()⽅法后追加内容</h3>
 <span class="red">男神</span>
<span class="blue">偶像</span>
 <div class="green">
 <span >⼩鲜⾁</span>
 </div>
 </body>
</html> <script type="text/javascript">
 var str ="<span id='mydiv' style='padding: 8px;width: 180px;background-
color:#ADFF2F;'>动态创建span</span>";
 // 1、使⽤prepend前加内容
 $("body").prepend(str);
 
 // 2、使⽤prependTo前加内容
 $("<b>开头</b>").prependTo('body');
// 3、使⽤append后加内容
 $("body").append(str);
 // $("div").append($('.red')); // 当把已存在的元素添加到另⼀处的时候相当于移动
 
 // 4、使⽤appendTo后追加内容
 $(str).appendTo('body');
 // $('.blue').appendTo("div"); 
</script>
<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>插⼊元素</title>
 <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
 span{
 color: white;
 padding: 8px
 }
 .red{
background-color: red;
 }
 .blue{
 background-color: blue;
 }
 .green{
 background-color: green;
 }
</style>
 </head>
 <body>
 <h3>before() 和 after()⽅法在元素之前后插⼊内容</h3>
 <span class="green">财⼤⽓粗</span>
 </body>
</html> <script type="text/javascript">
 var str1 = "<span class='red'>⼟豪</span>";
 var str2 = "<span class='blue'>暴发户</span>";
 $(".green").before(str1); // 前置元素
 $(".green").after(str2); // 后存元素
</script>

删除元素
在这里插入图片描述

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>删除元素</title>
 <script src="js/jquery-3.4.1.js" type="text/javascript"></script>
 <style type="text/css">
 span{
color: white;
 padding: 8px;
 margin: 5px;
 float: left;
 }
 .green{
 background-color: green;
 }
 .blue{
 background-color: blue;
 }
</style>
 </head>
 <body>
 <h3>删除元素</h3>
 <span class="green">jquery<a>删除</a></span>
 <span class="blue">javase</span>
 <span class="green">http协议</span>
 <span class="blue">servlet</span>
 </body>
</html> <script type="text/javascript">
 // 删除所选元素 或指定的⼦元素
 // $("span").remove();
 // 删除样式为blue的span
 // $("span.blue").remove();
 // 清空元素
 // $("span").empty();
 // $(".green").empty();
</script>

遍历元素

each()
$(selector).each(function(index,element)) :遍历元素
参数 function 为遍历时的回调函数，
index 为遍历元素的序列号，从 0 开始。
element是当前的元素，此时是dom元素。
<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>遍历元素</title>
 <style type="text/css">
 span{
color: white;
 padding: 8px;
 margin: 5px;
 float: left;
 }
 .green{
 background-color: green;
 }
 .blue{
 background-color: blue;
 }
</style>
 <script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
 <h3>遍历元素 each()</h3>
<span class="green">jquery</span>
 <span class="green">javase</span>
 <span class="green">http协议</span>
 <span class="green">servlet</span>
 </body>
 <script type="text/javascript">
 $('span').each(function (idx , e) {
 console.log(idx + " ---> " + $(e).text());
 })
 </script>
</html>

Jquery事件

ready()类似于 onLoad()事件
ready()可以写多个，按顺序执⾏
$(document).ready(function(){})等价于$(function(){})

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>ready事件</title>
 <script src="js/jquery-3.4.1.js" type="text/javascript"></script>
 <script type="text/javascript">
// ⽂档载⼊完便触发ready⽅法
 $(document).ready(function(){
 $("div").html("ready go...");
 })
 // $(document).ready(function(){}) == $(function(){})
 $(function(){
 $("p").click( function () {
$(this).hide();
 });
 });
 $(function(){
 $("#btntest").bind("click",function(){
 $("div").html("剁吧...");
 });
 });
</script>
 </head>
 <body>
 <h3>⻚⾯载⼊时触发ready()事件</h3>
 <div></div>
 <input id="btntest" type="button" value="剁⼿" />
 <p>aaa</p>
 <p>bbbb</p>
<p>ccc</p>
 <p>dddd</p>
 </body>
</html>

bind()绑定事件
为被选元素添加⼀个或多个事件处理程序，并规定事件发⽣时运⾏的函数。

$(selector).bind( eventType [, eventData], handler(eventObject));

eventType ：是⼀个字符串类型的事件类型，就是你所需要绑定的事件。
这类类型可以包括如下：
blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick
mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter
mouseleave,change, select, submit, keydown, keypress, keyup, error
[, eventData]：传递的参数，格式：{名:值,名2:值2}
handler(eventObject)：该事件触发执⾏的函数

简单的bind()事件

<script type="text/javascript">
 $(function(){
 /*$("#test").bind("click",function(){
 alert("世界会向那些有⽬标和远⻅的⼈让路！！");
 });*/
 /*
* js的事件绑定
 ele.οnclick=function(){};
 * */
 // 等同于上⾯的放⽅法
 $("#test").click(function(){
 alert("世界会向那些有⽬标和远⻅的⼈让路！！");
 });
 /*
1.确定为哪些元素绑定事件
 获取元素
 2.绑定什么事件（事件类型）
 第⼀个参数：事件的类型
 3.相应事件触发的，执⾏的操作
 第⼆个参数：函数
 * */
$("#btntest").bind('click',function(){
 // $(this).attr('disabled',true);
 $(this).prop("disabled",true);
 })
 });
 </script> <body>
 <h3>bind()⽅简单的绑定事件</h3>
 <div id="test" style="cursor:pointer">点击查看名⾔</div>
 <input id="btntest" type="button" value="点击就不可⽤了" />
</body>

绑定多个事件

<script type="text/javascript">
 $(function(){
 // 绑定click 和 mouseout事件
 /*$("h3").bind('click mouseout',function(){
 console.log("绑多个事件");
 });*/
 // 链式编程
 $("h3").bind('click',function(){
 alert("链式编程1");
 }).bind('mouseout',function(){
 $("#slowDiv").show("slow");//让slowDiv显示
 });
 /*$("#test").click(function(){
 console.log("点击⿏标了....");
 }).mouseout(function () {
 console.log("移出⿏标了...");
 });*/
 $("#test").bind({
 click:function(){
 alert("链式编程1");
 },
mouseout:function(){
 $("#slowDiv").show("slow");
 }
 });
 });
</script> <body>
 <h3>bind()⽅法绑多个事件</h3>
 <div id="test" style="cursor:pointer">点击查看名⾔</div>
 <div id="slowDiv"style=" width:200px; height:200px; display:none; ">
 ⼈之所以能，是相信能
 </div>
</body>

Jquery Ajax

$.ajax

jquery 调⽤ ajax ⽅法：
格式：$.ajax({});
参数：
type：请求⽅式 GET/POST
url：请求地址 url
async：是否异步，默认是 true 表示异步
data：发送到服务器的数据
dataType：预期服务器返回的数据类型
contentType：设置请求头
success：请求成功时调⽤此函数
error：请求失败时调⽤此函数
get请求

$.ajax({
 type:"get",
 url:"js/cuisine_area.json",
 async:true,
 success : function (msg) {
 var str = msg;
 console.log(str);
$('div').append("<ul></ul>");
 for(var i=0; i<msg.prices.length;i++){
 $('ul').append("<li></li>");
 $('li').eq(i).text(msg.prices[i]);
 }
 },
 error : function (errMsg) {
 console.log(errMsg);
 $('div').html(errMsg.responseText);
 }
});

post请求

$.ajax({
 type:"post",
 data:"name=tom",
 url:"js/cuisine_area.json",
 contentType: "application/x-www-form-urlencoded",
 async:true,
 success : function (msg) {
 var str = msg;
 console.log(str);
 $('div').append("<ul></ul>");
 for(var i=0; i<msg.prices.length;i++){
 $('ul').append("<li></li>");
 $('li').eq(i).text(msg.prices[i]);
 }
 },
 error : function (errMsg) {
 console.log(errMsg);
 $('div').html(errMsg.responseText)
 }
});

$.get

这是⼀个简单的 GET 请求功能以取代复杂 $.ajax 。
请求成功时可调⽤回调函数。如果需要在出错时执⾏函数，请使⽤ $.ajax。

// 1.请求json⽂件，忽略返回值
$.get('js/cuisine_area.json');

// 2.请求json⽂件，传递参数，忽略返回值
$.get('js/cuisine_area.json',{name:"tom",age:100});

// 3.请求json⽂件,拿到返回值,请求成功后可拿到返回值
$.get('js/cuisine_area.json',function(data){
 console.log(data);
});

// 4.请求json⽂件,传递参数,拿到返回值 
$.get('js/cuisine_area.json',{name:"tom",age:100},function(data){
 console.log(data);
});

$.post
这是⼀个简单的 POST 请求功能以取代复杂 $.ajax 。
请求成功时可调⽤回调函数。如果需要在出错时执⾏函数，请使⽤ $.ajax。

// 1.请求json⽂件，忽略返回值
$.post('../js/cuisine_area.json');

// 2.请求json⽂件，传递参数，忽略返回值
$.post('js/cuisine_area.json',{name:"tom",age:100});

// 3.请求json⽂件,拿到返回值,请求成功后可拿到返回值
$.post('js/cuisine_area.json',function(data){
 console.log(data);
});

// 4.请求json⽂件,传递参数,拿到返回值 
$.post('js/cuisine_area.json',{name:"tom",age:100},function(data){
 console.log(data);
});

$.getJSON
表示请求返回的数据类型是JSON格式的ajax请求

$.getJSON('js/cuisine_area.json',{name:"tom",age:100},function(data){
 console.log(data); // 要求返回的数据格式是JSON格式
});