js进阶 14-6 $.ajax()方法如何使用

一、总结

一句话总结：$.ajax([settings])settings可选。用于配置Ajax请求的键值对集合。

1、$.ajax()的特点是什么（和$.get()、$.post()的区别是什么）？

$.get,$.post为$.ajax()的封装

2、$.ajax()方法的参数是什么形式？

键值对

  • 语法：$.ajax([settings])settings可选。用于配置Ajax请求的键值对集合。

    参数

    1. 第一个参数是我们希望请求的URL;
    2. 第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。
  • 常用参数：
    1. url默认值：当前页地址。发送请求的地址。
    2. type请求方式(“POST”或”GET”),默认为”GET”。
    3. Success类型：Function请求成功后的回调函数。
    4. error请求失败时调用此函数。
    5. .........
16 <script type="text/javascript">

17     $(function(){

18         $('#btn').click(function(){

19             $.ajax({

20                 type:'POST', //默认为GET方式提交

21                 url:'testPost0.php',

22                 data:{password:'123456'},

23                 success:function(responseTxt,statusTxt,xhr){

24                     alert(responseTxt)

25                 },

26                 error:function(){

27                     alert('加载失败')

28                 }

29             })

30         })

31     })

32 </script>

二、$.ajax()方法如何使用

1、相关知识

$.ajax()

$.ajax()方法是jQuery底层AJAX实现。之前讲的简单易用的$.get,$.post 等为高层实现见。$.ajax()返回其创建的XMLHttpRequest 对象。大多数情况下我们无需直接操作该函数。除非你需要操作不常用的选项，以获得更多的灵活性。

  • 语法：$.ajax([settings])settings可选。用于配置Ajax请求的键值对集合。

    参数

    1. 第一个参数是我们希望请求的URL;
    2. 第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。
  • 常用参数：
    1. url默认值：当前页地址。发送请求的地址。
    2. type请求方式(“POST”或”GET”),默认为”GET”。
    3. Success类型：Function请求成功后的回调函数。
    4. error请求失败时调用此函数。
    5. .........
 

2、代码

 <!DOCTYPE html>

 <html lang="en">

 <style>

 </style>

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

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

     <style type="text/css">

       </style>

 </style>

 </head>

 <body>

     <input type="button" id="btn" value="Ajax测试">

     <div id="test"></div>

 <script type="text/javascript">

     $(function(){

         $('#btn').click(function(){

             $.ajax({

                 type:'POST', //默认为GET方式提交

                 url:'testPost0.php',

                 data:{password:'123456'},

                 success:function(responseTxt,statusTxt,xhr){

                     alert(responseTxt)

                 },

                 error:function(){

                     alert('加载失败')

                 }

             })

         })

     })

 </script>

 </body>

 </html>
 

