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. 及格的产品vs优秀的产品

    类似的产品,做了同样的一个功能,但是,我们还是可以很明显的感受到不同,这种不同我们常常把他叫做「用户体验」. 来看看2组类似产品相似功能的设计: 识别到歌名vs还可以滚动展示歌词 在很早的时候就存在一 ...

  2. openssl之EVP系列之5---EVP_Encrypt系列函数具体解释(二)

    openssl之EVP系列之5---EVP_Encrypt系列函数详细解释(二)    ---依据openssl doc/crypto/EVP_EncryptInit.pod和doc/ssleay.t ...

  3. [转]Massive Model Rendering Techniques

    Massive Model Rendering Techniques Andreas Dietrich Enrico Gobbetti Sung-Eui Yoon Abstract We presen ...

  4. Codefroces Educational Round 27 845G Shortest Path Problem?

    Shortest Path Problem? You are given an undirected graph with weighted edges. The length of some pat ...

  5. CODEVS——T1183 泥泞的道路

    时间限制: 1 s  空间限制: 128000 KB 题目等级 : 钻石 Diamond 题解  查看运行结果 题目描述 Description CS有n个小区,并且任意小区之间都有两条单向道路(a到 ...

  6. Struts2+Spring+Hibernate step by step 06 整合Hibernate

    注:该系列教程.部分内容来自王健老师编写ssh整合开发教程 Hibernate是一款优秀的ORM(Object Relation Mapping-对象关系映射图)工具.与Struts.Spring项目 ...

  7. 关于multiprocessing，我也来聊几句

    起因:近期须要从hbase中向 ES中导一批数据.使用multiprocessing 启动多个程序同一时候向ES导数据.能够大大提高效率.由于导数的任务是能够依照时间切割的. 一段简单的代码例如以下: ...

  8. Directx9.0 学习教程3 -图形学之创建点 线 三角形 等

    1.首先 介绍点的表示方法 struct CUSTOMVERTEX { float x,y,z; }; CUSTOMVERTEX Vertices[] = { {-5.0, -5.0, 0.0}, { ...

  9. HDU 3400 Line belt （三分再三分）

    HDU 3400 Line belt (三分再三分) ACM 题目地址:  pid=3400" target="_blank" style="color:rgb ...

  10. Problem C: Celebrity Split

    题目描写叙述 Problem C: Celebrity Split Jack and Jill have decided to separate and divide their property e ...