js进阶 14-6 $.ajax()方法如何使用
js进阶 14-6 $.ajax()方法如何使用
一、总结
一句话总结：$.ajax([settings])settings可选。用于配置Ajax请求的键值对集合。
1、$.ajax()的特点是什么（和$.get()、$.post()的区别是什么）？
$.get,$.post为$.ajax()的封装
2、$.ajax()方法的参数是什么形式？
键值对
- 语法：$.ajax([settings])settings可选。用于配置Ajax请求的键值对集合。
参数
- 第一个参数是我们希望请求的URL;
- 第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。
- 常用参数：
- url默认值：当前页地址。发送请求的地址。
- type请求方式(“POST”或”GET”),默认为”GET”。
- Success类型：Function请求成功后的回调函数。
- error请求失败时调用此函数。
- .........
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请求的键值对集合。
参数
- 第一个参数是我们希望请求的URL;
- 第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。
- 常用参数：
- url默认值：当前页地址。发送请求的地址。
- type请求方式(“POST”或”GET”),默认为”GET”。
- Success类型：Function请求成功后的回调函数。
- error请求失败时调用此函数。
- .........
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()方法如何使用的更多相关文章
- js进阶 14 jquery的ajax有哪些函数和事件（多练）
js进阶 14 jquery的ajax有哪些函数和事件(多练) 一.总结 一句话总结:常用:load.ajax.post.get.getScript().getJSON().表单序列化,ajax事件这 ...
- js进阶 11-15 jquery过滤方法有哪些
js进阶 11-15 jquery过滤方法有哪些 一.总结 一句话总结:jquery方法中的参数一般是什么:选择器.元素或 jQuery 对象. 1.jquery方法中的参数一般是什么? 选择器.元 ...
- js进阶正则表达式13RegExp对象方法（RegExp对象的方法：compile，test，exec）（子表达式 var reg1=/([a-z]+)\d/）
js进阶正则表达式13RegExp对象方法(RegExp对象的方法:compile,test,exec)(子表达式 var reg1=/([a-z]+)\d/) 一.总结 1.RegExp对象有三个方 ...
- 利用js制作异步验证ajax方法（）
如何利用js写ajax异步验证.代码如下: window.onload = function(){ var name = document.getElementById('register-name- ...
- ajaxSetup和普通的ajax方法.
我明明写了ajaxSetup()方法可是它有时候却不一定是会执行,因为比如我common.js里写的ajaxSetup()方法,然后index.js里写了ajax方法,可是有的时候ajaxSetup里 ...
- js进阶 14-2 如何用ajax验证登陆状态（这里用load方法）
js进阶 14-2 如何用ajax验证登陆状态(这里用load方法) 一.总结 一句话总结:$('#test').load('test.php?password=1234560'),这样就get方式提 ...
- js进阶 14-1 jquery的ajax系列中的load方法的作用是什么
js进阶 14-1 jquery的ajax系列中的load方法的作用是什么 一.总结 一句话总结:jQuery load()方法作用是从服务器加载数据,是一个简单但强大的AJAX方法. 1.load函 ...
- js进阶 14-9 ajax事件有哪些
js进阶 14-9 ajax事件有哪些 一.总结 一句话总结:ajax开始时事件.发送时事件,请求完成时事件,请求成功时事件,请求结束时事件,请求错误时事件事件. 1.ajax事件的监听对象是谁? 都 ...
- js进阶 14-7 jquery的ajax部分为什么需要对表单进行序列化
js进阶 14-7 jquery的ajax部分为什么需要对表单进行序列化 一.总结 一句话总结:如果用ajax传递表单的数据,如果不进行表单的序列化,要一个参数一个参数的写,太麻烦,序列化的话,一句代 ...
随机推荐
- react基础用法一(在标签中渲染元素)
react基础用法一(渲染元素) 如图所示最简单的变量使用方法 格式 let 变量名称 = 赋值: 渲染格式直接用 {变量名称} 就可以直接渲染到页面 如图所示第二种渲染方法 格式 const 变量名 ...
- scrapy框架中间件配置代理
scrapy框架中间件配置代理import random#代理池PROXY_http = [ '106.240.254.138:80', '211.24.102.168:80',]PROXY_http ...
- jquery正则匹配URL地址
JQuery代码: var regexp = /((http|ftp|https|file):\/\/([\w\-]+\.)+[\w\-]+(\/[\w\u4e00-\u9fa5\-\.\/?\@\% ...
- Junit4.x高级使用方法具体解释(一)
近期整理代码的时候,总习惯把一些经常使用的工具类和方法等都写在junit中,这样能够方便于在想用的时候直接copy,在用junit的时候学到了一些比較实用的东西.记录例如以下: 1.使用junit进行 ...
- opencv-图像金字塔
图像金字塔 目标 原理摘自:http://www.opencv.org.cn/opencvdoc/2.3.2/html/doc/tutorials/imgproc/pyramids/pyramids. ...
- 博弈论 SG函数（模板） HDU 1848 Fibonacci again and again
Fibonacci again and again Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Jav ...
- 使用Vue动态生成form表单
form-create 表单生成器 具有数据收集.校验和提交功能的表单生成器,支持双向数据绑定和事件扩展,组件包含有复选框.单选框.输入框.下拉选择框等表单元素以及省市区三级联动,时间选择,日期选择, ...
- SpringMVC框架中的异常解析器-ExceptionHandler和HandlerExceptionResolver
SpringMVC框架中,处理异常还是挺方便的,提供了一个异常解析器. 处理局部异常 @Controller public class AccessController { /** * 处理这个Con ...
- 使用TCP协议的NAT穿透技术 （转载）
其实很早我就已经实现了使用TCP协议穿透NAT了,但是苦于一直没有时间,所以没有写出来,现在终于放假有一点空闲,于是写出来共享之. 一直以来,说起NAT穿透,很多人都会被告知使用UDP打孔这个技术,基 ...
- HDU 5188 zhx and contest（带限制条件的 01背包）
Problem Description As one of the most powerful brushes in the world, zhx usually takes part in all ...