js进阶 14-6 $.ajax()方法如何使用的更多相关文章

  1. js进阶 14 jquery的ajax有哪些函数和事件（多练）

    js进阶 14 jquery的ajax有哪些函数和事件(多练) 一.总结 一句话总结:常用:load.ajax.post.get.getScript().getJSON().表单序列化,ajax事件这 ...

  2. js进阶 11-15 jquery过滤方法有哪些

    js进阶 11-15  jquery过滤方法有哪些 一.总结 一句话总结:jquery方法中的参数一般是什么:选择器.元素或 jQuery 对象. 1.jquery方法中的参数一般是什么? 选择器.元 ...

  3. js进阶正则表达式13RegExp对象方法（RegExp对象的方法：compile，test，exec）（子表达式 var reg1=/([a-z]+)\d/）

    js进阶正则表达式13RegExp对象方法(RegExp对象的方法:compile,test,exec)(子表达式 var reg1=/([a-z]+)\d/) 一.总结 1.RegExp对象有三个方 ...

  4. 利用js制作异步验证ajax方法（）

    如何利用js写ajax异步验证.代码如下: window.onload = function(){ var name = document.getElementById('register-name- ...

  5. ajaxSetup和普通的ajax方法.

    我明明写了ajaxSetup()方法可是它有时候却不一定是会执行,因为比如我common.js里写的ajaxSetup()方法,然后index.js里写了ajax方法,可是有的时候ajaxSetup里 ...

  6. js进阶 14-2 如何用ajax验证登陆状态（这里用load方法）

    js进阶 14-2 如何用ajax验证登陆状态(这里用load方法) 一.总结 一句话总结:$('#test').load('test.php?password=1234560'),这样就get方式提 ...

  7. js进阶 14-1 jquery的ajax系列中的load方法的作用是什么

    js进阶 14-1 jquery的ajax系列中的load方法的作用是什么 一.总结 一句话总结:jQuery load()方法作用是从服务器加载数据,是一个简单但强大的AJAX方法. 1.load函 ...

  8. js进阶 14-9 ajax事件有哪些

    js进阶 14-9 ajax事件有哪些 一.总结 一句话总结:ajax开始时事件.发送时事件,请求完成时事件,请求成功时事件,请求结束时事件,请求错误时事件事件. 1.ajax事件的监听对象是谁? 都 ...

  9. js进阶 14-7 jquery的ajax部分为什么需要对表单进行序列化

    js进阶 14-7 jquery的ajax部分为什么需要对表单进行序列化 一.总结 一句话总结:如果用ajax传递表单的数据,如果不进行表单的序列化,要一个参数一个参数的写,太麻烦,序列化的话,一句代 ...

随机推荐

  1. Strtus2学习

    Struts 2 体系结构 : 1.Web浏览器请求一个资源. 2.过滤器Dispatcher查找方法,确定适当的Action. 3.拦截器自动对请求应用通用功能,如验证和文件上传操作. 4.Acti ...

  2. deep-in-es6(六)

    箭头函数 Arrow Functions 箭头函数在JavaScript诞生是就存在,JavaScript建议在HTML注释内包裹行内脚本,这样可以避免不支持JS代码的浏览器将JS显示为文本. < ...

  3. 使用Vue动态生成form表单

    form-create 表单生成器 具有数据收集.校验和提交功能的表单生成器,支持双向数据绑定和事件扩展,组件包含有复选框.单选框.输入框.下拉选择框等表单元素以及省市区三级联动,时间选择,日期选择, ...

  4. 使用C库制作DLL

    一.用C编写制作 DLL 如下图所示,是在C++的基础上新建的项目工程: 新建项目的工程文件中有.cpp文件. 由于我们是用C库制作的DLL,显然用C++来编写的是不合适的,我为什么用C库,而不用C+ ...

  5. cocos2dx——lua自己主动和手动绑定

    [自己主动绑定] 參考:http://my.oschina.net/skyhacker2/blog/298397 主要是通过引擎自带的tools/tolua,主要过程例如以下: 1.编写好要导出的c+ ...

  6. JXL.jar简单封装Excel读写操作

    1.分析 一个excel文件能够有多页,每页excel中能够有多行,每行中能够有多列.用面向对象的思想能够把一行中的某列看作是一个String对象,一行看作是一个包括多个列的对象.一页是包括多行的对面 ...

  7. Kali Linux下安装VMware Tools

    引言 Kali Linux是基于Debian的Linux发行版, 设计用于数字取证和渗透測试.安装Kali Linux非常easy,可是安装VMware Tools的过程就有点麻烦了,由于在安装中途会 ...

  8. 取消cp命令别名

    1. 取消cp命令别名unalias cpcp -rf恢复别名alias cp='cp -i'2.关闭当前用户下的cp别名配置sed -i "s/alias cp='cp -i'/#alia ...

  9. jquery如何阻止子元素相应mouseout事件

    jquery如何阻止子元素相应mouseout事件:mouseout有一个特点,当鼠标移入子元素的时候,也会触发此事件,但是在实际应用中这个特点往往不是我们想要的,下面就通过代码实例介绍一下如何实现此 ...

  10. jodd-cache集锦

    Jodd cache提供了一组cache的实现,其层次如下: 其中, AbstractCacheMap是一个具有计时和大小的缓存map的默认实现,它的实现类必须: 创建一个新的缓存map. 实现自己的 ...